0

使用 Xamarin Forms 5 开发 Xamarin 应用程序，并使用 Shell 进行导航。

选择选项卡后，是否可以将图标的颜色更改为与其下方文本相同的颜色？图标是材料设计字体。

我尝试使用TabBarTitleColor，它会更改选定选项卡的文本颜色。设置图标颜色效果很好TabBarUnselectedColor（可以通过第二张图片中的绿色图标看到）。但是我不能让图标在被选中时改变颜色。

由 TabBarUnselectedColor 着色为灰色的图标

由 TabBarUnselectedColor 着色为绿色的图标

<Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.TabBarBackgroundColor"
                        Value="White" />
                <Setter Property="Shell.TabBarForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TabBarUnselectedColor"
                        Value="Green" />
                <Setter Property="Shell.TabBarTitleColor"
                        Value="Gold" />
            </Style>
            <Style TargetType="TabBar"
                   BasedOn="{StaticResource BaseStyle}">
            </Style>
        </ResourceDictionary>
    </Shell.Resources> 
    <TabBar>
        <Tab Title="Exchange" Route="exchange">
            <Tab.Icon>
                <FontImageSource FontFamily="{StaticResource MaterialFontFamily}" Glyph="{x:Static helpers:IconFont.Earth}"  Size="24"/>
            </Tab.Icon>
            <ShellContent ContentTemplate="{DataTemplate views:ExchangeBasePage}" Route="exchangeBase" />
        </Tab>
        <Tab Title="Meet" Route="meet">

            <Tab.Icon >
                <FontImageSource FontFamily="{StaticResource MaterialFontFamily}" Glyph="{x:Static helpers:IconFont.AccountMultipleOutline}"    Size="24"/>
            </Tab.Icon>
            <ShellContent ContentTemplate="{DataTemplate views:MembersListPage}" Route="members" />
        </Tab>
    </TabBar>

更新

我尝试使用 Font Awesome Icons，但得到的是有趣的字符而不是图标，而且它们也没有改变颜色。

将 Font Awesome otf 文件添加到共享资源中，将构建操作标记为 Embedded Resource。

在组装信息中：

[assembly: ExportFont("Font-Awesome-5-Brands-Regular-400.otf", Alias = "FontAwesome")]
[assembly: ExportFont("Font-Awesome-5-Free-Regular-400.otf", Alias = "FontAwesome2")]
[assembly: ExportFont("Font-Awesome-5-Free-Solid-900.otf", Alias = "FontAwesome3")] 

 <TabBar >
        <Tab Title="Share" Route="exchange"  >
            
            <Tab.Icon>
                <FontImageSource FontFamily="Font-Awesome-5-Free-Solid-900.otf" Glyph="&#xf641;" Size="24"/>
            </Tab.Icon>
           <ShellContent ContentTemplate="{DataTemplate views:ExchangeBasePage}" Route="exchangeBase" />
        </Tab>

更新 2

尝试FontFamily更改为三个不同的别名（例如 FontAwesome3），同样的问题。试图通过将字形作为普通页面上的文本放入标签中来查看是否存在问题TabBar Tab.Icon，但结果是相同的字符。

<Label Text="&#xf004;" FontFamily="FontAwesome2" FontSize="Header" TextColor="White"/>

字形作为普通页面上标签中的文本

Awesome Font Icon - 显示为一个有趣的字符而不是图标

4

0 回答 0