.Net Maui Align Shell Tabs

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

.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.

.Net Maui Align Shell Tabs

Here is the code block for the TabBar in the Shell.

 &lt;TabBar&gt;
&lt;Tab Title=&quot;Dashboard&quot;&gt;
&lt;Tab.Icon&gt;
&lt;FontImageSource FontFamily=&quot;FAS&quot;
Glyph=&quot;{x:Static fontAwesome:FontAwesomeIcons.House}&quot;
Color=&quot;Black&quot;/&gt;
&lt;/Tab.Icon&gt;
&lt;ShellContent ContentTemplate=&quot;{DataTemplate local:MainPage}&quot; Route=&quot;MainPage&quot;/&gt;
&lt;/Tab&gt;
&lt;Tab Title=&quot;Sessions&quot; &gt;
&lt;Tab.Icon&gt;
&lt;FontImageSource FontFamily=&quot;FAS&quot; 
Glyph=&quot;{x:Static fontAwesome:FontAwesomeIcons.ChalkboardUser}&quot;
Color=&quot;Black&quot;/&gt;
&lt;/Tab.Icon&gt;
&lt;ShellContent Title=&quot;11/7&quot; ContentTemplate=&quot;{DataTemplate local:SessionsDay1}&quot; Route=&quot;SessionsDay1&quot;/&gt;
&lt;ShellContent Title=&quot;11/8&quot; ContentTemplate=&quot;{DataTemplate local:SessionsDay2}&quot; Route=&quot;SessionsDay2&quot;/&gt;
&lt;ShellContent Title=&quot;11/9&quot; ContentTemplate=&quot;{DataTemplate local:SessionsDay3}&quot; Route=&quot;SessionsDay3&quot;/&gt;
&lt;ShellContent Title=&quot;11/10&quot; ContentTemplate=&quot;{DataTemplate local:SessionsDay4}&quot; Route=&quot;SessionsDay4&quot;/&gt;
&lt;/Tab&gt;
&lt;Tab Title=&quot;Schedule&quot;&gt;
&lt;Tab.Icon&gt;
&lt;FontImageSource FontFamily=&quot;FAS&quot; 
Glyph=&quot;{x:Static fontAwesome:FontAwesomeIcons.CalendarDays}&quot;
Color=&quot;Black&quot;/&gt;
&lt;/Tab.Icon&gt;
&lt;ShellContent ContentTemplate=&quot;{DataTemplate local:Schedule}&quot; Route=&quot;Schedule&quot;/&gt;
&lt;/Tab&gt;
&lt;Tab Title=&quot;Speakers&quot; FlyoutItemIsVisible=&quot;False&quot;&gt;
&lt;Tab.Icon&gt;
&lt;FontImageSource FontFamily=&quot;FAS&quot; 
Glyph=&quot;{x:Static fontAwesome:FontAwesomeIcons.Users}&quot;
Color=&quot;Black&quot;/&gt;
&lt;/Tab.Icon&gt;
&lt;ShellContent ContentTemplate=&quot;{DataTemplate local:Speakers}&quot; Route=&quot;Speakers&quot;/&gt;
&lt;/Tab&gt;
&lt;Tab Title=&quot;Menu&quot;&gt;
&lt;Tab.Icon&gt;
&lt;FontImageSource FontFamily=&quot;FAS&quot; 
Glyph=&quot;{x:Static fontAwesome:FontAwesomeIcons.Bars}&quot;
Color=&quot;Black&quot;/&gt;
&lt;/Tab.Icon&gt;
&lt;ShellContent ContentTemplate=&quot;{DataTemplate local:Menu}&quot; Route=&quot;Menu&quot;/&gt;
&lt;/Tab&gt;
&lt;/TabBar&gt;

答案1

得分: 4

为了使Maui Shell Tabs的width均匀对齐,您可以使用在.NET MAUI中使用自定义渲染器来实现。

以下是详细步骤:

  1. 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);
                }
            }
        }
    }
}
  1. 最后,在MauiProgram.cs中像下面这样注册我们的处理程序:
.ConfigureMauiHandlers(handlers => { 
#if ANDROID
    handlers.AddHandler(typeof(Shell),typeof(CustomShellRenderer));
#endif
})

输出:

.Net Maui Align Shell Tabs

英文:

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:

  1. Create the platform-specific implementation file CustomShellRenderer.cs under Platform/Android:
using AndroidApp = Android.App.Application;
namespace MauiAppShell.Platforms.Android
{
public class CustomShellRenderer : ShellRenderer
{
/// &lt;summary&gt;
/// CustomShellRenderer
/// &lt;/summary&gt;
/// &lt;param name=&quot;context&quot;&gt;&lt;/param&gt;
public CustomShellRenderer(Context context) : base(context)
{
}
protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
{
return new MyTabLayoutAppearanceTracker(this);
}
}
/// &lt;summary&gt;  
/// CustomShellItemRenderer  
/// &lt;/summary&gt;  
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 &lt; 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);
}
}
}
}
}
  1. Finally, register our handlers like below in the MauiProgram.cs:
    .ConfigureMauiHandlers(handlers =&gt; { 
#if ANDROID
handlers.AddHandler(typeof(Shell),typeof(CustomShellRenderer));
#endif
})

Output:

.Net Maui Align Shell Tabs

huangapple
  • 本文由 发表于 2023年6月1日 02:29:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76376374.html
匿名

发表评论

匿名网友

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

确定