I have to create a button with an image and when I pass the cursor on it, the account icon has to change color, but I don't know how to do it, because for now when I pass on the button it changes the entire background.
Image without cursor
Image with cursor
There's my button's code:
<Style TargetType="{x:Type Button}" x:Key="TestAccountButton" BasedOn="{StaticResource Hoverless }" >
<Setter Property="WindowChrome.IsHitTestVisibleInChrome" Value="True"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<!--MouseEnter-->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#3a3a3a" Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!--MouseLeave-->
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="White" Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hoverless button:
<Style TargetType="{x:Type Button}" x:Key="Hoverless">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
Apologies if i miss anything out I am new to this, also the state of my code(Jr Developer in the making). I am trying to create a style in the resource dictionary that will do the following:
Be able to apply to all buttons.
Change from a white icon png to blue icon png.
and have this done ideally in the resource dictionary but open to other ways.
Any help would be greatly appreciated :)
here is my app.xaml code;
<Style x:Key="SideMenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource bmBlue}" />
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Cairo"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="10 20 10 0" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" >
<StackPanel Orientation="Horizontal">
<Image x:Name="image1" Visibility="Visible" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\BackIconBWblue.png"/>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#005389" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#fff"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#005389" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="BorderBrush.Color" To="#fff" />
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background.Color" To="#005389"/>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Color" To="#fff" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Here is the button Xaml;
<Button Click="NewQuote_Click" Style="{StaticResource SideMenuButton}" >
<StackPanel Orientation="Horizontal">
<Image Grid.Column="0" MaxHeight="25" HorizontalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" Source="C:\Users\PaulR\source\repos\eSuiteVer10\eSuiteVer10\Icons\NewIconBlueWhitewhite.png"/>
<TextBlock Text="New" Grid.Column="1" HorizontalAlignment="Center" />
</StackPanel>
</Button>
Try this:
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource= "\Images\ButtonImages\Image.png" Stretch="Uniform"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid Background="Transparent">
<ContentPresenter></ContentPresenter>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here I have a button style in appliction resources
<Style x:Key="ClickableText" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="/Tasks;component/Assets/Fonts/#Abel"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<StackPanel VerticalAlignment="Center">
<ContentPresenter x:Name="Text" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Rectangle x:Name="Rect1" Width="{Binding ActualWidth, ElementName=Text}" Height="2" Fill="{DynamicResource LightGrey}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the style I have added a underlining rectangle to the text in the button.
<Rectangle x:Name="Rect1" Width="{Binding ActualWidth, ElementName=Text}" Height="2" Fill="{DynamicResource LightGrey}"/>
I have binded the rectangles width to be the same width as the text so that it adds a underline effect.
I now want to add an effect so that when you hover the button the rectangle reveals by spliting out.
I have got this far by adding this under the trigger tag
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.300" From="0" To="{Binding ActualWidth, ElementName=Text}" Storyboard.TargetName="Rect1" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.300" From="{Binding ActualWidth, ElementName=Text}" To="0" Storyboard.TargetName="Rect1" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
I want to link the to and from part of the double animation to the binding I used in the rectangle but it keeps producing errors. How can I do this effect?
I also want to use this as a reusable style I can distribute and keep in Application resources. I have seen other people do this through workarounds in code but am not sure if you can do this in application resources
Any help or guidance is greatly appriciated!!
LayoutTransform animation is Better for this effect.
I would do this animation in this way:
<Style x:Key="ClickableText" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="/Tasks;component/Assets/Fonts/#Abel"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="MainBorder" Background="{TemplateBinding Background}">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="Text" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Rectangle x:Name="Rect1" Grid.Row="1" Height="2" Width="{Binding ElementName=Text, Path=ActualWidth}" Fill="LightGray">
<Rectangle.LayoutTransform>
<ScaleTransform ScaleX="0"/>
</Rectangle.LayoutTransform>
</Rectangle>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="MainBorder" Value="White"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rect1" Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Rect1" Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleX)" From="1" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
I created a custom button, nothing too fancy, just an extension of the mahApps SquareButton with a little colored marker at the left side.
I designed it in Blend, and copied the code into my real application in Visual Studio. When starting in Blend it's working just fine, when starting in Visual Studio the marker is not visible and also the Text gets left aligned, the button is looking nearly like a normal SquareButton. What am I doing wrong?
The XAML I put copied from Blend:
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type Button}">
<Setter Property="MinHeight" Value="25"/>
<Setter Property="FontFamily" Value="{DynamicResource DefaultFont}"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Background" Value="{DynamicResource WhiteBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource BlackBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
<Setter Property="Padding" Value="5,6"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value="0.7"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_ContentPresenter">
<EasingDoubleKeyFrame KeyTime="0" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused"/>
<VisualState x:Name="InvalidUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{x:Null}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Rectangle Fill="#FFAA2222" HorizontalAlignment="Left" Width="15" Margin="{Binding BorderThickness, ElementName=Background}" StrokeThickness="0" IsHitTestVisible="False"/>
<Rectangle x:Name="DisabledVisualElement" Fill="{DynamicResource ControlsDisabledBrush}" IsHitTestVisible="False" Opacity="0"/>
<Custom:ContentControlEx x:Name="PART_ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource GrayBrush8}"/>
<Setter Property="Foreground" Value="{DynamicResource BlackBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource BlackBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource WhiteBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Just the custom part of the button:
<Rectangle Fill="#FFAA2222" HorizontalAlignment="Left" Width="15" Margin="{Binding BorderThickness, ElementName=Background}" StrokeThickness="0" IsHitTestVisible="False"/>
And the code i put around to get it into VS:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:view="clr-namespace:MyApplication.View">
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type view:MarkerButton}">
...
</Style>
<Style TargetType="{x:Type view:MarkerButton}" BasedOn="{StaticResource MarkerButtonStyle}"/>
</ResourceDictionary>
Then I used the button like this:
<view:MarkerButton MarkerColor="{Binding Color}" Content="{Binding Name}" MarkerWidth="15" .... />
With Punker76's solution of extending the button I get this:
The positioning is broken, but the xaml seems to be right....
Fixed my old solution, the problem was my width: I declared it as uint instead of double. Still, the button appears different to the normal square style (different border, focus rect, text alignment) and I don't know why.
First you show us this
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type Button}">
And then this
<Style x:Key="MarkerButtonStyle" TargetType="{x:Type view:MarkerButton}">
If the MarkerButton is a button, then this should work if you use the first style that targets to the Button
<Style TargetType="{x:Type view:MarkerButton}"
BasedOn="{StaticResource MarkerButtonStyle}">
<Setter Property="MarkerColor" Value="#FFAA2222" />
<Setter Property="MarkerWidth" Value="15" />
</Style>
<Button Content="Test" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" />
EDIT
You can also use attached properties and inherited style instead createing a new button class.
public static class ButtonsHelper
{
public static readonly DependencyProperty MarkerColorProperty
= DependencyProperty.RegisterAttached("MarkerColor", typeof(Brush), typeof(ButtonsHelper), new FrameworkPropertyMetadata(Brushes.Transparent));
public static void SetMarkerColor(DependencyObject obj, Brush value)
{
obj.SetValue(MarkerColorProperty, value);
}
public static Brush GetMarkerColor(DependencyObject obj)
{
return (Brush)obj.GetValue(MarkerColorProperty);
}
public static readonly DependencyProperty MarkerWidthProperty
= DependencyProperty.RegisterAttached("MarkerWidth", typeof(double), typeof(ButtonsHelper), new FrameworkPropertyMetadata(15d));
public static void SetMarkerWidth(DependencyObject obj, double value)
{
obj.SetValue(MarkerWidthProperty, value);
}
public static double GetMarkerWidth(DependencyObject obj)
{
return (double)obj.GetValue(MarkerWidthProperty);
}
}
usage
<Style x:Key="MarkerButtonStyle" BasedOn="{StaticResource SquareButtonStyle}" TargetType="{x:Type Button}">
<Setter Property="ButtonsHelper.MarkerColor" Value="#FFAA2222"/>
<Setter Property="ButtonsHelper.MarkerWidth" Value="15"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Rectangle Width="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=(ButtonsHelper.MarkerWidth), Mode=OneWay}"
HorizontalAlignment="Left"
Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=(ButtonsHelper.MarkerColor), Mode=OneWay}"
IsHitTestVisible="False"
StrokeThickness="0" />
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Mode=OneWay}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource MarkerButtonStyle}" TargetType="{x:Type Button}" />
You can now change your color in XAML like this
<Button Content="Test" ButtonsHelper.MarkerColor="YellowGreen" />
I'm really new to WPF and XAML and I'm trying to create a custom button style.
I already have a button template:
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Test" CornerRadius="5" Background="{TemplateBinding Background}"
BorderThickness="1" BorderBrush="Blue">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And a litte animation hovering the button:
<Style x:Key="Animation" TargetType="Button" BasedOn="{StaticResource RoundButtonTemplate}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation
Storyboard.TargetProperty="BorderThickness"
Duration="0:0:0.400"
From="1, 1, 1, 1"
To="3, 3, 3, 3"/>
<DoubleAnimation
Storyboard.TargetProperty="Height"
Duration="0:0:0.300"
From="22"
To="25"/>
<DoubleAnimation
Storyboard.TargetProperty="Width"
Duration="0:0:0.300"
From="75"
To="78"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style>
Everything works fine except the ThicknessAnimation. How could it work?
In ControlTemplate replace BorderThickness="1" with BorderThickness="{TemplateBinding BorderThickness}". Your Style animates control BorderThickness which is not used inside ControlTemplate as Border uses fixed value.
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Test"
CornerRadius="5"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="Blue">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You'll also need to add Setter with default value like with Background. You may also consider doing same thing with BorderBrush. It will allow you later to influence BorderBrush of your control without changing Template
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>