WPF - ToggleButton Template Trigger stop firing after first call - wpf

I have custom template for ToggleButton with triggers targeted for providing clear visual difference between Checked and Unchecked state.
Main concept:
Trigger 1. When Togglebuton is Unchecked and MouseOver = false: FontSize should be 13, FontWeight - Normal.
Trigger 2. When Togglebuton is Unchecked and MouseOver = true: FontSize should be 14, FontWeight - Normal.
Trigger 3. When Togglebuton is Checked: FontSize should be 15, FontWeight - Bold.
Everything is working fine, but after first toggleButton check/uncheck sequence
trigger 2 stops to fire and ToggleButton does not change appearence on MouseOver = true any more.
Here is my actual XAML.
<Style TargetType="{x:Type ToggleButton}" x:Key="DefaultToggleButtonStyle">
<Style.Resources>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="true"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeThickness="1"
StrokeDashArray="1 2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="Background" Value="{DynamicResource ButtonColor}" />
<Setter Property="Foreground" Value="{DynamicResource EditAreaColor}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Style TargetType="Border" x:Key="MainBorderStyle">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="CornerRadius" Value="1" />
<Setter Property="UseLayoutRounding" Value="True" />
</Style>
</ControlTemplate.Resources>
<Grid>
<Border Background="Black" Opacity="0.5">
<Border.Effect>
<BlurEffect Radius="7" />
</Border.Effect>
</Border>
<Border x:Name="upperSurfaceBorder" Background="{TemplateBinding Background}" Style="{StaticResource MainBorderStyle}">
<Border x:Name="mouserOverHl" Background="Transparent"
Style="{StaticResource MainBorderStyle}"
BorderThickness="0.5" BorderBrush="{StaticResource MainNormal}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
<Border Background="Transparent" Style="{StaticResource MainBorderStyle}" x:Name="disabledOverlay" />
</Grid>
<ControlTemplate.Triggers>
<!--MouseOver-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="14" Duration="0:0:.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="13" Duration="0:0:.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!--IsChecked-->
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Trigger.Setters>
<Setter Property="Background" Value="{StaticResource MainVeryDark}"/>
</Trigger.Setters>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="(ToggleButton.Background).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:0.1" To="#002f67">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="15" Duration="0:0:0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Normal</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="13" Duration="0:0:0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--Pressed-->
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetName="upperSurfaceBorder" TargetProperty="Margin">
<ThicknessAnimation Duration="0:0:0.1" To="2 2 -2 -2">
<ThicknessAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetName="upperSurfaceBorder"
TargetProperty="Margin">
<ThicknessAnimation Duration="0:0:0.1"
To="0 0 0 0">
<ThicknessAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--Disabled-->
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="disabledOverlay"
Storyboard.TargetProperty="Background.Color" To="#55FFFFFF">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Opacity" To="0.6" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" To="Transparent" Storyboard.TargetName="disabledOverlay" Storyboard.TargetProperty="Background.Color">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Opacity" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Setter Property="Visibility" Value="Visible" TargetName="disabledOverlay" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any suggestions what's wrong?
Thanks in advance!

Your Main problem is in Trigger 3. I think EnterActions and ExitActions have not feeling good with IsChecked Property. I don't know why.
you must take another way to writing this trigger.

Well, as RezaNoei suggested, the problem was in ExitActions of Trigger 3. I solved this issue by removing of "To" property of font's size animation. This decision was inspired by this topic.

Related

Custom Hover and Select RadioButton in RadioGroup WPF XAML

