Style trigger property is not changing element's width in XAML

Question

i am trying to trigger IsMouseOver property of an element and chnging the width in XAML and it's working but the problem is if i define the default or static width property in element's tag then this doesn't work. Why ?
Working code

<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>

but if now i add width="40" property then this trigger property wont work on first ColorZone Element Name="colorZone1" it won't work .

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

Answer 1

You need to set the default width in the style.

        <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>