TextBlock Glow Effect Inside Button - wpf

I have a button with it's control template set to a TextBlock. I want the text to "Glow" when the mouse is over it or it has gained focus by moving to it via the keyboard. I can't seem to get this working as I presume I'm setting the effect in the wrong place. Has anyone done this before that could share the xaml for it. Here is my style so far.
<!--Back Button-->
<Style x:Key="MoviesBackButton"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock Text="Back" Style="{DynamicResource MoviesButtonBackTextBlock}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="40" />
<Setter Property="Height"
Value="25" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="Margin"
Value="10,5,0,0" />
</Style>
<Style x:Key="MoviesButtonBackTextBlock"
TargetType="TextBlock">
<Setter Property="Foreground"
Value="{DynamicResource MoviesButtonBackTextBlockForeground}" />
<Setter Property="FontFamily"
Value="Segoe UI Light, Lucida Sans Unicode, Verdana" />
<Setter Property="FontSize"
Value="20" />
<Setter Property="TextOptions.TextHintingMode"
Value="Animated" />
</Style>
<LinearGradientBrush x:Key="MoviesButtonBackTextBlockForeground"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="LightGray"
Offset="0" />
<GradientStop Color="Gray"
Offset="1" />
</LinearGradientBrush>

Here's one solution for mouse-over glow. You can add similar event triggers for Button.GotKeyboardFocus/LostKeyboardFocus.
If I was doing this for real, I would probably create a custom control and use visual states. Search for 'Visual State Manager' for more information.
<Grid>
<Grid.Resources>
<Style x:Key="TextBoxGlow" TargetType="{x:Type Button}">
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="0"
To="1" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Content).(TextBlock.Effect).Opacity" From="1"
To="0" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<StackPanel>
<Button Style="{StaticResource TextBoxGlow}" Margin="5">
<TextBlock Text="I'm glowing" FontSize="28" Padding="10">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="8" Color="Crimson" ShadowDepth="0" Opacity="0" />
</TextBlock.Effect>
</TextBlock>
</Button>
</StackPanel>
</Grid>

Related

Button with both background image and color WPF

I have a button in my wpf app, looking like :
<Button x:Name="button" Content="" HorizontalAlignment="Left" Margin="402,10,0,0" VerticalAlignment="Top" Width="26" Height="28" BorderBrush="{x:Null}" Grid.Column="1" Foreground="White">
<Button.Background>
<ImageBrush ImageSource="cls_blk_btn.png" Stretch="None"/>
</Button.Background>
</Button>
Now as you can see the button has a background image, is it possible to have a background color keeping the image also ??
What i am trying to do is change the button's background color(keeping the image as it is) on mouse enter with this :
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Color" To="#FF484A4D" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline >
<ColorAnimation Storyboard.TargetProperty="Color" To="#FF57626C" Duration="0:0:0.1" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
The problem is, as the background is an image, i get exceptions while trying to change the color...Any help in keeping the image as it is and changing the backColor ???
THIS IS WHAT I JUST TRIED
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="resources\c_ml.bmp" Stretch="Fill"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="Resources\c_mo.bmp" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
But it gives me 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' in line 45.The lines throwing the exceptions are:
<Style TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="resources\c_ml.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
<Style.Triggers>
Any idea how to fix it ?
I FIXED MY SECOND ERROR BUT HAVE A NEW PROBLEM
The second error occured because i didn't include the pictures in my project.After including, i have a new problem. Now , on mouse over, The button becomes white, i mean it changes it's Background color instead of changing the image...What's wrong ?
Do you have to put the Image in background? If you just want to show an Image with background in the button, it will be lot easier to put the Image in Button.Content and animate the background, e.g.:
<Button x:Name="button" HorizontalAlignment="Left" Margin="402,10,0,0" VerticalAlignment="Top" Width="260" Height="280" BorderBrush="{x:Null}" Foreground="White">
<Button.Content>
<Image Source="image.png" Stretch="None" />
</Button.Content>
<Button.Background>
<SolidColorBrush Color="#FF57626C" />
</Button.Background>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF484A4D" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline >
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF57626C" Duration="0:0:0.1" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
FIXED IT MYSELF
<Button.Content>
<StackPanel>
<Image Name="image1" Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_ml.bmp" Stretch="Fill" >
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Visible" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Image Name="image2" Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_mo.bmp" Stretch="Fill" >
<Image.Style>
<Style TargetType="Image">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</Button.Content>

