xaml - 如何在 XAML 中居中​​选项卡式页面选项卡图标和/或文本？

Question

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

此项目仅适用于 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>

标签： xamlxamarinxamarin.formstabbedpage

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();
        }
    }
}