We Keep Coding

Is there a way to use IsMouseOver in a resource dictionary

When I use the below block of code in a Window or control it works (I can see the button animation and the size of the button changes when I hover over it), but it does not work when I use it in the resource dictionary. I am creating a Prism app with mah apps window.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:b="http://schemas.microsoft.com/expression/2010/interactivity"
>
<!--// Merge Dic here //-->
<ContentControl x:Key="OperatorUIPreview"
Content="{StaticResource splashStyle}"/>
<ContentControl x:Key="OperatorUI.Home"
Background="Purple">
<Grid >
<Border
Background="#323345"
CornerRadius="10,10,0,0"
Margin="0,85,0,0">
<Grid >
<Button
x:Name="home1"
Background="Blue"
Style="{StaticResource DockBtnStyle}">
<Popup Width="70"
HorizontalOffset="-12"
PlacementTarget="{Binding ElementName=home1}"
IsOpen="{Binding ElementName=home1, Path=IsMouseOver, Mode=OneWay}"
Style="{StaticResource PopupStyle}">
<Grid>
<Border Style="{StaticResource border}">
<TextBlock Text="Home"
Style="{StaticResource PopupText}" />
</Border>
<Path Style="{StaticResource ArrowPath}"/>
</Grid>
</Popup>
</Button>
</Grid>
</Border>
</Grid>
</ContentControl>
</ResourceDictionary>
Style:
<Style x:Key="DockBtnStyle"
TargetType="Button">
<Setter Property="Height"
Value="50" />
<Setter Property="Width"
Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border"
BorderThickness="0"
Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<!--// Button Animation //-->
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Width)"
To="65"
Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="(Button.Height)"
To="65"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Button.Width)"
To="50"
Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetProperty="(Button.Height)"
To="50"
Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>

ToggleButton: Style doesn't work with IsChecked binding

I have a ToggleButton defined like this:
<ToggleButton x:Name="tbtn_delivery_advice" IsChecked="{Binding ServiceOptions.Advice.Requested}" Style="{DynamicResource ToggleButtonStyle}" Grid.Column="0" Grid.Row="1" Width="28" Margin="2 7" VerticalAlignment="Top"/>
and this style, that I found on the internet:
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Border x:Name="Border" CornerRadius="10"
Background="#FFFFFFFF"
Width="40" Height="20"
BorderBrush="#FF707070"
BorderThickness="1">
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 1 2 1"
Stroke="LightGray" StrokeThickness="1"
HorizontalAlignment="Stretch">
</Ellipse>
</Border>
</Viewbox>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#FF4CD661"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="20 1 2 1"
Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="White"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="2 1 2 1"
Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The Button works just fine and looks like expected when IsChecked is not bound to anything or to a property with an initial value of false. But as soon as the initial value is true I get an exception. The message states that the name Border can't be found in System.Windows.Controls.ControlTemplate.
I have no idea how to solve this problem and would appreciate any help.

I found a solution even thought I'm still not a hundred percent sure what the problem was.
I thought it may be, that the Checked event trigger gets called before the button is fully initialized. So I simply switched from EventTrigger to Trigger and now everything works fine.
This is my working style:
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Border x:Name="Border" CornerRadius="10"
Background="#FFFFFFFF"
Width="40" Height="20"
BorderBrush="#FF707070"
BorderThickness="1">
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 1 2 1"
Stroke="LightGray" StrokeThickness="1"
HorizontalAlignment="Stretch">
</Ellipse>
</Border>
</Viewbox>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#FF4CD661"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="20 1 2 1"
Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="White"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="2 1 2 1"
Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Animate button background color in XAML

I new to WPF and XAML, so I have ResourceDictionary (one button for now):
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ButtonProduct" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border"
CornerRadius="0"
BorderThickness="0"
Focusable="False"
BorderBrush="Transparent" Background="White">
<ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#52b0ca"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
On hover the color of the button changes, but how can I make change in fade in and out, for smooth transition of the color?

You can use EventTrigger to start ColorAnimation on MouseEnter and MouseLeave:
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" CornerRadius="0" BorderThickness="0" Focusable="False" BorderBrush="Transparent" Background="White">
<ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="White" To="#52b0ca" Duration="0:0:1" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#52b0ca" To="White" Duration="0:0:1" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Android Lock Screen C# .NET Replica

I am looking to create an application in Visual Studio C# that mimics the Android pattern lock screen, and was wondering if anyone had any tips for doing so.
This is not a commercial project and no money will be made, just a bit of fun.
I have been playing around in WPF Projects, and am at a loss for ideas right now. The only way I have thought of would be to track the mouse on a MouseDown event, and use the paint features in C# to "paint" where the mouse has been, but I don't feel that this is the best solution.
Any ideas for doing this?

