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

Question

i am trying to trigger IsMouseOverproperty 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" />

Because of dependency property value precedence, the attribute `Width="40"` overrides anything the style does. If you want to set a default width, set it in another style setter, outside the trigger. — 15ee8f99-57ff-4f92-890c-b56153, May 15 '18 at 15:40
@EdPlunkett ok i understand this now ..but can you please show me how to resolve this ! shall be thankful :) — Hammas, May 15 '18 at 15:47

score 2 · Accepted Answer · answered May 15 '18 at 15:49

2

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>

answered May 15 '18 at 15:49

Brett

56
1
3

thanks a lot ! just one more thing . this trigger property is applying to all elements inside ITEM CONTROL but dont want that so i can extract other elements on which i dont want this to be applied ! but is there another way ? – Hammas May 15 '18 at 15:54
so that .. i can apply this trigger property on any element of ColorZone i want ?? – Hammas May 15 '18 at 15:55
can i make this Style available globally so that i can use it for any colorZone element i want ! in other words .. – Hammas May 15 '18 at 16:01
Here is your answer on how to apply a style globally. https://stackoverflow.com/questions/3569974/wpf-global-style – Brett May 15 '18 at 16:10

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

1 Answers1