We Keep Coding

C# implementation Button Animation shows weird behaviour [duplicate]

I am currently working on a C# WPF project and I am trying to make my custom style buttons.
What I want to have to happen, is when the mouse hovers over the button, it slightly increases in size as an animation, then when the mouse leaves the button, the animation decreases the size of the button to the original size.
Below is my ControlTemplate that I've created for my button. No errors are thrown but nothing happens either.
<Application.Resources>
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="ButtonGrid">
<Border x:Name="border" CornerRadius="8" BorderBrush="White" BorderThickness="2">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="Bold"></ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="Blue"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="0.95" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="0.95" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
To="1.08" Duration="0:0:0.05" />
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"
To="1.08" Duration="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="ButtonGrid" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
Thanks for any help you can provide

You have couple of problems with your code:
1) You are trying to animate Rectangle.RenderTransform properties and there is no Rectangle in your ControlTemplate. RenderTransform is a dependency property on UIElement. So, you should remove Rectangle
2) Also, There is no RenderTransform applied to your Grid.
3) After fixing above two items, if you try you get continuous animation (Button expanding/shrinking in size), to fix this set Background property Grid to Transparent, so that Grid participates in hit testing and respond to Mouse overs.
Update your style XAML to the following and it will work:
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="ButtonGrid" Background="Transparent">
<Border
x:Name="border"
BorderBrush="White"
BorderThickness="2"
CornerRadius="8">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold">
</ContentPresenter>
</Border>
<Grid.RenderTransform>
<ScaleTransform />
</Grid.RenderTransform>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="0.95"/>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="0.95"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="1.08"/>
<DoubleAnimation
Duration="0:0:0.05"
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="1.08"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonGrid" Property="Opacity" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Another thing, instead of using Trigger.EnterActions and Trigger.ExitActions, you could use VisualStateManager to achieve the same result. Using VisualStateManager is much more easier than Trigger.EnterActions and ExitActions.
Below is the code with VisualStateManager used to do the animations:
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="ButtonGrid" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.05" To="MouseOver"/>
<VisualTransition GeneratedDuration="0:0:0.05" To="Normal"/>
</VisualStateGroup.Transitions>
<VisualStateGroup.States>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"
To="0.95"/>
<DoubleAnimation
Storyboard.TargetName="ButtonGrid"
Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"
To="0.95"/>
</Storyboard>
</VisualState>
</VisualStateGroup.States>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
x:Name="border"
BorderBrush="White"
BorderThickness="2"
CornerRadius="8">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.FontWeight="Bold">
</ContentPresenter>
</Border>
<Grid.RenderTransform>
<ScaleTransform/>
</Grid.RenderTransform>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Blue"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonGrid" Property="Opacity" Value="0.25"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF Material Design Button Hover

I am using the Material Design for my WPF Project and I now want to set a background color for the hover state of a button.
As seen in the code, the implementation is made with a ProgressBar, Ripple and Border.
If I try to overwrite the style, i end up having a invisible Button:
<Style TargetType="{x:Type Button}"
BasedOn="{StaticResource MaterialDesignRaisedButton}">
<Setter Property="Background"
Value="{StaticResource MainColorSolidBrush}" />
<Setter Property="Foreground"
Value="{StaticResource TextColorLightSolidBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Triggers>
<!--Hover-->
<Trigger Property="IsMouseOver"
Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="{StaticResource SubColor}"
FillBehavior="HoldEnd"
Duration="{StaticResource HoverStartDuration}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="{StaticResource MainColor}"
FillBehavior="Stop"
Duration="{StaticResource HoverEndDuration}" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So do I have to reimplement the original style from the package and add a Hover?

You cannot "override" only a part of a template. It has to be defined as a whole which means that you should copy the MaterialDesignRaisedButton style from GitHub and edit it as per your requirements, by for example adding additional setters to the IsMouseOver trigger.

The IsFocused property does not work for ListView in WPF? How can i change the border color of ListView when i press tab or click on the ListView?

I am designing a ListView and I want to change its border color when it is focused, IsFocused property dosen't seem to work for ListView. Is there any property similar to IsFocused for Listview?
<Style x:Key="{x:Type ListView}" TargetType="ListView">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource EnabledListViewBorder}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Border"
Background="Transparent"
Padding="{TemplateBinding Padding}"
BorderBrush="{StaticResource EnabledListViewBorder}"
BorderThickness="1">
<ScrollViewer Style="{DynamicResource ListViewColumnHeaderScrollViewer}">
<ItemsPresenter />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
I have updated the question with my Sourcecode with the solution provided but the Border Color isn't changing. What am i missing here.

