更改 Xamarin 移动应用程序的工具栏颜色

Posted 2023-04-13

【中文标题】更改 Xamarin 移动应用程序的工具栏颜色

【英文标题】：Change Toolbar Color for Xamarin Mobile App

【发布时间】：2021-07-31 05:53:00

【问题描述】：

我是 xamarin.forms 开发的新手，我正在使用 VisualStudio 2019 来实现相同的目标。我正在开发一个示例 shell 应用程序，但无法更改工具栏的颜色（图片中的蓝色）。谁能帮我解决这个问题。

【问题讨论】：

您是否在导航中尝试过此属性 BarBackgroundColor

@Prasanth 我在 shellItem 中没有找到这样的属性。你能帮帮我吗？

【参考方案1】：

我们可以通过在shell.xaml中添加BackgroundColor="Green"来设置背景颜色

例如我们设置它Green

<Shell 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"
   xmlns:local="clr-namespace:xxx"
   Title="xxx"
   BackgroundColor="Green"
   x:Class="xxx.AppShell">

这会让TabBar的颜色同时变为绿色。所以我们应该为TabBar创建样式。

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">#2196F3</Color> //color of TabBar

        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="StaticResource NavigationPrimary" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="StaticResource NavigationPrimary" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
            <Setter Property="Shell.TabBarTitleColor" Value="White"/>
        </Style>
        <Style x:Key="MyBaseStyle" TargetType="Element">

            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="StaticResource NavigationPrimary" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
            <Setter Property="Shell.TabBarTitleColor" Value="White"/>
        </Style>

        <Style TargetType="ShellItem" BasedOn="StaticResource BaseStyle" />
        <Style TargetType="TabBar" BasedOn="StaticResource MyBaseStyle" />
    </ResourceDictionary>
</Shell.Resources>

<!-- Your Pages -->
<TabBar  >
    <Tab Title="xxx" Icon="xxx" >
        <ShellContent ContentTemplate="DataTemplate xxx" />
    </Tab>
    <Tab Title="xxx" Icon="xxx">
        <ShellContent ContentTemplate="DataTemplate xxx" />
    </Tab>
</TabBar>