I have a togglebutton with this style shown below, the toggle button work perfectly but I would like to set a default text to the togglebutton when I open the MainWindow , it should be shown that in the state of false, not disabled
The togglebutton will show the text value only when I do action on it ( Set to ON or OFF ) it will display the text but by default, it seems to the user that it was disabled ( see the picture ).
After starting the application :
Set ON :
Set OFF:
The problem is when I run the application before click on the Toggle button , the shown in the screen is a Tooglebutton was disabled , I need to inizialize this control to state "OFF" ,
Is it possible?
How can I do that?
App.xaml
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#FFFFFFFF"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="12" />
<TextBlock x:Name="txtOn" Text="ON" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True" >
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#34A543"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="56 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0.0" To="1.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<!-- some out fading -->
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#C2283B"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="2 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0" To="1.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Setter Property="Foreground" Value="{DynamicResource IdealForegroundColorBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource GrayBrush7}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
MainWindow.xaml.cs
<Grid>
<ToggleButton x:Name="tog" Style="{StaticResource myToggleSwitch}" Width="150" Checked="tog_Checked" Unchecked="tog_Unchecked" ></ToggleButton>
</Grid>
Update :
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="IsChecked" Value="False"/> <!-- What I have added -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#FFFFFFFF"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 40 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White" FontSize="12" />
<TextBlock x:Name="txtOn" Text="ON" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
</Grid>
Update 2 ( Testing the solution of Jason ).
This what I got :
Since your colors are set by reacting to the IsChecked state change, you just need your initial values to match the false state. Set the border color to the off color (red) rather than white. That should get you what you're looking for.
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#C2283B"
Width="80" Height="25">
...
</Setter.Value>
Also set the default opacity of the "On" text to 0 to prevent it from showing.
<TextBlock x:Name="txtOn" Text="ON" Opacity="0" Margin="40 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left" FontSize="12" />
Related
I have created a customer ToggleSwitch using this code and then changing the design to suit me.
WPF toggleswitch code
However when it loads on my page it looks like this:
I'm really new to this so i understand I've got a user based error that i literally dont understand however after hours I can't fix it!
I obviously need to make sure it loads with a checked value, however if I put isChecked ="true" in the xaml then it still loads like the unassigned picture.
In reality I have a setting "toggleDefault" in my code which I want to use on load of the form to say:
togContact = toggleDefault
However since I cant even get the XAML state to work, then this isnt working either.
Any suggestions would be great.
XAML custom code:
<Window.Resources>
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#FFFFFFFF"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 8 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
<TextBlock x:Name="txtOn" Text="ON" Margin="15 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left"/>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#34A543"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="56 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0.0" To="1.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#C2283B"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="2 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0" To="1.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And below is my control code in the grid:
<ToggleButton x:Name="togContact" IsChecked="true" Margin="5" Grid.Column="2" Grid.Row="0" Height="20" Style="{StaticResource myToggleSwitch}" />
EDIT:
I have tried adding this to XAML:
IsChecked="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IsChecked, Mode=TwoWay}"
This made no change.
I then tried setting isChecked to FALSE in the C# code.
This was interesting as it made the OFF appear in the UI on load.
I then tried changing isChecked to True in the c# code and i got an exception!
{"'Border' name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'."}
So I have obviously stuffed up the custom togglebutton code...
This happens because the button is loading with the following styles:
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
Background="#C2283B"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 8 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
<TextBlock x:Name="txtOn" Opacity="0" Text="ON" Margin="15 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left"/>
</Grid>
To have the toggle button load as either ON or OFF, you need to change the background colour of the border in the toggle switch and also either set the txtOff or txtOn TextBlock to have an opacity of 0.
The button below will load as red and OFF 🙂
<Window.Resources>
<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Grid x:Name="toggleSwitch">
<Border x:Name="Border" CornerRadius="10"
<!-- Background color here -->
Background="#C2283B"
Width="80" Height="25">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
Margin="2 2 2 1"
Stroke="Gray" StrokeThickness="0.2"
HorizontalAlignment="Left" Width="22" >
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
<TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 8 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
<!-- Opacity change here -->
<TextBlock x:Name="txtOn" Opacity="0" Text="ON" Margin="15 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold" Foreground="White" HorizontalAlignment="Left"/>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#34A543"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="56 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0.0" To="1.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#C2283B"
Duration="0:0:0.1" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="2 2 2 1"
Duration="0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOff"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="0" To="1.0" Duration="0:0:0:0.1" />
<DoubleAnimation
Storyboard.TargetName="txtOn"
Storyboard.TargetProperty="(TextBlock.Opacity)"
From="1.0" To="0.0" Duration="0:0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
I've copied the code form this article on how to make a iOS style toggle button.
It works well, the only issue is that it is sitting pushed out to the right, and it seems that a large amount of margin is moving it...
<ToggleButton
Style="{StaticResource AnimatedSwitch}"
Height="30"
Grid.Column="1"
Width="50"
Margin="-20, 4, 0, 5"
Checked="ToggleButton_Checked"
Unchecked="ToggleButton_OnUnchecked"/>
Why is this style requiring so much margin to get it to sit so far off to the right... I would have thought that you would want the control to take up the entire space of its parent and scale with it?
Here's the code from the referenced article for the sake of completeness:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<ResourceDictionary>
<Style x:Key="AnimatedSwitch" TargetType="{x:Type ToggleButton}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="#FAFAFB" />
<Setter Property="BorderBrush" Value="#EAEAEB" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Viewbox Stretch="Uniform">
<Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
<Ellipse Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
<Ellipse Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
<Border Canvas.Left="10" Width="15" Height="20" Name="rect416927" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0.5,0,0.5"/>
<Ellipse x:Name="ellipse" Canvas.Left="0" Width="20" Height="20" Fill="White" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.3">
<Ellipse.RenderTransform>
<TranslateTransform X="0" Y="0" />
</Ellipse.RenderTransform>
<Ellipse.BitmapEffect>
<DropShadowBitmapEffect Softness="0.1" ShadowDepth="0.7" Direction="270" Color="#BBBBBB"/>
</Ellipse.BitmapEffect>
</Ellipse>
</Canvas>
</Viewbox>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True" >
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#52D468" Duration="0:0:0.2" />
<ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#41C955" Duration="0:0:0.2" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<SplineDoubleKeyFrame KeyTime="0" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="15" KeySpline="0, 1, 0.6, 1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FAFAFB" Duration="0:0:0.2" />
<ColorAnimation Storyboard.TargetProperty="BorderBrush.Color" To="#EAEAEB" Duration="0:0:0.2" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ellipse">
<SplineDoubleKeyFrame KeyTime="0" Value="15"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0" KeySpline="0, 0.5, 0.5, 1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Page.Resources>
<Grid>
<ToggleButton Style="{StaticResource AnimatedSwitch}" Height="80"/>
</Grid>
</Page>
The problem appears to be in this line:
<Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
It does not take into account how the button is moved when checked (the knob is translated by 15 pixels along x). So it must be:
<Canvas Name="Layer_1" Width="35" Height="20" Canvas.Left="10" Canvas.Top="0">
Now you may use
<ToggleButton Style="{StaticResource AnimatedSwitch}" HorizontalAlignment="Right" Height="80"/>
in order to position the button exactly at the right edge.
I read the template of the toggle button and here, as you can see, there is a canvas and inside it there are defined some ellipses.
The second is shifted of 15 from the first one. Doing this, goes outside the surface of the canvas that has a width of 20.
<Canvas Name="Layer_1" Width="20" Height="20" Canvas.Left="10" Canvas.Top="0">
<Ellipse Canvas.Left="0" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
<Ellipse Canvas.Left="15" Width="20" Height="20" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.5"/>
try changing the canvas width to 35. Like this:
<Canvas Name="Layer_1" Width="35" Height="20" Canvas.Left="10" Canvas.Top="0">
My Objective: is to create a Custom Expander with Animation on expanding and should support for all the directions.
What I tried: I have Implemented a solution with the help of this. I modified it and made it work based on my need. My solution will work with Up and I can able to make it work even with Down Direction.
Whats my problem now: I couldn't make it work with all Directions. I tried and failed to make it work on setting ExpanderDirection to Left and Right.
Here is my solution:
Template for Expander:
<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
<Border x:Name="ExpanderButtonBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Transparent"
Grid.ColumnSpan="2"/>
<Ellipse Name="Circle"
Grid.Column="0"
Stroke="DarkGray"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
<Path x:Name="Arrow"
Grid.Column="0"
Data="M 1,1.5 L 4.5,5 8,1.5"
Stroke="#FF666666"
StrokeThickness="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
>
<Path.RenderTransform>
<RotateTransform Angle="0"/>
</Path.RenderTransform>
</Path>
<ContentPresenter x:Name="HeaderContent"
Grid.Column="1"
Margin="4,0,0,0"
ContentSource="Content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<!-- Animate arrow when toggled-->
<Trigger Property="IsChecked"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="180"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- MouseOver, Pressed behaviours-->
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Stroke"
Value="#FF3C7FB1"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#222"
TargetName="Arrow"/>
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Stroke"
Value="#FF526C7B"
TargetName="Circle"/>
<Setter Property="StrokeThickness"
Value="1.5"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#FF003366"
TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Slide Out Content Expander's Template,
Uses: AnimatedExpanderButtonTemp from above,
MultiplyConverter in codebehind-->
<local:MultiplyConverter x:Key="multiplyConverter" />
<ControlTemplate x:Key="RevealExpanderTemp" TargetType="{x:Type Expander}">
<DockPanel>
<Border Background="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" DockPanel.Dock="Bottom" Padding="5,3">
<ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Center" HorizontalContentAlignment="Center"
Template="{StaticResource AnimatedExpanderButtonTemp}"
Content="{TemplateBinding Header}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Padding="1.5,0">
</ToggleButton>
</Border>
<ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Bottom"
>
<ScrollViewer.Tag>
<sys:Double>0.0</sys:Double>
</ScrollViewer.Tag>
<ScrollViewer.Height>
<MultiBinding Converter="{StaticResource multiplyConverter}">
<Binding Path="ActualHeight" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</ScrollViewer.Height>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content"/>
</ScrollViewer>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="1"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
MultiplyConverter.cs (required for Template)
public class MultiplyConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
double result = 1.0;
for (int i = 0; i < values.Length; i++)
{
if (values[i] is double)
result *= (double)values[i];
}
return result;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new Exception("Not implemented");
}
}
Use it like this:
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Orange">
<Expander Template="{StaticResource RevealExpanderTemp}"
OverridesDefaultStyle="True"
HorizontalAlignment="Left"
VerticalAlignment="Top" Background="LightGray">
<StackPanel>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
</StackPanel>
</Expander>
</Grid>
<Grid Grid.Row="2" Background="Chocolate" />
</Grid>
Above solution will not work with ExpandDirection="Left" or "Right"
Any suggestions on how could I make it work with all Directions or any other alternatives for this?
After 8 hours of struggle, I found the workaround for my question. Let me answer my own question so that It may save some time for other peoples looking for solution.
Control Template for Expander:
<ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
<Border x:Name="ExpanderArrow" CornerRadius="5"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Transparent"
Grid.ColumnSpan="2"/>
<Ellipse Name="Circle"
Grid.Column="0"
Stroke="DarkGray"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
<Path x:Name="Arrow"
Grid.Column="0"
Data="M 0 0 L 3,6 L 6,0"
Stroke="#FF666666"
StrokeThickness="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5"
>
<Path.RenderTransform>
<RotateTransform Angle="0"/>
</Path.RenderTransform>
</Path>
<ContentPresenter x:Name="HeaderContent"
Margin="4,0,0,0"
ContentSource="Content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="DockPanel.Dock"
Value="Right">
<Setter Property="Data" TargetName="Arrow" Value="M 0 0 L 3 3 L 0 6 "/>
</Trigger>
<Trigger Property="DockPanel.Dock"
Value="Left">
<Setter Property="Data" TargetName="Arrow" Value="M 0 0 L 3 3 L 0 6"/>
</Trigger>
<Trigger Property="DockPanel.Dock"
Value="Top">
<Setter Property="Data" TargetName="Arrow" Value="M 0 0 L 3,6 L 6,0"/>
</Trigger>
<!-- Animate arrow when toggled-->
<Trigger Property="IsChecked"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="180"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Arrow"
Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- MouseOver, Pressed behaviours-->
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Stroke"
Value="#FF3C7FB1"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#222"
TargetName="Arrow"/>
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Stroke"
Value="#FF526C7B"
TargetName="Circle"/>
<Setter Property="StrokeThickness"
Value="1.5"
TargetName="Circle"/>
<Setter Property="Stroke"
Value="#FF003366"
TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Slide Out Content Expander's Template,
Uses: AnimatedExpanderButtonTemp from above,
MultiplyConverter in codebehind-->
<local:MultiplyConverter x:Key="multiplyConverter" />
<ControlTemplate x:Key="RevealExpanderTemp" TargetType="{x:Type Expander}">
<DockPanel>
<!--<Border x:Name="ExpanderButtonBorder" Background="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" DockPanel.Dock="Bottom" Padding="5,3">-->
<ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Stretch" DockPanel.Dock="Bottom"
Template="{StaticResource AnimatedExpanderButtonTemp}"
Content="{TemplateBinding Header}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Background="{Binding Path=Background, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
Padding="0">
</ToggleButton>
<!--</Border>-->
<ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Bottom"
>
<ScrollViewer.Tag>
<sys:Double>0.0</sys:Double>
</ScrollViewer.Tag>
<ContentPresenter x:Name="ExpanderContent" ContentSource="Content"/>
</ScrollViewer>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="ExpandDirection" Value="Right">
<Setter Property="DockPanel.Dock" TargetName="ExpanderButton" Value="Right"/>
<Setter Property="DockPanel.Dock" TargetName="ExpanderContentScrollView" Value="Left"/>
<Setter Property="Width" TargetName="ExpanderContentScrollView">
<Setter.Value>
<MultiBinding Converter="{StaticResource multiplyConverter}">
<Binding Path="ActualWidth" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter Property="DockPanel.Dock" TargetName="ExpanderButton" Value="Top"/>
<Setter Property="DockPanel.Dock" TargetName="ExpanderContentScrollView" Value="Bottom"/>
<Setter Property="Height" TargetName="ExpanderContentScrollView">
<Setter.Value>
<MultiBinding Converter="{StaticResource multiplyConverter}">
<Binding Path="ActualHeight" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ExpandDirection" Value="Left">
<Setter Property="DockPanel.Dock" TargetName="ExpanderButton" Value="Left"/>
<Setter Property="DockPanel.Dock" TargetName="ExpanderContentScrollView" Value="Right"/>
<Setter Property="Width" TargetName="ExpanderContentScrollView">
<Setter.Value>
<MultiBinding Converter="{StaticResource multiplyConverter}">
<Binding Path="ActualWidth" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ExpandDirection" Value="Down">
<Setter Property="Height" TargetName="ExpanderContentScrollView">
<Setter.Value>
<MultiBinding Converter="{StaticResource multiplyConverter}">
<Binding Path="ActualHeight" ElementName="ExpanderContent"/>
<Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsExpanded" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="1"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
Storyboard.TargetProperty="Tag"
To="0"
Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
MultiplyConverter.cs (required for Template)
public class MultiplyConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
double result = 1.0;
for (int i = 0; i < values.Length; i++)
{
if (values[i] is double)
result *= (double)values[i];
}
return result;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new Exception("Not implemented");
}
}
Demo:
<!-- Small demo of Expander Template above-->
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="Orange">
<Expander Template="{StaticResource RevealExpanderTemp}" ExpandDirection="Right"
OverridesDefaultStyle="True"
HorizontalAlignment="Left"
VerticalAlignment="Top" Background="LightGray">
<StackPanel>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
<TextBlock Text="This is Sample Text for Expander" Margin="5"/>
</StackPanel>
</Expander>
</Grid>
<Grid Grid.Row="2" Background="Chocolate" />
</Grid>
The code was not tested fully and there may be bugs.
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>
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?