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

Posted 2023-03-31

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

【英文标题】：How to center Tabbed Page Tab Icons and/or text in XAML?

【发布时间】：2021-07-11 17:49:05

【问题描述】：

我在使用 Xamarin Forms for android 时遇到了问题。我用 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>

【参考方案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();
        
    

【讨论】：

这个答案应该被接受，在我的测试中它工作得很好。 i.stack.imgur.com/72vGC.png

可能是一个愚蠢的问题，但是这个渲染类实际上去哪里了？它是一个单独的类，我必须在我的 View 中调用还是将这段代码放入 ViewModel？

将该类放到平台项目中，检查docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/…。