I'm trying to create a hover and select effect on a radio button within a group So far it works but if I hover on a button that has once been selected the hover effect doesn't work> Hovering on a button that hasn't previously been selected works and also the isChecked state seems to work. Also how do I deselect a radio button on click so that no button is selected within the group. Thanks for any help or pointers.
<Color x:Key="Hover" R="135" G="0" B="0" A="255" />
<Color x:Key="Default" R="40" G="40" B="40" A="255" />
<Color x:Key="Selected" R="0" G="255" B="0" A="255" />
<!-- // CustomRadioButton // -->
<Style TargetType="{x:Type RadioButton}" x:Key="CustomRadioButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border x:Name="tabRadBtn" Margin="10"
Width="60" BorderThickness="0">
<TextBlock Background="Transparent" x:Name="ToggleData"
Text="{TemplateBinding Property=Content}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="ToggleColor" Color="{StaticResource Default}"/>
</TextBlock.Foreground>
</TextBlock>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True"/>
<Condition Property="IsChecked" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="EnterRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Hover}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="EnterRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Selected}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
Set ExitActions ColorAnimation Property - FillBehavior="Stop" -
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
...
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>

WPF Animate different control after first animation is over

I'm animating text in StatusBarItem (from right to left and then Opacity two times).
When this animation finishes It would like to show a button which is in a different StatusBarItem and is set to Visibility.Hidden by default.
How can I do this in XAML?
My XAML - error is "A storyboard tree in a Style cannot specify a TargetName":
<StatusBarItem x:Name="Stat_info" DockPanel.Dock="Right" FontStyle="Italic" Height="23" Foreground="#FFB41414" FontWeight="Bold" Visibility="Hidden">
<StatusBarItem.Style>
<Style TargetType="{x:Type StatusBarItem}">
<Style.Resources>
<Storyboard x:Key="flashAnimate">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="T" KeyTime="0:0:0.3" />
<DiscreteStringKeyFrame Value="Te" KeyTime="0:0:0.6" />
<DiscreteStringKeyFrame Value="Tes" KeyTime="0:0:0.9" />
<DiscreteStringKeyFrame Value="Test" KeyTime="0:0:1.2" />
</StringAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" BeginTime="0:0:1.4" Duration="0:0:2.0" RepeatBehavior="0:0:5.4" />
<!--This is a button that should be set to visible-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Btn_info" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:5.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName= Stat_info, Path= IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<DataTrigger.EnterActions>
<BeginStoryboard Name="flash" Storyboard="{StaticResource flashAnimate}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="flash"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</StatusBarItem.Style>
</StatusBarItem>
EDIT:
I've tried provided answer from link, but I can't get It to work. I tried with & without TargetName and just for first animation. Result is no error & no animation :
<Window.Resources>
<ControlTemplate x:Key="StatusBarItemControlTemplate1" TargetType="{x:Type StatusBarItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="myAnimation" Storyboard.TargetName="Stat_info">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="T" KeyTime="0:0:0.3" />
<DiscreteStringKeyFrame Value="Te" KeyTime="0:0:0.6" />
<DiscreteStringKeyFrame Value="Tes" KeyTime="0:0:0.9" />
<DiscreteStringKeyFrame Value="Test" KeyTime="0:0:1.2" />
</StringAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Stat_info" From="1" To="0" AutoReverse="True" BeginTime="0:0:1.4" Duration="0:0:2.0" RepeatBehavior="0:0:5.4" />
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName= Stat_info, Path= IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="beginAnimation" Storyboard="{StaticResource myAnimation}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="beginAnimation" />
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
<!-- Content to be animated goes here -->
</ControlTemplate>
</Window.Resources>
<StatusBarItem x:Name="Stat_info" Visibility="Hidden" Template="{StaticResource StatusBarItemControlTemplate1}" >

WPF Button Style with textBlock contentTemplate, how to change textblock foreground colour storyboard

