XAML 如何删除.NET MAUI中TabBar图标下的空白区域?

quhf5bfb  于 2023-06-19  发布在  .NET
关注(0)|答案(1)|浏览(193)

我在AppShell中使用TabBar来创建一个选项卡。就像下面的代码一样,它非常简单,但问题是,我只是想把图标和图标应该自动垂直居中,但相反,有一个尴尬的空间下的图标。

<TabBar>
    <Tab Icon="home.svg">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
    </Tab>
    <Tab Icon="plus.svg">
        <ShellContent ContentTemplate="{DataTemplate local:AddDareTextPage}" Route="AddDareTextPage"/>
    </Tab>
    <Tab Icon="profile.svg">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
    </Tab>
</TabBar>

正如你可以看到上面的图片图标不是垂直居中,它向上一点点。我不知道是什么原因造成的,因为在代码中,没有设置图标的位置,但后来我意识到这是Title的空间。
这是我在代码中添加<Tab Icon="home.svg" Title="MAIN">的时候,所以在一个图标下有一个标题。正如你在下面的图片中看到的,不必要的空间消失了。

有没有一种方法可以把图标垂直地放在中间?我不想在TabBar中放入任何Title,但我找不到这样做的方法。

slwdgvem

slwdgvem1#

我们可以在.NET MAUI中使用Using Custom Renderers来删除多余的空间,并使图标垂直居中。
目前标题有一个固定的高度,所以在图标下面有一个空白的空间。我们需要使用Using Custom Renderers来设置bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;,以删除标题占用的额外空间,并使图标垂直居中。
以下是详细步骤:
1.在应用程序的Platforms/Android/目录中创建一个自定义ShellRenderer类:

using Microsoft.Maui.Controls.Handlers.Compatibility; 
using Microsoft.Maui.Controls.Platform.Compatibility;

namespace MauiApp2;

class CustomShellHandler : ShellRenderer
{
    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new Platforms.Android.CustomShellBottomNavViewAppearanceTracker(this, shellItem.CurrentItem);
    }

}

1.要自定义BottomNavView,请在同一目录下创建一个新类CustomBottomNavViewAppearanceTracker:

using Android.Graphics.Drawables; 
using Android.Views;
using Google.Android.Material.BottomNavigation;
using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Platform.Compatibility;
using Microsoft.Maui.Platform;

namespace MauiApp2.Platforms.Android
{

    class CustomShellBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
    {
        private readonly IShellContext shellContext;

        public CustomShellBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
        {
            this.shellContext = shellContext;
        }

        public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            base.SetAppearance(bottomView, appearance);
         

            // the key is to set like below
            bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;

        }

    }

}

1.最后一步是在MauiProgram.cs中注册我们的处理程序,如下所示:

var builder = MauiApp.CreateBuilder(); 
builder
    .UseMauiApp<App>()
    .ConfigureMauiHandlers(handlers =>
{
#if ANDROID
            handlers.AddHandler(typeof(Shell), typeof(CustomShellHandler));
#endif
 })

运行输出

相关问题