时间戳

首页 > 解决方案 > 如何将外壳上部标签设置为全宽

xaml - 如何将外壳上部标签设置为全宽

问题描述

我正在使用 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>

我正在尝试创建的整体外观就像这个图像。

在此处输入图像描述

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

标签： xamlxamarin.formsxamarin.forms.shell

解决方案

我找到了一个简单的解决方案：我们可以将 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>

而已。

推荐阅读