I have the following button style. My question, how can I change the textblock's text colour when the button is not enabled? I tried setting "ButtonTextBlock" value through the storyboard but it cannot seem to access it. Thanks.
<Style TargetType="{x:Type Button}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox>
<!-- TODO change this textblocks colour depending on IsEnabled -->
<TextBlock x:Name="ButtonTextBlock" HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="0,2,0,2">
<ContentPresenter Content="{TemplateBinding Content}" >
</ContentPresenter>
</TextBlock>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"></Setter>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
<GradientStop x:Name="BackgroundGradientStop1" Offset="0" Color="{StaticResource AlbumScrollButtonNormal1}" />
<GradientStop x:Name="BackgroundGradientStop2" Offset="1" Color="{StaticResource AlbumScrollButtonNormal2}" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<!-- Button Disabled -->
<Trigger Property="IsEnabled" Value="False">
<!-- Disabled -->
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="ButtonDisabled">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonDisabled1}"
Duration="0" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonDisabled2}"
Duration="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<!-- Enabled -->
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ButtonEnabled">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonNormal1}"
Duration="0" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonNormal2}"
Duration="0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- Mouse Over and Mouse leave -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<!-- Mouse Over -->
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="MouseOverAnimation">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonMouseOver1}"
Duration="0:0:0:0.1" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonMouseOver2}"
Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<!-- Mouse Leave -->
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="MouseLeaveAnimation" FillBehavior="Stop">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonNormal1}"
Duration="0:0:0:0.1" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonNormal2}"
Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!-- Mouse Press -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True" />
<Condition Property="IsPressed" Value="True" />
</MultiTrigger.Conditions>
<!-- Mouse Down -->
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="MouseDownAnimation" >
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonPressed1}"
Duration="0:0:0:0.1" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonPressed2}"
Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<!-- Mouse Up -->
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="MouseUpAnimation" FillBehavior="Stop">
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop1"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonMouseOver1}"
Duration="0:0:0:0.1" />
<ColorAnimation Storyboard.TargetName="BackgroundGradientStop2"
Storyboard.TargetProperty="Color"
To="{StaticResource AlbumScrollButtonMouseOver2}"
Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can animate Foreground.Color of the Button when IsEnabled=False. Also there is no need for ContentTemplate in your Style. You can move ViewBox to ControlTemplate and remove ContentTemplate
<ControlTemplate TargetType="{x:Type Button}">
<Border ...>
<Viewbox>
<ContentPresenter ... />
</Viewbox>
</Border>
<ControlTemplate.Triggers>
<!-- Button Disabled -->
<Trigger Property="IsEnabled" Value="False">
<!-- Disabled -->
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="ButtonDisabled">
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="Green" Duration="0:0:0.1"/>
</Storyboard>
<!--other animations-->
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<!--other triggers-->
</ControlTemplate.Triggers>
</ControlTemplate>

ListBoxItem in WPF - scale animation when selected

I have a ListBox with customized item's style. I want the item to grow a bit when selected, and go back to its original size when deselected. I've tried several solutions but none seemed to work. I think the problem lies in the proper setting of Storyboard.TargetProperty.
My current XAML looks like this:
...
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)" To="1.2" Duration="0:0:.3" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
...
My final code (with answers applied):
...
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.1" Duration="0:0:.1" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.1" Duration="0:0:.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.0" Duration="0:0:.1" />
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.0" Duration="0:0:.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
...
Try using following code:
...
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="LayoutTransform">
<Setter.Value>
<ScaleTransform x:Name="scaleTransform" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX" To="1.2" Duration="0:0:.3" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
...

DataGridCheckBoxColumn not Working in read only mode if Styled in WPF

