如何删除.NET MAUI 中 TabBar 图标下面尴尬的空白空间？

huangapple
go评论170阅读模式
英文:

How do I delete the awkward empty space under icon in TabBar in .NET MAUI?

问题

我在AppShell中使用TabBar来创建一个选项卡。就像下面的代码一样，非常简单，但问题是我只想放置图标，并且图标应该自动垂直居中，但实际上，在图标下面有一个尴尬的空间。

  1. <TabBar>
  2. 	<Tab Icon="home.svg">
  3. 		<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
  4. 	</Tab>
  5. 	<Tab Icon="plus.svg">
  6. 		<ShellContent ContentTemplate="{DataTemplate local:AddDareTextPage}" Route="AddDareTextPage"/>
  7. 	</Tab>
  8. 	<Tab Icon="profile.svg">
  9. 		<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
  10. 	</Tab>
  11. </TabBar>

如何删除.NET MAUI 中 TabBar 图标下面尴尬的空白空间？

如您在上面的图片中所见，图标并不垂直居中，而是稍微向上偏移了一点。我不知道是什么原因导致了这个问题，因为在代码中没有设置图标的位置，但后来我意识到这是为Title留下的空间。

当我在代码中添加了<Tab Icon="home.svg" Title="MAIN">时，一个图标下面就有了一个标题。如下图所示，不必要的空间消失了。

如何删除.NET MAUI 中 TabBar 图标下面尴尬的空白空间？

是否有办法只放置图标并垂直居中它们？我不想在TabBar中放置任何Title，但我找不到这样做的方法。

英文:

I'm using TabBar in AppShell to create a tab. Like the code below, it is very simple but the problem is that I just want to put the icon and the icon should automatically be vertically centered but instead, there is an awkward space under the icons.

  1. <TabBar>
  2. 	<Tab Icon="home.svg">
  3. 		<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
  4. 	</Tab>
  5. 	<Tab Icon="plus.svg">
  6. 		<ShellContent ContentTemplate="{DataTemplate local:AddDareTextPage}" Route="AddDareTextPage"/>
  7. 	</Tab>
  8. 	<Tab Icon="profile.svg">
  9. 		<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
  10. 	</Tab>
  11. </TabBar>

如何删除.NET MAUI 中 TabBar 图标下面尴尬的空白空间？

As you can see with the above picture the icons are not vertically centered and it upwards a little bit. I didn't know what caused this because in the code, there is nothing that sets the location of the icon but then I realized it was the space for the Title.

This is when I added <Tab Icon="home.svg" Title="MAIN"> in the code so there is a title under one icon. And as you can see in the image below, the unnecessary space is gone.

如何删除.NET MAUI 中 TabBar 图标下面尴尬的空白空间？

Is there a way to just put the icons and center them vertically? I don't want to put any Title in TabBar but I couldn't find a way to do this.

答案1

得分: 3

我们可以在.NET MAUI中使用使用自定义渲染器来移除额外的空间并使图标垂直居中。

目前，标题具有固定高度，因此在图标下方有空白空间。我们需要使用使用自定义渲染器来设置bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;以移除标题占用的额外空间并使图标垂直居中。

以下是详细的步骤：

  1. 在应用程序的Platforms/Android/目录中创建一个自定义的ShellRenderer类：
  1. using Microsoft.Maui.Controls.Handlers.Compatibility; 
  2. using Microsoft.Maui.Controls.Platform.Compatibility;
  4. namespace MauiApp2
  5. {
  6.     class CustomShellHandler : ShellRenderer
  7.     {
  8.         protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
  9.         {
  10.             return new Platforms.Android.CustomShellBottomNavViewAppearanceTracker(this, shellItem.CurrentItem);
  11.         }
  12.     }
  13. }
  1. 要自定义BottomNavView，请在同一目录中创建一个新的类CustomBottomNavViewAppearanceTracker：
  1. using Android.Graphics.Drawables; 
  2. using Android.Views;
  3. using Google.Android.Material.BottomNavigation;
  4. using Microsoft.Maui.Controls.Platform;
  5. using Microsoft.Maui.Controls.Platform.Compatibility;
  6. using Microsoft.Maui.Platform;
  8. namespace MauiApp2.Platforms.Android
  9. {
  10.     class CustomShellBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
  11.     {
  12.         private readonly IShellContext shellContext;
  14.         public CustomShellBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
  15.         {
  16.             this.shellContext = shellContext;
  17.         }
  19.         public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
  20.         {
  21.             base.SetAppearance(bottomView, appearance);
  22.          
  23.             // 关键是像下面这样设置
  24.             bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
  25.         }
  26.     }
  27. }
  1. 最后一步是在MauiProgram.cs中注册我们的处理程序，如下所示：
  1. var builder = MauiApp.CreateBuilder(); 
  2. builder
  3.     .UseMauiApp<App>()
  4.     .ConfigureMauiHandlers(handlers =>
  5.     {
  6. #if ANDROID
  7.         handlers.AddHandler(typeof(Shell), typeof(CustomShellHandler));
  8. #endif
  9.     });

运行结果：

如何删除.NET MAUI 中 TabBar 图标下面尴尬的空白空间？

英文:

We can use the Using Custom Renderers in .NET MAUI to remove the extra space and get the icon vertically centered.

At the moment the title has a fix height so there is an empty space under the icon. We need use the Using Custom Renderers to set the bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled; to remove the extra space occupied by title and get the icon vertically centered.

Here are the detailed steps listed below:

1.Create a custom ShellRenderer class in the Platforms/Android/ directory of your application:

  2. using Microsoft.Maui.Controls.Handlers.Compatibility; 
  3. using Microsoft.Maui.Controls.Platform.Compatibility;
  5. namespace MauiApp2;
  7. class CustomShellHandler : ShellRenderer
  8. {
  9.     protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
  10.     {
  11.         return new Platforms.Android.CustomShellBottomNavViewAppearanceTracker(this, shellItem.CurrentItem);
  12.     }
  14. }
  1. To customize BottomNavView create a new class CustomBottomNavViewAppearanceTracker in the same directory：
  1. using Android.Graphics.Drawables; 
  2. using Android.Views;
  3. using Google.Android.Material.BottomNavigation;
  4. using Microsoft.Maui.Controls.Platform;
  5. using Microsoft.Maui.Controls.Platform.Compatibility;
  6. using Microsoft.Maui.Platform;
  8. namespace MauiApp2.Platforms.Android
  9. {
  11.     class CustomShellBottomNavViewAppearanceTracker : ShellBottomNavViewAppearanceTracker
  12.     {
  13.         private readonly IShellContext shellContext;
  15.         public CustomShellBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem) : base(shellContext, shellItem)
  16.         {
  17.             this.shellContext = shellContext;
  18.         }
  20.         public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
  21.         {
  22.             base.SetAppearance(bottomView, appearance);
  23.          
  25.             // the key is to set like below
  26.             bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
  29.         }
  31.     }
  33. }
  1. The final step is registering our handlers in MauiProgram.cs like below:
  1. var builder = MauiApp.CreateBuilder(); 
  2. builder
  3.     .UseMauiApp&lt;App&gt;()
  4.     .ConfigureMauiHandlers(handlers =&gt;
  5. {
  6. #if ANDROID
  7.             handlers.AddHandler(typeof(Shell), typeof(CustomShellHandler));
  8. #endif
  9.  })

Running output:

如何删除.NET MAUI 中 TabBar 图标下面尴尬的空白空间？

huangapple
  • 本文由 发表于 2023年6月9日 07:03:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76436217.html
  • .net
  • c#
  • maui
  • xaml
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定