MAUI应用中如何实现ContentPage标题栏等视图图标随主题变色？

核心思路 #

利用MAUI的**动态资源（DynamicResource）适配深浅主题，结合Shell内置的页面活跃状态（IsActive）**实现图标颜色自动切换，无需多色图标文件（仅需单色调图标如SVG/单色PNG）。

步骤1：定义主题适配的颜色资源 #

在App.xaml的ResourceDictionary中添加深浅主题对应的图标颜色：

<ResourceDictionary>
    <!-- 浅色主题 -->
    <Color x:Key="IconNormalLight">#666666</Color>
    <Color x:Key="IconActiveLight">#2196F3</Color>
    <!-- 深色主题 -->
    <Color x:Key="IconNormalDark">#CCCCCC</Color>
    <Color x:Key="IconActiveDark">#64B5F6</Color>
    
    <!-- 自动切换的动态资源 -->
    <DynamicResource x:Key="IconNormalColor" Key="IconNormalLight" Dark="IconNormalDark"/>
    <DynamicResource x:Key="IconActiveColor" Key="IconActiveLight" Dark="IconActiveDark"/>
</ResourceDictionary>

步骤2：通过触发器实现选中状态变色 #

无需自定义组件，直接在Shell.TitleView中使用Image+Label，结合DataTrigger绑定当前页面的活跃状态：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Pages.HomePage">
    <Shell.TitleView>
        <HorizontalStackLayout Spacing="8" VerticalOptions="Center">
            <Image Source="home_icon.svg" WidthRequest="24" HeightRequest="24">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="TintColor" Value="{DynamicResource IconNormalColor}"/>
                        <Style.Triggers>
                            <!-- 绑定当前ShellContent的活跃状态 -->
                            <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type ShellContent}}, Path=IsActive}" 
                                         Value="True">
                                <Setter Property="TintColor" Value="{DynamicResource IconActiveColor}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Label Text="首页" FontSize="18" FontAttributes="Bold">
                <Label.Style>
                    <Style TargetType="Label">
                        <Setter Property="TextColor" Value="{DynamicResource IconNormalColor}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type ShellContent}}, Path=IsActive}" 
                                         Value="True">
                                <Setter Property="TextColor" Value="{DynamicResource IconActiveColor}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Label.Style>
            </Label>
        </HorizontalStackLayout>
    </Shell.TitleView>

    <!-- 页面内容 -->
</ContentPage>

步骤3：复用样式简化代码 #

如果多个页面需要相同效果，可将样式提取到App.xaml中，避免重复代码：

<ResourceDictionary>
    <!-- 颜色资源同上 -->
    
    <Style x:Key="TitleIconStyle" TargetType="Image">
        <Setter Property="WidthRequest" Value="24"/>
        <Setter Property="HeightRequest" Value="24"/>
        <Setter Property="TintColor" Value="{DynamicResource IconNormalColor}"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type ShellContent}}, Path=IsActive}" 
                         Value="True">
                <Setter Property="TintColor" Value="{DynamicResource IconActiveColor}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="TitleTextStyle" TargetType="Label">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="FontAttributes" Value="Bold"/>
        <Setter Property="TextColor" Value="{DynamicResource IconNormalColor}"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type ShellContent}}, Path=IsActive}" 
                         Value="True">
                <Setter Property="TextColor" Value="{DynamicResource IconActiveColor}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

之后页面中直接引用样式即可：

<Shell.TitleView>
    <HorizontalStackLayout Spacing="8" VerticalOptions="Center">
        <Image Source="home_icon.svg" Style="{StaticResource TitleIconStyle}"/>
        <Label Text="首页" Style="{StaticResource TitleTextStyle}"/>
    </HorizontalStackLayout>
</Shell.TitleView>

关键说明 #

• 必须使用单色调图标（如SVG、单色PNG），TintColor才能覆盖原有颜色实现变色效果。
• DynamicResource会自动监听系统主题切换，无需手动处理主题变更事件。
• ShellContent.IsActive属性直接反映当前页面是否处于活跃状态，绑定后可自动触发颜色切换。

内容的提问来源于stack exchange，提问作者cfischy