I have a DatagridCheckBoxColumn is ReadOnly="true" but if i style the CheckBox using the Style
<WPFToolkit:DataGridCheckBoxColumn.ElementStyle>
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {x:Type CheckBox}}"></Style>
</WPFToolkit:DataGridCheckBoxColumn.ElementStyle>
Where CheckBox Default style is
<Style TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Foreground" Value="{StaticResource OutsideFontColor}" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Padding" Value="4,1,0,0" />
<Setter Property="Template" Value="{DynamicResource CheckBoxTemplate}" />
</Style>
<ControlTemplate x:Key="CheckBoxTemplate"
TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<Storyboard x:Key="PressedOn">
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#FFF28A27" />
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#FFF4D9BE" />
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="1" />
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BackgroundFill"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="PressedOff">
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
To="#FFFDDA81" />
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
To="#FFFCE7AF" />
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxOver"
Storyboard.TargetProperty="Opacity"
To="0" />
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BackgroundFill"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<Storyboard x:Key="DisabledOn">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="DisabledVisualElement"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="BoxPress"
Storyboard.TargetProperty="Opacity"
To="1" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="BoxPress"
Storyboard.TargetProperty="Opacity"
To="0" />
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.4000000"
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOn">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="IndeterminateIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="IndeterminateOff">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="IndeterminateIcon"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00.1000000"
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusedVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusedVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid>
<Rectangle x:Name="Background"
Width="13"
Height="13"
Margin="1"
Fill="{DynamicResource CheckBoxBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BoxFill"
Width="9"
Height="9"
Fill="{DynamicResource CheckBoxInnerBoxBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxInnerBoxBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BackgroundFill"
Width="13"
Height="13"
Margin="1"
Fill="{DynamicResource CheckBoxBackgroundFillBrush}"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="#FF5577A3"
StrokeThickness="1" />
<Rectangle x:Name="BoxOver"
Width="9"
Height="9"
Margin="3"
Fill="{DynamicResource CheckBoxMouseOverBrush}"
Opacity="0"
RadiusX="0"
RadiusY="0"
StrokeThickness="1">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0.886,0.808" EndPoint="0.055,0.119">
<GradientStop Color="#FFFCE7AF" />
<GradientStop Offset="1" Color="#FFFDDA81" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="BoxPress"
Width="9"
Height="9"
Margin="3"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource CheckBoxPressBorderBrush}"
StrokeThickness="1" />
<Rectangle x:Name="BoxGradient"
Width="7"
Height="7"
Fill="{DynamicResource CheckBoxInnerBoxGradientBrush}"
RadiusX="0"
RadiusY="0"
StrokeThickness="1" />
<Rectangle x:Name="IndeterminateIcon"
Width="5"
Height="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource GlyphBrush}"
Visibility="Collapsed" />
<Path x:Name="CheckIcon"
Width="7"
Height="9"
Margin="0,3.333,3.833,0"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Data="M103.78572,598.96112 L105.09846,597.5661 L107.00806,600.16229 C107.00806,600.16229 109.91004,592.74463 109.91004,592.74463 C109.91004,592.74463 111.74678,593.79761 111.74678,593.79761 C111.74678,593.79761 107.88566,602.75848 107.88566,602.75848 L106.60118,602.75848 z"
Fill="{DynamicResource GlyphBrush}"
Stretch="Fill"
Visibility="Collapsed" />
<Rectangle x:Name="FocusedVisualElement"
Opacity="0"
RadiusX="0"
RadiusY="0"
Stroke="{DynamicResource FocusBrush}"
StrokeThickness="1" />
<Rectangle x:Name="DisabledVisualElement"
Margin="1"
Fill="{DynamicResource DisabledBackgroundBrush}"
RadiusX="0"
RadiusY="0"
Visibility="Collapsed" />
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter x:Name="contentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="FocusedOff_BeginStoryboard"
Storyboard="{StaticResource FocusedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="FocusedOn_BeginStoryboard"
Storyboard="{StaticResource FocusedOn}" />
</Trigger.EnterActions>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="CheckedOff_BeginStoryboard"
Storyboard="{StaticResource CheckedOff}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard"
Storyboard="{StaticResource CheckedOn}" />
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="{x:Null}" />
<Condition Property="IsThreeState" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource IndeterminateOn}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource IndeterminateOff}" />
</MultiTrigger.ExitActions>
<Setter TargetName="CheckIcon" Property="Opacity" Value="0" />
</MultiTrigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard2"
Storyboard="{StaticResource CheckedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard1"
Storyboard="{StaticResource CheckedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource DisabledOn}" />
</Trigger.EnterActions>
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="CheckBoxFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="15,0,0,0"
Stroke="#60000000"
StrokeDashArray="1 2"
StrokeThickness="1" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
then the CheckBox is no longer readonly... you can check or uncheck it
I dont know is it a bug or what....
Any help in this regrad would be greatful
I am guessing that since you're overwritting the template, the IsReadOnly property isn't getting applied.
Try setting IsReadOnly="{TemplateBinding IsReadOnly}" in your Control Template

Resources