You can use Style.Triggers to handle GotFocus and LostFocus events.
<ListView.Style>
<Style TargetType="ListView">
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
Update:
If you have rewritten the ControlTemplate, then delete Style.Triggers part and move EventTriggers from it to the ControlTemplate.Triggers. Additionally you have to set Storyboard.TargetName="Border".
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1" Storyboard.TargetName="Border" >
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

For ListBox IsFocused not working because focus goes to ItemsPresenter that contains ListBoxItems. So focus go to ItemsPresenter that is inside the ListBox. I got workaround that you subscribe event MouseDown and inside it do Focus for ListView, then the trigger starts working.
Let me know if it works for you

'Foreground' property does not point to a DependencyObject in path '(Foreground).(0)'

I have a WPF canvas project where I drag and drop objects on the canvas from a toolbox. Based upon certain data, some of those objects should flash or blink. I get an unhandled exception :Cannot animate '(Foreground).(0)' on an immutable object instance.. Following is my code. Somebody suggested using (Foreground).(SolidColorBrush.Color) and I changed that in my markup but it doesn't seem to fix it.
<!-- DataTemplate for DesignerCanvas look and feel -->
<DataTemplate DataType="{x:Type viewModels:SingleValueControlViewModel}">
<Grid>
<Label Name="label" Content="{Binding TagValue}" IsHitTestVisible="False" Height="{Binding ItemHeight}" Width="{Binding ItemWidth}"
Background="{Binding BackColor}"
Foreground="{Binding ForeColor}"
BorderBrush="{Binding BorderColor}"
BorderThickness="{Binding StyleProperties.BorderWidth}"
FontFamily="{Binding StyleProperties.Font.FontFamily}"
FontSize = "{Binding StyleProperties.Font.Size}"
FontStyle="{Binding StyleProperties.Font.Style}"
HorizontalContentAlignment="{Binding TextAlign}" >
<Label.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding StyleProperties.FlashEnable}" Value="true">
<Setter Property="Label.Background" Value="Black"></Setter>
<Setter Property="Label.Foreground" Value="Red"></Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
Duration="00:00:00:01"
From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Grid>
</DataTemplate>

/* Final answer after examining user's code
*/
Add this to your DiagramControl.xaml
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Opacity" Value="1"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To=" 0.1" Duration="00:00:0.3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
/* Fresh update as user still can't run his animation and reports error said in comment
*/
You must be binding your Background, Foreground properties, and remember Brush objects are immutable. There is a workaround as described in following msdn link :
immutable instance animation error
debugging animations
/* New answer posted after user updated his question with present XAML code */
I have used your code as it is like below with one addition of TargetType="Label" and it is working perfectly. I used my own StyleProperties.FlashEnable binding for your DataTrigger to work.
This is one side. Another side : You are doing all this dynamically as you are dragging items to Canvas. For this you need to apply your style/triggers in code.
<Grid>
<Label Content="Hi ! I am added dynamically" TextBlock.FontSize="45">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding StyleProperties.FlashEnable, Mode=OneWay}" Value="true">
<Setter Property="Label.Background" Value="Black"></Setter>
<Setter Property="Label.Foreground" Value="Red"></Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
Duration="00:00:00:01"
From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
/* Old answer posted before user updated his question */
To show your object flashing, you must be changing their Foreground property. And this Foreground color must be coming from some variable. For binding you have to use a dependency property, or your class containing your property/variable must implement INotifyPropertyChanged, so that your property raise PropertyChanged event.
You should also provide some initial value to Foreground if you are using Animation.
You also might be using DynamicResource instead of StaticResource.
More can be said if you post some XAML.

This works for me:
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding FlashEnable}" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="Red"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
Duration="0:0:1" From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
You can also explicitly set a SolidColorBrush in the style setter of the Foreground property:
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding FlashEnable}" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Red"/>
</Setter.Value>
</Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
Duration="0:0:1" From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>

Silverlight Add an animation to an image in the style.xaml

I got a button, that display an image.
I want to add, to this image, an animation, so that it will blink (so the user can't ignore it).
So I tried this in the style.xaml :
<Style x:Key="WarningIcon" TargetType="Button">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="30"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid>
<Image Source="../images/im_warning.png" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Visibility">
<Setter.Value>
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(Button.Visibility)"
Duration="5:0:0.5"
RepeatBehavior="Forever"/>
</Storyboard>
</Setter.Value>
</Setter>
</Style>
But it doesn't work.
What kind of animation, and setter should I add to make the image blinking, so basically, appear and desappear?
I do not find any example that match with my research.
Thank you.

You should start animation after defining it. Another thing is that probably Opacity will look better:
<Style
...
<Style.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Image.Opacity)"
BeginTime="0:0:0" Duration="0:0:0.5"
From="1.0" To="0.0" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
...
</Style>