样式触发器属性未更改XAML中元素的宽度

Question

我试图触发元素的IsMouseOver属性并更改XAML中的宽度，它正在工作，但是问题是，如果我在元素的标记中定义了默认或静态width属性，则此方法不起作用。 为什么呢
工作代码

<UserControl x:Class="IntelliVentory.UserControls.SideMenuBarControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:local="clr-namespace:IntelliVentory.UserControls"
         mc:Ignorable="d"
         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
         xmlns:userControls="clr-namespace:IntelliVentory.UserControls"
         TextElement.Foreground="{DynamicResource MaterialDesignBody}"
         Background="{DynamicResource MaterialDesignPaper}"
         TextElement.FontWeight="Medium"
         TextElement.FontSize="14"
         FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <ItemsControl Margin="50">
        <ItemsControl.Resources>
            <Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Width" Value="300" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.Resources>
        <materialDesign:ColorZone Name="ColorZone1" Style="{StaticResource ScaleStyle}" Height="50"
                                  Mode="PrimaryDark" Padding="16" CornerRadius="3"
                                  materialDesign:ShadowAssist.ShadowDepth="Depth3" />
        <materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone2" Style="{StaticResource ScaleStyle}"
                                  Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
                                  materialDesign:ShadowAssist.ShadowDepth="Depth3" />
        <materialDesign:ColorZone Margin="0 5 0 0" Name="ColorZone3" Style="{StaticResource ScaleStyle}"
                                  Height="50" Mode="PrimaryDark" Padding="16" CornerRadius="3"
                                  materialDesign:ShadowAssist.ShadowDepth="Depth3" />

    </ItemsControl>
</Grid>

但是，如果现在我添加width="40"属性，那么此触发器属性将无法在第一个ColorZone元素Name="colorZone1" ，它将无法正常工作。

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

Answer 1

您需要在样式中设置默认宽度。

        <Style x:Key="ScaleStyle" TargetType="materialDesign:ColorZone">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Width" Value="300" />
                </Trigger>
            </Style.Triggers>
             <Style.Setters>
                <Setter Property="Width" Value="40"/>
             </Style.Setters>
        </Style>