Develop Reference

C# WPF Popup placement = center and on top of element

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>

How to make a TextBox and a ComboBox's ToggleBox to flicker identically, when certain dependency property is set to True?

I have a TextBox and a ComboBox. I want them both to flicker whenever some dependency property, BlinkDepProp, is set to true:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--
...
-->
<TextBox Text="{Binding MyDataContext.SomeText, UpdateSourceTrigger=PropertyChanged}" Grid.Row="0">
<TextBox.Style>
<Style>
<Style.Triggers>
<DataTrigger
Binding="{Binding Path=BlinkDepProp,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type loc:DevicesRepositoryEditorUserControl}}}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="BlinkBeginStoryboard">
<Storyboard>
<ColorAnimation To="Red" Storyboard.TargetProperty="(TextBox.Background).(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:0.4" RepeatBehavior="Forever" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="BlinkBeginStoryboard" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
<!--
...
-->
<ComboBox ItemsSource="{Binding MyDataContext.SomeList}" Template="{DynamicResource ComboBoxControlTemplate}"
SelectedValue="{Binding MyDataContext.SelectedEntry}"
Grid.Row="1">
<!--
...
-->
</Grid>
The snippet above works for the TextBox element, but I want to apply it to the ToggleButton of the ComboBox as well. I created the ComboBoxControlTemplate ControlTemplate (doesn't really matter, but it's in some ResourceDictionary that resides in a separate XAML file).
My question is: how do I trigger both the TextBox and the ComboBox to act identically (same colours, identical flickering rate and phase, ...), and respond to the same BlinkDepProp (defined in the containing UserControl)?

What exactly didn't work?
On my little example textbox and combobox are blinking.
<Window x:Class="animation.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="blink">
<Style.Triggers>
<DataTrigger
Binding="{Binding BlinkDepProp}"
Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="BlinkBeginStoryboard">
<Storyboard>
<ColorAnimation To="Red" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:0.4" RepeatBehavior="Forever" AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="BlinkBeginStoryboard" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox
Name="txt"
Text="{Binding SomeText, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource ResourceKey=blink}"
Background="Beige"
Width="100"
Height="20"/>
<ComboBox
Name="cmb"
Style="{StaticResource ResourceKey=blink}"
Background="Beige"
Width="100"
Height="20"
Grid.Column="1"/>
</Grid>
</Window>

You can try setting the ComboBox's Background to some Binding to the TextBox's Background when the DataTrigger is fired like this:
<ComboBox ItemsSource="{Binding MyDataContext.SomeList}"
Template="{DynamicResource ComboBoxControlTemplate}"
SelectedValue="{Binding MyDataContext.SelectedEntry}"
Grid.Row="1">
<ComboBox.Style>
<Style TargetType="ComboBox">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=BlinkDepProp,
RelativeSource={RelativeSource
AncestorType={x:Type loc:DevicesRepositoryEditorUserControl}}}" Value="True">
<Setter Property="Background" Value="{Binding Background, ElementName=tb}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
</ComboBox>
I suppose your TextBox's Name is tb.

Change the Grid Background color with EventTrigger on MouseDown

I want Change the Grid Background in my UserContorl in XAML EventTrigger MouseDown
Below is mine code:
<UserControl x:Class="OneCardApp.Ex.EntranceGuard.ControlManager.MapMonitoring.Map.MonitorDoor"
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" Loaded="UserControl_Loaded" FontSize="10" MouseDown="UserControl_MouseDown" MouseMove="UserControl_MouseMove" MouseUp="UserControl_MouseUp">
<Grid Height="60" Width="50" Name="content">
<Grid.Resources>
<GradientStop x:Name="Stop2" Color="Blue" Offset="1" x:Key="s"></GradientStop>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="blue"></Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Name="img_door" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Source="/OneCardApp.Ex;component/image/36/companyInfo.png"></Image>
<Label Name="lbl_name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"></Label>
</Grid>
I try to create add IsPressed trigger, but it don't have.
so,How do I do that.
Thanks.

Try this
and choose color according to your requirement
<Grid Height="60" Width="50" Name="content" Background="Transparent" Focusable="True">
<Grid.Resources>
<GradientStop x:Name="Stop2" Color="Blue" Offset="1" x:Key="s"></GradientStop>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Blue" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="GotKeyboardFocus">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Red" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseDown">
<BeginStoryboard>
<Storyboard >
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="Green" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="36"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Name="img_door" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Source="/OneCardApp.Ex;component/image/36/companyInfo.png"></Image>
<Label Name="lbl_name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"></Label>
</Grid>

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?

App Crashes when changing tabs that contain listboxes with control templates on ItemContainerStyle and bound to CollectionViewSource

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?