英文:
.Net Maui Align Shell Tabs
问题
我有一个使用Shell Tabs的.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>
如果您需要进一步的帮助,请随时告诉我。
英文:
I have a .Net Maui project that is using Shell Tabs. The tabs at the bottom of the app align perfectly filling in all the space evenly. The tabs that are inserted on a content page are aligning to the left and not filling in all the space.
As you can see the tabs at the bottom are aligned the way I want filling in all available space. The tabs labeled 11/7, 11/8, 11/9 & 11/10 are aligning to the left. What I want is for them to align the same as the tabs at the bottom filling in all available space and being even width.
Here is the code block for the TabBar in the Shell.
<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
得分: 4
为了使Maui Shell Tabs的width
均匀对齐,您可以使用在.NET MAUI中使用自定义渲染器来实现。
以下是详细步骤:
- 在
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
})
输出:
英文:
To align the width
of Maui Shell Tabs evenly, you can use the Using Custom Renderers in .NET MAUI to achieve it.
Below are the detailed steps:
- Create the platform-specific implementation file
CustomShellRenderer.cs
underPlatform/Android
:
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);
}
}
}
}
}
- Finally, register our handlers like below in the
MauiProgram.cs
:
.ConfigureMauiHandlers(handlers => {
#if ANDROID
handlers.AddHandler(typeof(Shell),typeof(CustomShellRenderer));
#endif
})
Output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论