.Net Maui 对齐 Shell 标签
[英].Net Maui Align Shell Tabs
问题描述
我有一个使用 Shell 选项卡的 .Net Maui 项目。 应用程序底部的选项卡完美对齐，均匀地填充所有空间。 插入到内容页面上的选项卡向左对齐，并没有填满所有空间。
如您所见，底部的选项卡按照我想要填充所有可用空间的方式对齐。 标有 11/7、11/8、11/9 和 11/10 的标签向左对齐。 我想要的是让它们与底部的选项卡对齐，填充所有可用空间并且宽度均匀。
这是 Shell 中 TabBar 的代码块。
<TabBar>
<Tab Title="Dashboard">
<Tab.Icon>
<FontImageSource FontFamily="FAS"
Glyph="{x:Static fontAwesome:FontAwesomeIcons.House}"
Color="Black"/>
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
</Tab>
<Tab Title="Sessions" >
<Tab.Icon>
<FontImageSource FontFamily="FAS"
Glyph="{x:Static fontAwesome:FontAwesomeIcons.ChalkboardUser}"
Color="Black"/>
</Tab.Icon>
<ShellContent Title="11/7" ContentTemplate="{DataTemplate local:SessionsDay1}" Route="SessionsDay1"/>
<ShellContent Title="11/8" ContentTemplate="{DataTemplate local:SessionsDay2}" Route="SessionsDay2"/>
<ShellContent Title="11/9" ContentTemplate="{DataTemplate local:SessionsDay3}" Route="SessionsDay3"/>
<ShellContent Title="11/10" ContentTemplate="{DataTemplate local:SessionsDay4}" Route="SessionsDay4"/>
</Tab>
<Tab Title="Schedule">
<Tab.Icon>
<FontImageSource FontFamily="FAS"
Glyph="{x:Static fontAwesome:FontAwesomeIcons.CalendarDays}"
Color="Black"/>
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate local:Schedule}" Route="Schedule"/>
</Tab>
<Tab Title="Speakers" FlyoutItemIsVisible="False">
<Tab.Icon>
<FontImageSource FontFamily="FAS"
Glyph="{x:Static fontAwesome:FontAwesomeIcons.Users}"
Color="Black"/>
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate local:Speakers}" Route="Speakers"/>
</Tab>
<Tab Title="Menu">
<Tab.Icon>
<FontImageSource FontFamily="FAS"
Glyph="{x:Static fontAwesome:FontAwesomeIcons.Bars}"
Color="Black"/>
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate local:Menu}" Route="Menu"/>
</Tab>
</TabBar>
1 条回复
1楼 Alexandar May - MSFT 2 已采纳 2023-06-01 03:06:36
要均匀对齐 Maui Shell Tabs 的width ，可以使用.NET MAUI 中的 Using Custom Renderers来实现。
下面是详细步骤：
- 在
Platform/Android下创建平台特定的实现文件CustomShellRenderer.cs：
using AndroidApp = Android.App.Application;
namespace MauiAppShell.Platforms.Android
{
public class CustomShellRenderer : ShellRenderer
{
/// <summary>
/// CustomShellRenderer
/// </summary>
/// <param name="context"></param>
public CustomShellRenderer(Context context) : base(context)
{
}
protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
{
return new MyTabLayoutAppearanceTracker(this);
}
}
/// <summary>
/// CustomShellItemRenderer
/// </summary>
public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
{
public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
{
}
public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
{
base.SetAppearance(tabLayout, appearance);
var displayWidth = (int)DeviceDisplay.MainDisplayInfo.Width;
for (int i = 0; i < tabLayout.TabCount; i++)
{
TabLayout.Tab tab = tabLayout.GetTabAt(i);
if (tab.CustomView == null)
{
TextView textview = new TextView(AndroidApp.Context)
{
Text = tabLayout.GetTabAt(i).Text,
TextSize = 20,
Typeface = Typeface.DefaultBold,
Gravity = GravityFlags.Center
};
textview.SetWidth(displayWidth / 5);
tab.SetCustomView(textview);
}
}
}
}
}
- 最后，在
MauiProgram.cs中像下面这样注册我们的处理程序：
.ConfigureMauiHandlers(handlers => {
#if ANDROID
handlers.AddHandler(typeof(Shell),typeof(CustomShellRenderer));
#endif
})
Output：
问题未解决？试试以下方法：
Xamarin 表单：可以在内容页面上以编程方式在 Shell App 中添加选项卡
[英]Xamarin form: Can Add tabs in Shell App programmatically on the contentpage
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.