自定义图标模拟FontIcon禁用灰显行为方案咨询

针对你提到的「带FontIcon的AppBarButton禁用时自动灰显，但自定义ImageIcon无此效果」的问题，结合你已准备两套图标的前提，以下是几种最优实现方案：

方案一：利用VisualState原生状态触发（推荐） #

直接借助AppBarButton自带的Disabled视觉状态，切换ImageIcon的图标源，和FontIcon的灰显逻辑完全对齐，属于UWP原生实现方式：

<AppBarButton x:Name="MyCustomIconButton" IsEnabled="False">
    <AppBarButton.Icon>
        <ImageIcon x:Name="CustomIconImg" Source="{StaticResource CustomIcon}"/>
    </AppBarButton.Icon>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="Disabled">
                <VisualState.Setters>
                    <!-- 切换到禁用版图标 -->
                    <Setter Target="CustomIconImg.Source" Value="{StaticResource CustomIconDisabled}"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</AppBarButton>

优势：无需额外代码，完全贴合控件原生状态逻辑，兼容性好。

方案二：绑定转换器实现逻辑复用 #

如果多个按钮都需要这套切换逻辑，可以写一个值转换器，通过绑定IsEnabled属性自动切换图标：

第一步：实现转换器类 #

public class EnabledToIconSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool isEnabled = (bool)value;
        // 根据启用状态返回对应图标资源
        return isEnabled 
            ? Application.Current.Resources["CustomIcon"] 
            : Application.Current.Resources["CustomIconDisabled"];
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

第二步：XAML中使用转换器 #

<!-- 在页面/资源字典中声明转换器 -->
<Page.Resources>
    <local:EnabledToIconSourceConverter x:Key="EnabledToIconSourceConverter"/>
</Page.Resources>

<!-- 绑定AppBarButton的IsEnabled属性 -->
<AppBarButton IsEnabled="False">
    <AppBarButton.Icon>
        <ImageIcon Source="{Binding IsEnabled, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource EnabledToIconSourceConverter}}"/>
    </AppBarButton.Icon>
</AppBarButton>

优势：逻辑可复用，适合批量使用自定义图标的场景。

方案三：重写全局样式（批量场景） #

如果你的项目中有大量带自定义图标的AppBarButton，重写控件样式可以统一管理禁用状态的图标切换：

<Style TargetType="AppBarButton" x:Key="CustomIconAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <!-- 保留原有AppBarButton模板的核心结构，仅修改Icon部分的状态 -->
                <Grid x:Name="Root" Width="48" Height="48">
                    <!-- 省略原有模板中其他元素代码 -->
                    <ContentPresenter x:Name="IconPresenter"
                                      Content="{TemplateBinding Icon}"
                                      Foreground="{TemplateBinding Foreground}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="IconPresenter.(ImageIcon.Source)" Value="{StaticResource CustomIconDisabled}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>
                    <!-- 省略原有模板中其他元素代码 -->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用时直接引用样式：

<AppBarButton Style="{StaticResource CustomIconAppBarButtonStyle}" Icon="{StaticResource CustomIcon}" IsEnabled="False"/>

优势：全局统一配置，无需在每个按钮上重复写状态逻辑。

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