Changing Combobox/Table Item textcolor on Mouseover in ResourceDictionary

I am using MahAppsMetro and therefore I have a ResourceDictionary where I can change the color of the design.
Now I changed the color to blue. But I do not know how to change the textcolor of an selected item in an combobox / table.
It looks like this now:
Example: Combobox
Example: Table
So now I want to change the Textcolor to white by the ResourceDictionary..
It looks something like this yet:
<!-- re-set brushes too -->
<SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource HighlightColor}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush2" Color="{StaticResource AccentColor2}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush3" Color="{StaticResource AccentColor3}" options:Freeze="True" />
<SolidColorBrush x:Key="AccentColorBrush4" Color="{StaticResource AccentColor4}" options:Freeze="True" />
<SolidColorBrush x:Key="WindowTitleColorBrush" Color="{StaticResource AccentColor}" options:Freeze="True" />
<LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5" options:Freeze="True">
<GradientStop Color="{StaticResource HighlightColor}" Offset="0" />
<GradientStop Color="{StaticResource AccentColor3}" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="CheckmarkFill" Color="{StaticResource AccentColor}" options:Freeze="True" />
<SolidColorBrush x:Key="RightArrowFill" Color="{StaticResource AccentColor}" options:Freeze="True" />
Can you tell me what I need to add to my ResourceDictionary to have a white text on MouseOver of the items.
Hope it is clear what I want to do. Else please tell me what further information you need.
edit:
For the Combobox is it working now. But not for the DataGrid.
Here is how I added the DataGrid:
<DataGrid x:Name="mydatagrid" SelectionUnit="FullRow" HorizontalAlignment="Left" Margin="159,33,0,0" VerticalAlignment="Top" Height="204" Width="275" Background="{x:Null}" BorderBrush="Transparent" CanUserAddRows="False" GridLinesVisibility="None" BorderThickness="0" CanUserResizeRows="False">
<DataGrid.Columns>
<DataGridTextColumn Header="User" Binding="{Binding User, Mode=OneWay}" Width="100" IsReadOnly="True" CanUserResize="False" />
<DataGridTextColumn Header="Vote" Binding="{Binding Vote, Mode=OneWay}" Width="90" IsReadOnly="True" CanUserResize="False" />
<DataGridTemplateColumn Header="Status" Width="66" IsReadOnly="True" CanUserResize="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Status, Mode=OneWay}" Width="16"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Real_Username" Binding="{Binding Real_Username, Mode=OneWay}" Width="90" IsReadOnly="True" CanUserResize="False"/>
</DataGrid.Columns>
</DataGrid>
I tried to add different methods to my Application.xaml and expanded the triggers of IsMouseOver with:
<Setter Property="Controls.Foreground" Value="{DynamicResource AccentSelectedColorBrush}" />
What am I doing wrong?
it is possible, but for the MouseOver you need to override MahApps ComboBoxItem and extend it with a Trigger. The SelectedItem uses the ColorBrush: AccentSelectedColorBrush.
Here is the original MetroComboBoxItem extended with a Trigger for MouseOver
app.xaml
<Application x:Class="WpfApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="AccentSelectedColorBrush" Color="DeepPink" />
<Style TargetType="ComboBoxItem" x:Key="MetroComboBoxItem">
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
<Setter Property="Padding" Value="2" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Background" Value="{DynamicResource TransparentWhiteBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}" Margin="0,0.5">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="MouseOverRectangle">
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value=".65" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="contentPresenter">
<SplineDoubleKeyFrame KeyTime="0"
Value=".55" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="SelectedRectangle">
<EasingDoubleKeyFrame KeyTime="0:0:0.1"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard />
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="SelectedRectangle"
IsHitTestVisible="False"
Opacity="0"
Fill="{DynamicResource AccentColorBrush}" />
<Rectangle x:Name="MouseOverRectangle"
IsHitTestVisible="False"
Opacity="0"
Fill="{DynamicResource AccentColorBrush3}" />
<ContentControl Foreground="{TemplateBinding Foreground}">
<ContentPresenter x:Name="contentPresenter"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</ContentControl>
<Rectangle x:Name="FocusVisualElement"
Stroke="{DynamicResource HighlightBrush}"
StrokeThickness="1"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="{DynamicResource AccentSelectedColorBrush}" />
</Trigger>
<!-- This Trigger is new -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource AccentSelectedColorBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
For DataGrid it is easy:
if you like to style whole Line cells, OnMouseOver or IsSelected use this:
<Style TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Setter Property="Foreground" Value="Green" />
<Style.Triggers>
<!-- Full Row -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridRow}, Path=IsMouseOver}" Value="True">
<Setter Property="Foreground" Value="Red" />
<Setter Property="Opacity" Value="0.8" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridRow}, Path=IsSelected}" Value="True">
<Setter Property="Foreground" Value="DeepPink" />
<Setter Property="Opacity" Value="0.3" />
</DataTrigger>
</Style.Triggers>
</Style>
Cells only this:
<Style TargetType="DataGridCell" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Setter Property="Foreground" Value="Green" />
<Style.Triggers>
<!-- Cell only -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True">
<Setter Property="Foreground" Value="Red" />
<Setter Property="Opacity" Value="0.8" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True">
<Setter Property="Foreground" Value="DeepPink" />
<Setter Property="Opacity" Value="0.3" />
</DataTrigger>
</Style.Triggers>
</Style>
You can place the Style in your app.xaml to work for your whole application.

