无法在 AppBar 上更改颜色

Posted 2023-03-12

【中文标题】无法在 AppBar 上更改颜色

【英文标题】：Unable to change color on AppBar

【发布时间】：2020-09-15 18:24:45

【问题描述】：

我只能部分更改 AppBar 的背景颜色。

具体来说，AppBar 上的后退按钮部分不会改变颜色。

ContentPage.XAML

<Shell.TitleView>
    <Grid BackgroundColor="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto" />
            <ColumnDefinition Width="auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Image Grid.Column="0" Source="icon.png" HorizontalOptions="Start" />
        
        <Label Grid.Column="1" Grid.ColumnSpan="2"
               Text="My Logo"
               FontSize="Large"
               HorizontalOptions="Start" 
               VerticalOptions="Center" />

        <Image Grid.Column="2" Source="Hambuger.png"  HorizontalOptions="End" Margin="0,0,15,0">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="Hamburger_Tapped" />
            </Image.GestureRecognizers>
        </Image>
    </Grid>
</Shell.TitleView>

AppShell.XAML

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">White</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="White" />
            <Setter Property="Shell.ForegroundColor" Value="Black" />
            <Setter Property="Shell.TitleColor"      Value="#7f9c6a" />
            <Setter Property="Shell.DisabledColor"   Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="White" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
            <Setter Property="Shell.TabBarTitleColor"      Value="Red"/>
        </Style>
        <Style TargetType="TabBar" BasedOn="StaticResource BaseStyle" />
    </ResourceDictionary>
</Shell.Resources>

我尝试了以下操作：

protected override void OnCreate(Bundle savedInstanceState)

    ...
    Window.SetNavigationBarColor(android.Graphics.Color.White);
    ...

【问题讨论】：

你在Shell中使用了什么模板？在设置 BackgroundColor 样式时，我们需要指定 TargetType 来消耗样式颜色。如果您使用 FlyoutItem 模板，请为其设置 TargetType。类似问题：forums.xamarin.com/discussion/162731/…

【参考方案1】：

您在Shell 中使用了什么模板？在设置样式时，我们需要指定 TargetType 来消耗样式颜色。如果您使用FlyoutItem模板，请为其设置TargetType。

检查代码：

<Shell.Resources>
    <ResourceDictionary>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="White" />
            ...
        </Style>
        <Style TargetType="TabBar" BasedOn="StaticResource BaseStyle" />
        <Style TargetType="FlyoutItem" BasedOn="StaticResource BaseStyle" />
    </ResourceDictionary>
</Shell.Resources>

类似问题：https://forums.xamarin.com/discussion/162731/xamarin-forms-shell-navbar-background-and-text-color

【参考方案2】：

参考：https://forums.xamarin.com/discussion/comment/421573#Comment_421573

添加了自定义渲染器

[assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace HC.MyApp.Droid

    public class ShellCustomRenderer: ShellRenderer
    
        public ShellCustomRenderer(Context context) : base(context)  

        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        
            return new ToolbarAppearance();
        
    

    public class ToolbarAppearance : IShellToolbarAppearanceTracker
    
        public void Dispose()  

        public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
        
            toolbar.SetBackgroundColor(Android.Graphics.Color.White);
        

        public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        
            toolbar.SetBackgroundColor(Android.Graphics.Color.White);
        
    

【讨论】：

如果您已经解决了问题，请接受您的解决方案作为答案。这将对有类似问题的其他社区成员有所帮助。