如何将外壳上部标签设置为全宽答案

【问题标题】：How to set shell upper tabs to take full width如何将外壳上部标签设置为全宽
【发布时间】：2021-05-29 04:10:51
【问题描述】：

我正在使用 Xamarin.forms 5.0 和 Shell。

我的 XAML 代码是

<TabBar Route="Root">
    <Tab x:Name="NewsListPageTab" Title="News" Route="NewsListPage">
        <Tab.Icon>
            <FontImageSource FontFamily="{StaticResource FaRegular}" Glyph="{x:Static utils:FontAwesomeIcons.Newspaper}" />
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate pages:NewsListPage}" Title="News1">
            <ShellContent.Icon>
                <FontImageSource
                FontFamily="{StaticResource FaRegular}"
                Glyph="{x:Static utils:FontAwesomeIcons.BadgePercent}">
                </FontImageSource>
            </ShellContent.Icon>
        </ShellContent>
        <ShellContent ContentTemplate="{DataTemplate pages:NewsListPage}" Title="News2">
            <ShellContent.Icon>
                <FontImageSource
                FontFamily="{StaticResource FaRegular}"
                Glyph="{x:Static utils:FontAwesomeIcons.BadgePercent}">
                </FontImageSource>
            </ShellContent.Icon>
        </ShellContent>
    </Tab>
</TabBar>

我试图创建的整体外观就像这张图片。

请问如何将图标添加到内部选项卡并使其在应用程序外壳中全宽？

【问题讨论】：

你可能需要一个自定义渲染器
是的，我同意。请问您知道如何实现自定义渲染器吗？
我找到了一个简单的解决方案：我们可以将 TabbedPages 与代表我们需要的选项卡的页面一起使用，而不是使用 ShellContent 作为上部选项卡。
在那种情况下你不会使用 Shell 是吗？您可以提供您的解决方案作为其他人提出相同问题的答案。
我使用 shell 作为下部标签栏，但对于上部标签，我使用 TabbedPage 作为上部标签。

标签： xaml xamarin.forms xamarin.forms.shell

【解决方案1】：

我找到了一个简单的解决方案：我们可以将 TabbedPages 与代表我们需要的选项卡的页面一起使用，而不是使用 ShellContent 作为上部选项卡。

<Tab Title="ُShop" Route="CompaniesTabs">
    <ShellContent ContentTemplate="{DataTemplate retailer:CompaniesTabs}" />
</Tab>

TabbedPage 代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Retailer.CompaniesTabs">

    <retailer:CompaniesStatusPage Title="Store1" />
    <retailer:CompaniesListPage Title="Store3" />
    <retailer:CompaniesFavoritePage Title="Store3" />

</TabbedPage>

就是这样。

【讨论】：