WPF MouseUp EventTrigger on Button doesn't set BorderBrush & BorderThickness

I have a reset button - the desired behaviour is to increase in size on mouseover and, once clicked, have a border around it.
The IsMouseOver trigger works, but I can't get the MouseUp event trigger to work (once pressed the button does not display a border).
I have tried the following:
1) Adding an event trigger to the control template triggers
2) Adding an event trigger to the style triggers
3) Adding an event trigger to the button triggers
Am I writing the event trigger incorrectly? I've added the code for the three attempts below - hoping I've just missed something obvious and is a quick fix. Thanks!
1 - Adding an event trigger to the control template triggers
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center" Source="..\Resources\Delete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
2 - Adding an event trigger to the style triggers
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="..\Resources\Delete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
3 - Adding an event trigger to the button triggers
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="..\Resources\Delete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
To animate Thickness, you have to use ThicknessAnimation
Button does not fire MouseLeftButtonUp routed event. Workaround is to use PreviewMouseLeftButtonUp event. Source
You have to bind your "Border" element properties BorderBrush and BorderThickness to your template.
For your first case:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
NOTE that MouseUp is firing only for Right mouse button up
Hope, it helps
The reason why these methods don't work is because the MouseUp event is consumed by the button, and never gets to your handler. This can be demonstrated by a right click (which isn't consumed) instead of a left click, and your above code will work (I only tested the first sample).
To solve this you can use use the PreviewMouseUp event instead. This worked for me in your first sample.

WPF: How to scroll Grid with a ScrollBar?

