WinUI 3按钮样式报错：Style类型中未找到可附加属性'Triggers'

错误原因 #

WinUI 3（基于UWP）的Style类不支持WPF中的Style.Triggers属性，这是两者XAML特性的差异，直接使用会抛出The attachable property 'Triggers' was not found in type 'Style'错误。

可行解决方案 #

方案1：使用视觉状态（VisualStateManager） #

重新定义AppBarButton的ControlTemplate，通过VisualState绑定MediaPlayer的IsMuted状态来切换背景：

<Style TargetType="AppBarButton" x:Key="VolumeButtonStyle">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                    <!-- 保留AppBarButton默认模板的核心元素 -->
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <FontIcon Glyph="{TemplateBinding Icon}" Width="20" Height="20"/>
                        <TextBlock Text="{TemplateBinding Label}" Margin="0,4,0,0"/>
                    </StackPanel>
                    
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="MuteStates">
                            <VisualState x:Name="Unmuted"/>
                            <VisualState x:Name="Muted">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource SystemAccentColor}"/>
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

之后在代码后台监听状态变化，切换视觉状态：

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    ChannelMediaPlayer.IsMutedChanged += (s, args) =>
    {
        VisualStateManager.GoToState(VolumeButton, ChannelMediaPlayer.IsMuted ? "Muted" : "Unmuted", true);
    };
}

方案2：使用行为库（DataTriggerBehavior） #

通过Microsoft.Xaml.Behaviors.WinUI.Managed NuGet包实现类似Trigger的逻辑：

1. 安装NuGet包：Microsoft.Xaml.Behaviors.WinUI.Managed
2. 在XAML中添加命名空间：

xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"

3. 直接在按钮上添加行为触发器：

<AppBarButton x:Name="VolumeButton" Icon="Volume" Label="Ένταση" Click="VolumeButton_Click" Background="Transparent">
    <interactivity:Interaction.Behaviors>
        <core:DataTriggerBehavior Binding="{Binding IsMuted, ElementName=ChannelMediaPlayer}" Value="True">
            <core:ChangePropertyAction TargetObject="{Binding ElementName=VolumeButton}" PropertyName="Background" Value="{ThemeResource SystemAccentColor}"/>
        </core:DataTriggerBehavior>
        <core:DataTriggerBehavior Binding="{Binding IsMuted, ElementName=ChannelMediaPlayer}" Value="False">
            <core:ChangePropertyAction TargetObject="{Binding ElementName=VolumeButton}" PropertyName="Background" Value="Transparent"/>
        </core:DataTriggerBehavior>
    </interactivity:Interaction.Behaviors>
</AppBarButton>

方案3：绑定+值转换器 #

通过IValueConverter将IsMuted状态转换为对应的背景色：

1. 创建转换器类：

using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Media;
using Windows.UI;

public class MuteToBackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool isMuted && isMuted)
        {
            return Application.Current.Resources["SystemAccentColor"] as SolidColorBrush;
        }
        return new SolidColorBrush(Colors.Transparent);
    }

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

2. 在XAML资源中声明转换器：

<Page.Resources>
    <local:MuteToBackgroundConverter x:Key="MuteToBackgroundConverter"/>
    <Style TargetType="AppBarButton" x:Key="VolumeButtonStyle">
        <Setter Property="Background" Value="{Binding IsMuted, ElementName=ChannelMediaPlayer, Converter={StaticResource MuteToBackgroundConverter}}"/>
    </Style>
</Page.Resources>

3. 应用样式到按钮：

<AppBarButton x:Name="VolumeButton" Style="{StaticResource VolumeButtonStyle}" Icon="Volume" Label="Ένταση" Click="VolumeButton_Click"/>

内容的提问来源于stack exchange，提问作者Κωνσταντίνος Κ.