有没有办法在 Xamarin.Forms Shell 顶部选项卡中显示图标？

Posted 2023-03-12

【中文标题】有没有办法在 Xamarin.Forms Shell 顶部选项卡中显示图标？

【英文标题】：Is there a way to show Icon in Xamarin.Forms Shell top tab?

【发布时间】：2019-09-06 08:41:59

【问题描述】：

我正在尝试使用 Xamarin.Forms（Shell 导航）开发 UI。我有底部标签，在每个底部标签中都有几个顶部标签。我可以显示底部选项卡图标，但不显示顶部选项卡图标（不可见）。但是，文本是可见的。

我已经尝试为顶部标签设置Icon="image.png"，就像我为底部标签所做的那样。顶部选项卡上的图标仍然不可见。

我的 XAML 代码的一部分：

<TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent ContentTemplate="DataTemplate local:ItemsPage" />
        </Tab>
        <Tab Title="About" Icon="tab_about.png">
            <ShellContent ContentTemplate="DataTemplate local:AboutPage" />
        </Tab>
        <Tab Title="Test 2" Icon="tab_others.png">
            <ShellContent Shell.NavBarIsVisible="False" Title="abt" Icon="tab_about.png" ContentTemplate="DataTemplate local:AboutPage" />
            <ShellContent Title="fed" Icon="tab_feed.png" ContentTemplate="DataTemplate local:ItemsPage" />
        </Tab>
</TabBar>

ShellContent 中定义的图标不可见（但标题可见）。

请提供任何指导或文件来实现这一目标。

【问题讨论】：

底部选项卡可以有图像，而当它们顶部对齐时，您不能这样做，您不能在那里添加图标，但如果您愿意，那么在这种情况下，您可能必须为 shell 选项卡创建渲染器！

【参考方案1】：

您需要将图标放入您的AboutPage.xaml 和ItemsPage.xaml，而不是主AppShell.xaml 文件[from Xamarin Community Forums]。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:d="http://xamarin.com/schemas/2014/forms/design"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        x:Class="YourNamespace.AboutPage"

    <Shell.TitleView>
        <StackLayout Orientation="Horizontal">
            <Image Source="tab_about.png"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="CenterAndExpand" />
            <Label Text="abt"
                HorizontalOptions="End"
                VerticalOptions="CenterAndExpand" />
        </StackLayout>
    </Shell.TitleView>
    ...
</ContentPage>