XAML中Style触发器无法修改已设静态Width属性的元素宽度

这个问题其实是WPF属性值优先级在搞鬼！当你直接在ColorZone1标签里写Width="40"时，这个值属于本地值，而WPF里本地值的优先级比样式触发器中的Setter要高得多——简单来说，WPF属性值的优先级从高到低大致是：本地值 > 样式触发器Setter > 样式中的Setter > 继承值 > 默认值。

你直接在元素上设置的Width属于最高优先级的本地值，所以哪怕IsMouseOver触发器触发了，它的Setter也没法覆盖你直接写在元素标签上的Width值，自然就看不到宽度变化的效果了。

解决方案 #

要让触发器正常生效，你需要把默认Width放到Style的Setter中，而不是直接写在元素标签上。这样默认值属于样式Setter，触发器的Setter优先级比它高，就能正常覆盖了。

修改后的Style代码：

<Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
    <Setter Property="Width" Value="40"/> <!-- 将默认Width定义在这里 -->
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Width" Value="300" />
        </Trigger>
    </Style.Triggers>
</Style>

对应的元素标签去掉本地Width属性：

<materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3" materialDesign:ShadowAssist.ShadowDepth="Depth3" />

这样当鼠标悬停在ColorZone1上时，触发器的Setter就会覆盖Style里的默认Width，宽度就会正常变成300啦。

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