Button Mouse-over to Change Images of buttons WPF - c#

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>

Related

Transparent background and mouseEnter of a button - WPF

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>

ControlTemplate working correctly in Blend but not in actual application

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" />

Image in User control not display while executing

I have created a user control; it contains an image control and placed that image in xaml code. The image properly displayed in User control. This was added to Window. But Image in user control is not displayed when executing the application.
<UserControl x:Class="PsyboInventory.Tiles.EmployeeTile.DepartmentTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Opacity="1" Height="209" Width="220" PreviewMouseLeftButtonDown="UserControl_PreviewMouseLeftButtonDown">
<UserControl.Resources>
<Storyboard x:Key="OnMouseEnter1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TileSurfaceRct" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.14"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TileSurfaceRct" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.14"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}" x:Name="OnMouseLeave1_BeginStoryboard"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle Stroke="{x:Null}" x:Name="TileBgrndRct" Fill="{DynamicResource TileBgrndRctFill}" Grid.RowSpan="2"/>
<TextBlock Margin="10,179,141,10" x:Name="TileTxtBlck" FontSize="12" Foreground="#FFFFFFFF" Text="Department" TextWrapping="Wrap" Grid.Row="1"/>
<Rectangle x:Name="TileSurfaceRct" Fill="#FF000000" Opacity="0" Stroke="#FFFBFBFB" Grid.RowSpan="2"/>
<Image Height="174" Grid.RowSpan="2" VerticalAlignment="Top">
<Image.Source>
<BitmapImage UriSource="/PsyboInventory;component/img/department.png"/>
</Image.Source>
</Image>
</Grid>
</UserControl>
This user control added to Window dynamically.
DepartmentTile depart = new DepartmentTile();
StackPanel panel1 = new StackPanel();
panel1.Margin = new Thickness(0, 50, 0, 0);
panel1.Children.Add(depart);
Grid grid = new Grid();
grid.Width = Double.NaN;
grid.Height = Double.NaN;
grid.Children.Add(panel1);
MetroStackPanel.Children.Add(grid);
While executing; their is no error.but no image displaying in UserControl
<Window x:Class="PsyboInventory.start"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="start" Height="526" Width="832" WindowStartupLocation="CenterScreen" WindowState="Maximized" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}" Loaded="Window_Loaded" Initialized="Window_Initialized" MouseLeftButtonDown="Window_MouseLeftButtonDown">
<Window.Resources>
<!-- Seting Image for back Button-->
<ImageBrush x:Key="ButtonImageBack" Stretch="Uniform" AlignmentX="Left" ImageSource="/PsyboInventory;component/img/exit.png"/>
<Style TargetType="{x:Type Button}" x:Key="BackImg">
<Setter Property="Background" Value="{StaticResource ButtonImageBack}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<!-- If we don't tell the background to change on hover, it will remain the same -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Seting Image for logout Button-->
<ImageBrush x:Key="ButtonImageLog" Stretch="Uniform" AlignmentX="Left" ImageSource="/PsyboInventory;component/img/save.png"/>
<Style TargetType="{x:Type Button}" x:Key="LogImg">
<Setter Property="Background" Value="{StaticResource ButtonImageLog}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ImageBrush x:Key="ButtonImageQuit" Stretch="Uniform" AlignmentX="Left" ImageSource="/PsyboInventory;component/img/edit.png"/>
<Style TargetType="{x:Type Button}" x:Key="QuitImg">
<Setter Property="Background" Value="{StaticResource ButtonImageQuit}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ImageBrush x:Key="ButtonImageHome" Stretch="Uniform" AlignmentX="Left" ImageSource="/PsyboInventory;component/img/delete.png"/>
<Style TargetType="{x:Type Button}" x:Key="HomeImg">
<Setter Property="Background" Value="{StaticResource ButtonImageHome}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CloseButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Viewbox x:Name="Close">
<Canvas Width="15.4167" Height="15.5001">
<Path x:Name="Rect1" Width="15.4167" Height="15.5001" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#00000000" Data="F1 M 2,0L 13.4167,0C 14.5212,0 15.4167,0.895447 15.4167,2L 15.4167,13.5001C 15.4167,14.6046 14.5212,15.5001 13.4167,15.5001L 2,15.5001C 0.895447,15.5001 0,14.6046 0,13.5001L 0,2C 0,0.895447 0.895447,0 2,0 Z "/>
<Path x:Name="X1" Width="15.001" Height="15.001" Canvas.Left="0.209" Canvas.Top="0.235" Stretch="Fill" Fill="#FF000000" Data="F1 M 14.7216,0.723328C 15.3725,1.37421 15.3725,2.4295 14.7216,3.08038L 10.0667,7.73535L 14.7218,12.3905C 15.3727,13.0414 15.3726,14.0966 14.7217,14.7475C 14.0709,15.3984 13.0156,15.3984 12.3647,14.7475L 7.70959,10.0924L 3.05438,14.7476C 2.4035,15.3985 1.34827,15.3985 0.697388,14.7476C 0.0465088,14.0967 0.0465088,13.0414 0.697388,12.3906L 5.3526,7.73541L 0.697449,3.08026C 0.0465698,2.42938 0.0465698,1.37415 0.697449,0.723267C 1.34833,0.0723877 2.40363,0.0723877 3.0545,0.723267L 7.70966,5.37836L 12.3646,0.723328C 13.0155,0.0724487 14.0707,0.0724487 14.7216,0.723328 Z "/>
<Path x:Name="X2" Width="13.6364" Height="13.6351" Canvas.Left="0.891403" Canvas.Top="0.91861" Stretch="Fill" Fill="#FFD7D7D7" Data="F1 M 1.19855,1.2243C 1.60614,0.816711 2.26715,0.816711 2.67474,1.2243L 7.70966,6.25922L 12.7444,1.22443C 13.152,0.816711 13.813,0.816711 14.2207,1.22437C 14.6284,1.63202 14.6284,2.29303 14.2206,2.70062L 9.18585,7.73541L 14.222,12.7716C 14.6297,13.1793 14.6297,13.8402 14.222,14.2479C 13.8143,14.6556 13.1535,14.6556 12.7458,14.2479L 7.70966,9.21173L 2.67346,14.2479C 2.26575,14.6556 1.6048,14.6556 1.19714,14.2479C 0.78949,13.8403 0.78949,13.1793 1.19714,12.7716L 6.23334,7.73541L 1.19855,2.70062C 0.790894,2.29297 0.790833,1.63202 1.19855,1.2243 Z "/>
</Canvas>
</Viewbox>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="X2" Value="#FF67C8FF"/>
</Trigger>
<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>
<Style x:Key="MinimizeButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Viewbox x:Name="Minimize">
<Canvas Width="15.4166" Height="15.5">
<Path x:Name="Rect" Width="15.4166" Height="15.5" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" Fill="#00C80000" Data="F1 M 2,0L 13.4166,0C 14.5212,0 15.4166,0.895386 15.4166,2L 15.4166,13.5C 15.4166,14.6046 14.5212,15.5 13.4166,15.5L 2,15.5C 0.895386,15.5 0,14.6046 0,13.5L 0,2C 0,0.895386 0.895386,0 2,0 Z "/>
<Path x:Name="Path" Width="15" Height="3.29211" Canvas.Left="0.203247" Canvas.Top="12.0621" Stretch="Fill" Fill="#FF000000" Data="F1 M 1.84924,12.0621L 13.5572,12.0621C 14.4663,12.0621 15.2032,12.7991 15.2032,13.7082L 15.2032,13.7082C 15.2032,14.6173 14.4663,15.3542 13.5572,15.3542L 1.84924,15.3542C 0.940186,15.3542 0.203247,14.6173 0.203247,13.7082L 0.203247,13.7082C 0.203247,12.7991 0.940186,12.0621 1.84924,12.0621 Z "/>
<Path x:Name="Path_0" Width="13.6262" Height="2.20911" Canvas.Left="0.890076" Canvas.Top="12.6036" Stretch="Fill" Fill="#FFCBCBCB" Data="F1 M 1.99463,12.6036L 13.4117,12.6036C 14.0218,12.6036 14.5162,13.0981 14.5162,13.7082L 14.5162,13.7082C 14.5162,14.3182 14.0218,14.8127 13.4117,14.8127L 1.99463,14.8127C 1.38458,14.8127 0.890076,14.3182 0.890076,13.7082L 0.890076,13.7082C 0.890076,13.0981 1.38458,12.6036 1.99463,12.6036 Z "/>
</Canvas>
</Viewbox>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="Path_0" Value="#FF67C8FF"/>
</Trigger>
<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>
<Storyboard x:Key="OnMouseEnter1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExtrasGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExtrasGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-35"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseEnter2">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SidesGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="-35"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnMouseLeave2">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SidesGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="-35"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Style x:Key="SkinButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="#FFB50000" Stroke="{x:Null}" x:Name="rectangle"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#FFD10000"/>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GreenButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="#FF04822A" Stroke="{x:Null}" x:Name="rectangle"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#FF05A234"/>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BlueButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="#FF04457C" Stroke="{x:Null}" x:Name="rectangle"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#FF035396"/>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PurpleButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="#FF67037A" Stroke="{x:Null}" x:Name="rectangle"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#FF85029E"/>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SettingsButtonStyle" BasedOn="{x:Null}" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="RotateCogReverse">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="179.06"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="90"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="RotateCog">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="90"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="179.06"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Rectangle Fill="#00FFFFFF" Stroke="#FF000000"/>
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="{x:Null}" RenderTransformOrigin="0.500000004069009,0.5" Data="M11.2495,6.0420003 C8.3734743,6.0420003 6.0420003,8.3737047 6.0420003,11.25 6.0420003,14.126296 8.3734766,16.458 11.2495,16.458 14.125523,16.458 16.457001,14.126297 16.457001,11.25 16.457001,8.3737034 14.125525,6.0420003 11.2495,6.0420003 z M9.4165001,0 L13.0835,0 13.0835,3.2868118 14.492886,3.5713878 15.593504,4.3135347 17.90847,1.9985683 20.501431,4.5915289 18.186081,6.9068799 18.927191,8.0062256 19.211878,9.4165001 22.5,9.4165001 22.5,13.0835 19.211878,13.0835 18.927191,14.493774 18.186081,15.59312 20.501431,17.90847 17.90847,20.501432 15.593504,18.186464 14.492886,18.928612 13.0835,19.213188 13.0835,22.5 9.4165001,22.5 9.4165001,19.21339 8.006115,18.928612
6.9060936,18.186867 4.5915289,20.501432 1.9985685,17.90847 4.3133221,15.593717 3.5718093,14.493774 3.2871222,13.0835 0,13.0835 0,9.4165001 3.2871222,9.4165001 3.5718093,8.0062256 4.3133221,6.9062824 1.9985685,4.5915289 4.5915289,1.9985683 6.9060926,4.3131323 8.006115,3.5713878 9.4165001,3.2866099 z" x:Name="path">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="90"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource RotateCogReverse}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource RotateCog}" x:Name="RotateCog_BeginStoryboard"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="SettingsButtonTemplate" TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="#FF1E8E88" Stroke="#FF7C7C7C" x:Name="rectangle"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="rectangle" Value="#FF12A59D"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="ExtrasCanvas">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="ExtrasCanvas">
<BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}" x:Name="OnMouseLeave1_BeginStoryboard"/>
</EventTrigger>
</Window.Triggers>
<Grid x:Name="MainGrid">
<Rectangle x:Name="MainBgrndRct" Fill="{DynamicResource MainBgrndRctFill}" Stroke="{DynamicResource MainBgrndRctStroke}"/>
<Grid HorizontalAlignment="Right" Margin="0,0,-44,-49" VerticalAlignment="Bottom" Width="281" Height="225" Visibility="Visible">
<Ellipse Fill="#00FFFFFF" Stroke="#22FFFFFF" StrokeThickness="3" Margin="79,23,0,0" RenderTransformOrigin="0.5,0.5">
</Ellipse>
<Ellipse Fill="#00FFFFFF" Stroke="#19FFFFFF" StrokeThickness="3" HorizontalAlignment="Left" Margin="5,35,0,76" Width="114"/>
<Ellipse Fill="#00FFFFFF" Stroke="#1EFFFFFF" StrokeThickness="3" Margin="86,7,131,0" VerticalAlignment="Top" Height="64"/>
</Grid>
<Grid Margin="156,-18,415,0" VerticalAlignment="Top" Height="234" Visibility="Visible">
<Ellipse Fill="{x:Null}" Stroke="#25FFFFFF" StrokeThickness="3" Margin="-49,-72,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Height="120"/>
<Ellipse Fill="{x:Null}" Stroke="#24FFFFFF" StrokeThickness="3" Margin="-21,-25,94,71" RenderTransformOrigin="0.5,0.5">
</Ellipse>
<Ellipse Fill="{x:Null}" Stroke="#1FFFFFFF" StrokeThickness="3" Margin="100,82,61,52"/>
<Ellipse Fill="{x:Null}" Stroke="#1EFFFFFF" StrokeThickness="3" Margin="0,48,60,0" VerticalAlignment="Top" Height="56" Width="56" HorizontalAlignment="Right"/>
</Grid>
<Canvas Margin="10,126,10,33" x:Name="MainCanvas" ClipToBounds="True" Background="#00000000">
<StackPanel Width="Auto" Height="Auto" Canvas.Left="45" Canvas.Top="0" x:Name="MetroStackPanel" Orientation="Horizontal" Background="#00000000" ScrollViewer.HorizontalScrollBarVisibility="Hidden"/>
</Canvas>
<Button Style="{DynamicResource CloseButtonStyle}" Width="11.195" Content="Button" x:Name="CloseButton" Cursor="Hand" HorizontalAlignment="Right" Margin="0,5.583,7.468,0" VerticalAlignment="Top" Height="12.77" Click="CloseButton_Click"/>
<Button Style="{DynamicResource MinimizeButtonStyle}" Width="12.402" Content="Button" x:Name="MinimizeButton" Cursor="Hand" HorizontalAlignment="Right" Margin="0,4.733,24.606,0" VerticalAlignment="Top" Height="13.537"/>
</Grid>