I know you can wrap a Grid in a ScrollViewer, and the scrolling works automatically. However, I want to make my own scrollbars around the grid. So far, I managed to sync the scrollbar with the grid when I move around the grid. However, I couldn't find properties or methods of the Grid to make it scroll when I click the scrollbar. I'm sure it's doable because SchollViewer is already doing it. Your tip is much appreciated.
UPDATE:
In fact, what I want is to create a Excel-spreadsheet like control. I created the spreadsheet using Grid layout and it seems working fine. However, I run into a problem in scrolling. Adding a ScrollViewer around the Grid will make the whole Grid scroll. However, I want to be able to freeze some rows and/or columns from scrolling. Also, using ScrollViewer, the horizontal scrollbar covers the whole bottom. But, like in Excel, I'd like to leave some space for adding some tabs. Is this possible just through restyling of the ScrollViewer?
I find a post at http://social.msdn.microsoft.com/Forums/en/wpf/thread/e495a0cb-0104-4475-8627-3b40cd617fc1 which suggests to split grid in several sub-grids to achieve freezing headers. However, it doesn't work well if you have many columns. Furthermore, this approach is not flexible enough to allow user to choose freezing area.
Styling scrollbars can be a bit tricky, but I have a style to get you started (based of Expression style), you can just remove the bits you dont need/want and change colors etc.
Scollbar style example:
<Color x:Key="MainColor">#FF595959</Color>
<Color x:Key="BlackColor">#FF000000</Color>
<Color x:Key="WhiteColor">#FFFFFFFF</Color>
<SolidColorBrush x:Key="NormalBrush" Color="{StaticResource MainColor}" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FF393939" />
<SolidColorBrush x:Key="GlyphBrush" Color="#FFD1D1D1" />
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0.5,0.971" StartPoint="0.5,0.042">
<GradientStop Color="#4C000000" Offset="0" />
<GradientStop Color="#26FFFFFF" Offset="1" />
<GradientStop Color="#4C000000" Offset="0.467" />
<GradientStop Color="#26FFFFFF" Offset="0.479" />
</LinearGradientBrush>
<Style TargetType="{x:Type RepeatButton}" BasedOn="{x:Null}">
<Setter Property="Background" Value="{DynamicResource NormalBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" Opacity="1" />
<ContentPresenter HorizontalAlignment="Center" x:Name="ContentPresenter" VerticalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Opacity="0.3" Height="Auto" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true" />
<Trigger Property="IsMouseOver" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}" x:Name="PressedOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}" x:Name="PressedOn_BeginStoryboard"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="ContentPresenter" Value="0.1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NuclearThumbStyle" TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Margin="0,0,0,0" x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch" x:Name="HoverRectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="4" Stroke="{x:Null}" Margin="4.5,-2,4.5,-2" Opacity="0.3" MinHeight="10">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource WhiteColor}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Stretch" x:Name="PressedRectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="4" Stroke="{x:Null}" Margin="4.5,-2,4.5,-2" Opacity="0.3" MinHeight="10">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource WhiteColor}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" />
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False" >
<Setter Property="Opacity" TargetName="Grid" Value="0.1"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}" x:Name="PressedOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}" x:Name="PressedOn_BeginStoryboard"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NuclearScrollRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Background="{DynamicResource NormalBrush}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18" />
<RowDefinition Height="0.00001*" />
<RowDefinition MaxHeight="18" />
</Grid.RowDefinitions>
<RepeatButton x:Name="DecreaseRepeat" Command="ScrollBar.LineUpCommand" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Grid Margin="0,0,0,0">
<Path Margin="4.742,3.997,4.946,5.327" VerticalAlignment="Stretch" Height="Auto" Fill="{DynamicResource GlyphBrush}" Stretch="Fill" Stroke="{DynamicResource GlyphBrush}" StrokeThickness="1" Data="M5.2422477,11.132184 L11.5544,11.132184 8.6412958,4.4969033 z" x:Name="DecreaseArrow" />
</Grid>
</RepeatButton>
<Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
<Track.Thumb>
<Thumb Style="{DynamicResource NuclearThumbStyle}" Background="{x:Null}" Foreground="{x:Null}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Command="ScrollBar.LineDownCommand">
<Grid>
<Path Margin="4.742,3.997,4.946,5.327" x:Name="IncreaseArrow" VerticalAlignment="Stretch" Height="Auto" Fill="{DynamicResource GlyphBrush}" Stretch="Fill" Stroke="{DynamicResource GlyphBrush}" StrokeThickness="1" Data="M5.2422477,11.132184 L11.5544,11.132184 8.6412958,4.4969033 z" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
<SkewTransform AngleX="0" AngleY="0" />
<RotateTransform Angle="180" />
<TranslateTransform X="0" Y="0" />
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="LayoutTransform" TargetName="GridRoot">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="Orientation" Value="Vertical" />
<Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat" />
<Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat" />
<Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown" />
<Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style:

Controlling animation from code behind in WPF button?

I have the following XAML style for my button :
<Style TargetType="{x:Type Button}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="BtnBorder" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}" CornerRadius="5" VerticalAlignment="Center" BorderBrush="White" BorderThickness="0" ClipToBounds="True" HorizontalAlignment="Center">
<Grid Width="{Binding ElementName=BtnBorder, Path=ActualWidth}">
<Rectangle Name="BtnRect" RadiusX="6" RadiusY="5" Opacity="0.2" Fill="White" />
<Rectangle x:Name="progressIndicator" Width="0" HorizontalAlignment="Left" RadiusX="8" RadiusY="8" Margin="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="#88FFFFFF" Offset="0.945" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="BtnCP" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BtnRect" Storyboard.TargetProperty="Opacity" From="0.25" To="0.5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BtnRect" Storyboard.TargetProperty="Opacity" From="0.5" To="0.25" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.3" />
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="progressIndicator" Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:5" AutoReverse="True" RepeatBehavior="5x" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.5,0,1.5,0" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True" />
<Condition Property="IsPressed" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.3" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can i control the animation of the Rectangle property of my button through code behind upon clicking the button.
The Rectangle named "progressIndicator" is to grow in width through animation when the user clicks the button.
Currently animation starts in Xaml. Why do you want to it in code-behind?

Resources