Based on the code below, is it possible to animate the transition from image1 to image2 on button IsMouseOverevent?
The following code works fine showing image1 as the upstate image and image2 as the hover image on a button but it does not animate the transition.
XAML Style
<Style x:Key="MainMenuButtonTemplate" TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button" CornerRadius="0"
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<TextBlock Text="{TemplateBinding Button.Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="button" Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/App;component/Images/image2.png" Stretch="None"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
Usage
<Button x:Name="findRButton"
Style="{StaticResource MainMenuButtonTemplate}"
Margin="0,0,0,0"
Height="53"
Command="{Binding FindrViewCommand}" BorderBrush="{x:Null}" Foreground="White" BorderThickness="0">
<Button.Background>
<ImageBrush ImageSource="Images/image1.png" Stretch="None"/>
</Button.Background>
</Button>
Here is code that shows you how to do what you're looking for.
In order to use animations during triggers you must utilize the enter and exit actions of that trigger. You must also name BeginStoryboard so that you can stop it in other calls.
Review the code and if you have anymore questions let me know. This will fade from image1 to image2 and vice versa with mouse over / leave.
<Window x:Class="Question_Answer_WPF_App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow"
Height="400"
Width="500">
<Window.Resources>
<Storyboard x:Key="mouseOverStoryboard"
Duration="00:00:00.5">
<DoubleAnimation Storyboard.TargetName="image1"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="00:00:00.5" />
<DoubleAnimation Storyboard.TargetName="image2"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="00:00:00.5" />
</Storyboard>
<Storyboard x:Key="mouseLeaveStoryboard"
Duration="00:00:00.5">
<DoubleAnimation Storyboard.TargetName="image1"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="00:00:00.5" />
<DoubleAnimation Storyboard.TargetName="image2"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="00:00:00.5" />
</Storyboard>
<Style x:Key="MainMenuButtonStyle"
TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image x:Name="image1"
Source="Images/image1.png" />
<Image x:Name="image2"
Source="Images/image2.png"
Opacity="0" />
<ContentPresenter />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="mouseLeaveStoryboard" />
<BeginStoryboard Name="mouseOverStoryboard"
Storyboard="{StaticResource mouseOverStoryboard}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="mouseOverStoryboard" />
<BeginStoryboard Name="mouseLeaveStoryboard"
Storyboard="{StaticResource mouseLeaveStoryboard}" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource MainMenuButtonStyle}"
Width="120"
Height="120" />
</Grid>
</Window>
Related
I have a custom message box with two button 'Yes' and 'No'. Button 'Yes' is green and button 'No' is red.
I apply the same style for the two buttons through a xaml file defined separately as below:
MsgBoxButtonStyle.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button"
x:Key="MsgBoxButtonStyle">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="TextBlock.TextAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="Border" CornerRadius="0"
BorderBrush="#000" BorderThickness="1,1,1,1"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
These two buttons are place in my WPF window as below:
<Window x:Class="My.XAML.Controls.Windows.WpfMessageBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/My.XAML;component/Styles/MsgBoxButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Button Name="btnYes" Content="Yes"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#b6dbd6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<Button Name="btnNo" Content="No"
Click="Button_Click" Foreground="Black"
Style="{StaticResource MsgBoxButtonStyle}"
Background="#dbb6b6"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center" />
</Window>
Now, I would like to perform a nice effect when mouse is positioned over the buttons, some kind of blinking or whatever using storyboard and dependant on the color of the button.
Also I would like to put this storyboard within my existing style file MsgBoxButtonStyle.xaml and no put each storyboard in the window for each button, i want to share it.
How can I do this? some one can provide me a nice effect for buttons?
Just add triggers to the style. Here's an example to start you off.
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="120"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.250" To="0"
Storyboard.TargetProperty="BorderThickness" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Height" />
<DoubleAnimation Duration="0:0:0.550" To="100"
Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
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>
im using a button which contains a popup control. Now i want the popup control to align on top of the button and it should also be centered.
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Padding="{TemplateBinding Padding}" UseLayoutRounding="True">
<Grid>
<Popup x:Name="popup" Placement="Top" AllowsTransparency="True" PopupAnimation="Slide" HorizontalOffset="-7" IsOpen="False">
<DockPanel Width="55" Background="#01FFFFFF">
<Button x:Name="DeleteButton" DockPanel.Dock="Top" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle3}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="DeleteButton_Click" />
<Button x:Name="EditButton" DockPanel.Dock="Top" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle4}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="EditButton_Click" />
<Button x:Name="AddButton" DockPanel.Dock="Bottom" Margin="0,0,0,5" Style="{DynamicResource ButtonStyle5}" Background="Transparent" BorderThickness="0" Width="30" Height="30" Click="AddButton_Click" />
</DockPanel>
</Popup>
<Image x:Name="add_img" Source="img\menu.png" RenderOptions.BitmapScalingMode="Fant" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="True">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource HidePopup}" />
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource ShowPopup}" />
<BeginStoryboard>
<Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
<DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="0" To="180" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource HidePopup}" />
<BeginStoryboard>
<Storyboard BeginTime="00:00:00.000" Duration="00:00:00.300">
<DoubleAnimation Storyboard.TargetName="add_img" Storyboard.TargetProperty="RenderTransform.Angle" From="180" To="0" BeginTime="00:00:00.000" Duration="00:00:00.200" AutoReverse="False" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code snippet works, but if I use another computer to compile my code, the popup isn't aligned anymore. Is there a better way to do this?
Have you forgotten set the PlacementTarget attribute of the Popup?
Hope that this helps:
<Popup ... PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"></Popup>
The focus visual hint that wpf provides on Windows 7 is a dashed line, as such this:
Now, how can I change the way it looks? How can I control its appearence?
Thanks!
Try something like following
<Window x:Class="FocusVisualStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="MyFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="-2" StrokeThickness="1" Stroke="Red"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
<TextBox Width="96"/>
<Button Content="Yes" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
<Button Content="No" Width="64" FocusVisualStyle="{DynamicResource MyFocusVisualStyle}"/>
</StackPanel>
You can customise to suit your liking. This is just a starting point.
Edit: Since so many people have liked this solution here is another example which changes focus visual style for all buttons and textboxes without explicit setting of FocusVisualStyle property for each control (see that DynamicResource thingy?) in xaml
Also it uses animation to change the colour of the focus rectangle.
Enjoy :)
<Window x:Class="FocusVisualStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="MyFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate >
<Rectangle Margin="-2" StrokeThickness="2" RadiusX="2" RadiusY="2" >
<Rectangle.Stroke>
<SolidColorBrush Color="Red" x:Name="RectangleStroke" />
</Rectangle.Stroke>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded" >
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="Red"
To="Orange"
Duration="0:0:0.5"
RepeatBehavior="Forever"
Storyboard.TargetName="RectangleStroke"
Storyboard.TargetProperty="Color"/>
<DoubleAnimation To="3"
Duration="0:0:0.5"
RepeatBehavior="Forever"
Storyboard.TargetProperty="StrokeDashOffset" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" Height="24">
<TextBox Width="96"/>
<Button Content="Yes" Width="64" />
<Button Content="No" Width="64" />
</StackPanel>
Here you see that I have styles for Button and TextBox which set the property FocusVisualStyle for all the buttons and text boxes in this window.
my problem is that i have three tab controls each with a listbox that has style for both the ListBox and the ItemContainerStyle, the styles are the same on all listboxes inside the tabs.
two of the tabs are databound using a CollectionViewSource.
The problem is as soon as i try to go into tab 2 i get an exception and i cant seem to find out where from (i tired enabling first chance exceptions as well and nothing )
playing around with it i found out that if i remove the ItemContainerStyle form the ListBox in tab two it no longer crashes. another way to stop it form crashing is not to have any items in the listbox. and another way is instead of using a CollectionViewSource
use a GetDefaultView() on the list and bind to that.
here are the lines i use to bind to the listboxes:
this.FListViewSource = (this.FindResource("FirstCollectionViewSource") as AutoRefreshCollectionViewSource);
this.FListViewSource.Source = this.FirstList;
this.FListView = (this.FListViewSource.View as ListCollectionView);
this.SListViewSource = (this.FindResource("SecondCollectionViewSource") as AutoRefreshCollectionViewSource);
this.SListViewSource.Source = testing;
this.SListView = (this.SListViewSource.View as ListCollectionView);
this is the XAML for the tab control :
<TabControl Width="Auto" Height="Auto">
<TabItem Header="tab 1">
<StackPanel Name =first_Panel" >
<ListBox Style="{StaticResource lb_ms}" ItemContainerStyle="{StaticResource black_lb}" Width="160" Name="first_lb"
ItemsSource="{Binding}" DisplayMemberPath="name" MinHeight="400" MaxHeight="500" ButtonBase.Click="lb_Click" Margin="5,0,5,0"/>
</StackPanel>
</TabItem>
<TabItem Header="tab 2">
<StackPanel Name ="second_Panel" DataContext="{Binding Source={StaticResource FirstCollectionViewSource}}" FlowDirection="LeftToRight" Background="#333333">
<ListBox ItemsSource="{Binding}" Style="{StaticResource lb_ms}" ItemContainerStyle="{StaticResource black_lb}" Width="160" Name="second_lb"
DisplayMemberPath="name" MinHeight="400" MaxHeight="500" ButtonBase.Click="lb_Click" Margin="5,0,5,0"/>
</StackPanel>
</TabItem>
<TabItem Header="Media">
</TabItem>
<TabItem Header="Domains">
<StackPanel Name ="third_Panel" DataContext="{Binding Source={StaticResource SecondCollectionViewSource}}" FlowDirection="LeftToRight" Background="#333333">
<ListBox Style="{StaticResource lb_ms}" ItemContainerStyle="{StaticResource black_lb}" Width="160" Name="third_lb"
ItemsSource="{Binding}" DisplayMemberPath="name" MinHeight="400" MaxHeight="400" ButtonBase.Click="lb_Click" Margin="5,0,5,0" SelectionMode="Multiple" />
</StackPanel>
</TabItem>
</TabControl>
this is the resource directory that contains the styles:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="black_lb" TargetType="{x:Type ListBoxItem}">
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="11" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Canvas Name="can" Width="Auto" Height="25">
<Rectangle Name="filler" Canvas.Top="0" Canvas.Left="0" Width="200" Height="25">
<Rectangle.Fill>
<SolidColorBrush x:Name="fillb" Color="#333333"/>
</Rectangle.Fill>
</Rectangle>
<Path d:LastTangent="0,0" Stroke="{x:Null}" Fill="#FF6E00" HorizontalAlignment="Right" VerticalAlignment="Top" Width="7" Height="7" Canvas.Left="15" Opacity="0" Canvas.Top="6" x:Name="Path" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Data="M601.11544,190.39485 L590.06202,213.0964 613,213">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="90"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<StackPanel Panel.ZIndex="1000" Name="ActionsContainer" Visibility="Hidden" Canvas.Right="0" HorizontalAlignment="Right" Orientation="Horizontal">
<Button Name="btn_edit" FontSize="10" Content="Edit" Height="20" Width="Auto"/>
<Button Name="btn_delete" FontSize="10" Content="Delete" Height="20" Width="Auto"/>
</StackPanel>
<ContentPresenter Name="con" Canvas.Top="2" Canvas.Left="10"/>
<!--
<ContentPresenter Name="con" Content="{TemplateBinding ContentControl.Content}" />
<ContentControl Name="DesignerItem"
Canvas.Top="2"
Canvas.Left="10"
/>
-->
</Canvas>
<ControlTemplate.Resources>
<Storyboard x:Key="SelectedStory">
<ColorAnimation Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" From="#333333" To="#111111" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="con" Storyboard.TargetProperty="(Canvas.Left)" From="10" To="30" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Path.Opacity)" From="0" To="1" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Canvas.Left)" From="15" To="10" Duration="0:0:0.2" />
</Storyboard>
<Storyboard x:Key="unSelectedStory">
<ColorAnimation Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" From="#111111" To="#333333" Duration="0:0:0.8" />
<DoubleAnimation Storyboard.TargetName="con" Storyboard.TargetProperty="(Canvas.Left)" From="30" To="10" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Path.Opacity)" From="1" To="0" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Canvas.Left)" From="10" To="15" Duration="0:0:0.1" />
</Storyboard>
<Storyboard x:Key="CurrentlySlecetedStory">
<ColorAnimation Storyboard.TargetName="fillb" Storyboard.TargetProperty="(SolidColorBrush.Color)" From="#111111" To="#111111" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="con" Storyboard.TargetProperty="(Canvas.Left)" From="30" To="30" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Path.Opacity)" From="1" To="1" Duration="0:0:0.1" />
<DoubleAnimation Storyboard.TargetName="Path" Storyboard.TargetProperty="(Canvas.Left)" From="10" To="15" Duration="0:0:0.2" />
</Storyboard>
<SolidColorBrush x:Key="fillb" Color="#333333" />
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ListBoxItem.IsMouseOver" Value="True" />
<Condition Property="ListBoxItem.IsSelected" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="ActionsContainer" Property="Visibility" Value="{x:Static Visibility.Visible}"/>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ListBoxItem.IsMouseOver" Value="True" />
<Condition Property="ListBoxItem.IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard Selector.IsSelected="True" Storyboard="{StaticResource SelectedStory}">
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource unSelectedStory}">
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Selected">
<EventTrigger.Actions>
<BeginStoryboard Name="SelectedItemStory" Storyboard="{StaticResource CurrentlySlecetedStory}">
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListBoxItem.Unselected">
<EventTrigger.Actions>
<StopStoryboard BeginStoryboardName="SelectedItemStory" />
</EventTrigger.Actions>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="lb_ms" TargetType="ListBox">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="95"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border
Name="Border"
Background="#333333"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="5">
<ScrollViewer
Margin="0"
Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background"
Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush"
Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
For it not to crash i had to add SelectionMode="Multiple" on the listbox that used the style, the question is why?