See if this chould help you is rough code.
public partial class PatternLock : UserControl
{
bool isMouseDown = false;
private ObservableCollection<ToggleButton> selectedobject = new ObservableCollection<ToggleButton>();
public PatternLock()
{
InitializeComponent();
}
internal ObservableCollection<int> buttons = new ObservableCollection<int>();
private void layoutroot_Checked(object sender, RoutedEventArgs e)
{
if (e.OriginalSource is ToggleButton)
buttons.Add(Convert.ToInt32(((ToggleButton)e.OriginalSource).Content));
}
private void layoutroot_Unchecked(object sender, RoutedEventArgs e)
{
if (e.OriginalSource is ToggleButton)
{
int i = Convert.ToInt32(((ToggleButton)e.OriginalSource).Content);
buttons.Remove(i);
}
}
internal void ResetPattern()
{
if (buttons != null)
{
buttons.Clear();
foreach (ToggleButton item in layoutroot.Children)
{
item.IsChecked = false;
}
}
}
}
XAML
<UserControl x:Class="WPFTestings.LockPattern.PatternLock"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<UserControl.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="{DynamicResource TextBrush}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="FontSize" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverShineBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="HoverShineBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="CheckedBorder"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Pressed"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Pressed"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="grid">
<Border x:Name="Border"
Background="{DynamicResource NormalBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Padding="{TemplateBinding Padding}">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Red" GlowSize="10" />
</Border.BitmapEffect>
</Border>
<Border x:Name="CheckedBorder"
Background="YellowGreen"
BorderBrush="Green"
BorderThickness="2"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}">
<Border.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="10" />
</Border.BitmapEffect>
</Border>
<Border x:Name="HoverBorder"
Background="YellowGreen"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Border x:Name="HoverShineBorder"
Background="{DynamicResource HoverShineBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Border x:Name="Pressed"
Background="YellowGreen"
BorderBrush="Green"
BorderThickness="2"
CornerRadius="50"
Opacity="0"
Padding="{TemplateBinding Padding}" />
<Rectangle x:Name="Shine"
Height="Auto"
Margin="2,2,2,2"
VerticalAlignment="Stretch"
Opacity="1"
RadiusX="3"
RadiusY="3"
Stroke="{x:Null}">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0.5,0.042" EndPoint="0.5,0.971">
<GradientStop Offset="0" Color="#26FFFFFF" />
<GradientStop Offset="1" Color="#00FFFFFF" />
<GradientStop Offset="0.467" Color="#26FFFFFF" />
<GradientStop Offset="0.475" Color="#00FFFFFF" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Margin="4,4,4,4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="HoverOff_BeginStoryboard" Storyboard="{StaticResource HoverOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="PressedOff_BeginStoryboard" Storyboard="{StaticResource PressedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="PressedOn_BeginStoryboard" Storyboard="{StaticResource PressedOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true" />
<Trigger Property="IsChecked" Value="true">
<Trigger.ExitActions>
<BeginStoryboard x:Name="CheckedOff_BeginStoryboard" Storyboard="{StaticResource CheckedOff}" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="CheckedOn_BeginStoryboard" Storyboard="{StaticResource CheckedOn}" />
</Trigger.EnterActions>
<Setter TargetName="Pressed" Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="10" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD" />
<Setter TargetName="Border" Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" />
<Setter TargetName="grid" Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource BlackColor}" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<UniformGrid x:Name="layoutroot"
Columns="3"
Rows="3"
ToggleButton.Checked="layoutroot_Checked"
ToggleButton.Unchecked="layoutroot_Unchecked">
<ToggleButton x:Name="btn1"
Margin="5"
Content="1" />
<ToggleButton x:Name="btn2"
Margin="5"
Content="2" />
<ToggleButton x:Name="btn3"
Margin="5"
Content="3" />
<ToggleButton x:Name="btn4"
Margin="5"
Content="4" />
<ToggleButton x:Name="btn5"
Margin="5"
Content="5" />
<ToggleButton x:Name="btn6"
Margin="5"
Content="6" />
<ToggleButton x:Name="btn7"
Margin="5"
Content="7" />
<ToggleButton x:Name="btn8"
Margin="5"
Content="8" />
<ToggleButton x:Name="btn9"
Margin="5"
Content="9" />
</UniformGrid>
</UserControl>
useing this is add dialog and button to match this as
if (string.Concat(patternLock1.buttons).ToString() == "1359")
{
this.Close();
}
else
{
patternLock1.ResetPattern();
}

WPF style/control template reuse

I'm new to WPF, and I would like to know how to reuse some annoying xaml I have to avoid duplicating.
<Button Cursor="Hand" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="MyButton" Style="{StaticResource ButtonTemplate}" Width="286" Content="hi!" Focusable="False" IsTabStop="False"/>
<Button Cursor="Hand" HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="MyButton2" Style="{StaticResource ButtonTemplate}" Width="286" Content="hi 2!" Focusable="False" IsTabStop="False"/>
I'd really like to use something like this template:
<Style TargetType="{x:Type Button}" x:Key="ButtonTemplate">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="btGrid">
<Path Cursor="Hand" HorizontalAlignment="Left" Stretch="Fill" Stroke="{x:Null}" Opacity="0" x:Name="path"/>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True" Visibility="Hidden" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top"/>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.PreviewMouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard SlipBehavior="Slip" BeginTime="00:00:00">
<MediaTimeline Source="{Binding StringFormat={}, Path=Name}" Storyboard.TargetName="{Binding StringFormat={}_wma, Path=Name}"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="{Binding StringFormat=key{}, Path=Name}" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>
Visible
</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Button.PreviewMouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="{Binding StringFormat=key{}, Path=Name}" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>
Hidden
</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I'd like the {Binding StringFormat={}, Path=Name} to point button's name, e.g. "MyButton", "MyButton2", etc.
When I run this code I get the error "Cannot freeze this Storyboard timeline tree for use across threads." :/ I understand this is because I use binding in a storyboard, correct? I don't know what to do to make this work.
Also, I'd like to make the ToggleVisibility of the image a template as well, that accepts once "Visible" and once "Hidden" values.
Thanks in advance!

You could always define properties other than Template in your style too.
<Style TargetType="{x:Type Button}"
x:Key="ButtonTemplate">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Width" Value="286" />
<Setter Property="Focusable" Value="False" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
...
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Which makes your code look like
<Button x:Name="MyButton" Style="{StaticResource ButtonTemplate}" Content="hi!" />
<Button x:Name="MyButton2" Style="{StaticResource ButtonTemplate}" Content="hi 2!" />

Yeah creating a style with target type to as button would do the trick.
Tip:It is always a good practice to write all the styling informations such as border, background, templates, etc., under the resource section of your code and apply them on the controls. It'll give good readability.
HTH :)