Your code throws a Xamlparse Exception at runtime. That is not related to the usercontrol added dynamically. It is because of the SourceNames that your storyboard and Event Triggers are targetting to. 'ExtraGrids' , 'ExtraCanvas' does not exist in the window.xaml code. Hence replaceing it with correct sourceNames will run your code perfectly fine.
Just comment out code inside and and you will know the difference.
This is a reference link for the exception occured. https://social.msdn.microsoft.com/Forums/vstudio/en-US/8f803f28-dfda-4be5-9e8d-f7d82db95961/c-wpf-systemwindowsmarkupxamlparseexception?forum=wpf

Change BorderThickness in XAML

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

wpf expander inside list not always execute command when checked

i'm trying to make a list of expanders, while only one expander is selected..
Now i've overrided the expander to look as i wanted to be.
In the header i've got ToggleButton, which i binded Command to it.
basicly i want to do an action every time i expand an expander from the list
So the list is that:
<ListBox ItemsSource="{Binding DeviceEvents}" Style="{DynamicResource EventsList}"/>
The list style:
<Style TargetType="ListBoxItem" x:Key="listboxEventitemDisableBackground">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter Margin="0,0,0,6"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="EventsList" TargetType="{x:Type ListBox}" BasedOn="{StaticResource BaseListProps}">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle" Value="{StaticResource listboxEventitemDisableBackground}"/>
</Style>
Now, each object in the list binded to ViewModel, which described this way:
<Expander Name="check" Margin="0,0,0,0" Header="Test" Style="{StaticResource EventTileExpander}">
<StackPanel>
Some Content...
</StackPanel>
</Expander>
The Important part is in this style: (on the MarkAsReadCommand binding)
<Style x:Key="EventTileExpander" TargetType="{x:Type Expander}">
<Setter Property="FontFamily" Value="Helvetica Neue LT Std Light"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="IsExpanded" Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid VerticalAlignment="Top" Name="ExpanderBorder" Background="#51000000">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton Content="{TemplateBinding Header}"
Template="{DynamicResource AnimatedExpanderTemplate}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Command="{Binding MarkAsReadCommand}"/>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content" Grid.Row="1" Margin="10,-13,0,0">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="0"/>
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!-- Expand out -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"
Storyboard.TargetName="ExpanderContent" >
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<!-- Shrink in -->
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)"
Storyboard.TargetName="ExpanderContent" >
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuarticEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The inner template of the ToggleButton:
<ControlTemplate x:Key="AnimatedExpanderTemplate" TargetType="{x:Type ToggleButton}">
<Grid Name="GridContent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<Control Template="{DynamicResource Clock4Icon}" VerticalAlignment="Top" Margin="15,15,15,10"/>
<TextBlock Text="{Binding EventTime}" HorizontalAlignment="Center" FontSize="13" FontFamily="Helvetica Neue LT Std 47 Light" Foreground="White"/>
</StackPanel>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding EventTitle}" Foreground="{DynamicResource EventOrange}" Margin="0,15,0,0" FontSize="15" FontFamily="Helvetica Neue LT Std 47 Condensed"/>
<TextBlock Text="{Binding EventHeaderMessage}" TextWrapping="WrapWithOverflow" Foreground="White" Margin="0,5,10,0" FontSize="12" FontFamily="Helvetica Neue LT Std 47 Light Condensed" Opacity="0.9"/>
</StackPanel>
</Grid>
</ControlTemplate>
So i basicly tried many things to make it work, but no success..
i don't know why only somethings the command executed (there is not condition to the command).
i use RelayCommand by Mvvm Light..
it's like the click not always catches by the control..
any help would be appreciated.

I would suspect it is to do with your animations. Could it be that while they are expanding in/out there is effectively no background to capture the mouse clicks?

Categories

Resources