如何在 XAML 中将标签页标签图标 and/or 文本居中？

Question

我在为 Android 使用 Xamarin Forms 时遇到了问题。我用 ContentPages 创建了一个 TabbedPage 来显示不同的内容。在底部，有一个导航标签栏，应该显示图标。如何让标签栏图标居中或对齐显示的内容，使图标居中？目前，文本位于单个标签栏项目的水平中心线下方，而图标位于其上方：

此项目仅供 Android 使用

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         x:Class="RandomMovie.MainPage"
         xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
         xmlns:flv="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
        xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
        xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.WindowsSpecific;assembly=Xamarin.Forms.Core">




<ContentPage  Padding="0,-15,0,0" IconImageSource="@drawable/search_icon.png">
    
    <CollectionView ItemsSource="{Binding Watchlist}" Margin="0" >
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical"
                    Span="2" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            
            <DataTemplate>
                <Grid Margin="0" Padding="5,5,5,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                    </Grid.ColumnDefinitions>

                    <Image Margin="0"
                           HeightRequest="300"
                           WidthRequest="170" Aspect="AspectFit"
                           VerticalOptions="End">
                        <Image.Source >
                            <UriImageSource 
                                Uri="{Binding poster_path}"
                                 CacheValidity="14" 
                                 CachingEnabled="true"
                                >

                            </UriImageSource>
                        </Image.Source>
                    </Image>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

<ContentPage Title="Search">
    <ScrollView>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        
    </ScrollView>
</ContentPage>

<ContentPage Title="Ratings">
</ContentPage>

Answer 1

仅通过 XAML 代码无法做到这一点。

要在 Android 上实现此目的，您需要访问本机 BottomNavigationView 并将 LabelVisibilityMode 更改为 LabelVisibilityMode.LabelVisibilityUnlabeled

这是我在我的一个应用程序中使用 TabbedPage 的自定义渲染器的方式：

using System.Collections.Generic;
using System.Linq;
using Android.Content;
using Android.Views;
using SampleApp.Droid.Renderers;
using Google.Android.Material.BottomNavigation;
using Plugin.Badge.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using static Google.Android.Material.BottomNavigation.BottomNavigationView;
using View = Android.Views.View;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace SampleApp.Droid.Renderers
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                IEnumerable<View> children = GetAllChildViews(ViewGroup);
                BottomNavigationView bottomNavBar = (BottomNavigationView)children.SingleOrDefault(view => view is BottomNavigationView);
                
                if (bottomNavBar != null)
                    bottomNavBar.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
            }
        }

        private IEnumerable<View> GetAllChildViews(View view)
        {
            if (!(view is ViewGroup group))
                return new List<View> { view };

            List<View> result = new List<View>();
            int childCount = group.ChildCount;
            
            for (int i = 0; i < childCount; i++)
            {
                View child = group.GetChildAt(i);
                List<View> childList = new List<View> { child };
                childList.AddRange(GetAllChildViews(child));
                result.AddRange(childList);
            }

            return result.Distinct();
        }
    }
}

如何在 XAML 中将标签页标签图标 and/or 文本居中？

How to center Tabbed Page Tab Icons and/or text in XAML?

xaml

xamarin

xamarin.forms

tabbedpage