I wrote a style for a button to let it rotate a bit when the mouse is over it. Unfortunately the animation does not start.
I have a created a similar style for another button type in my application which uses the VisualStateManager as well and works perfectly well so I don't think it is a problem with the VSM.
Seems there is a problem with the animation but I can't find the issue.
This is what the style looks like:
<Style x:Key="MyButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
</TransformGroup>
</ContentPresenter.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOverState">
<Storyboard AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimation From="0" To="10" Duration="0:0:1"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
<DoubleAnimation From="10" To="0" Duration="0:0:1" BeginTime="0:0:1"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
<DoubleAnimation From="0" To="-10" Duration="0:0:1" BeginTime="0:0:2"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
<DoubleAnimation From="-10" To="0" Duration="0:0:1" BeginTime="0:0:3"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have also tried
Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(RotateTransform.Angle)"
You have a few problems with this template:
The VisualStateManager.VisualStateGroups elements needs to be the child of your first FrameworkElement, which in this case is a Grid
The VisualState "MouseOverState" should be renamed "MouseOver"
Each storyboard can animate each dependency property once. You have 4 double animations all attempting to animate the Angle property. What you need to use here is a DoubleAnimationUsingKeyframes that has either LinearDoubleKeyframes or EasingDoubleKeyframes.
Here is a working version of this template:
<Style TargetType="Button" x:Key="MyButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Angle" Storyboard.TargetName="content">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="10"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have a custom control whose Animation I want to control. I attempt to update this using VisualStateManager.GoToState but it always returns false in Silverlight and the animation never starts. This works perfectly in WPF though with the same XAML.
The Silverlight code
//to start
retval = ExtendedVisualStateManager.GoToElementState(this.canvasParent, "WorkingState", true);
The WPF code
retval = VisualStateManager.GoToElementState(this.canvasParent, "WorkingState", true);
XAML (common):
<Style TargetType="local:WaitSpinner">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:WaitSpinner">
<Viewbox Visibility="{TemplateBinding Visibility}">
<Canvas RenderTransformOrigin="0.5,0.5" x:Name="CanvasParent" Width="120" Height="120">
<!-- other awesomeness -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Working">
<VisualState x:Name="WorkingState">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:01.3"
RepeatBehavior="Forever" />
</Storyboard>
</VisualState>
<VisualState x:Name="Stop"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Canvas>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Put <VisualStateManager.VisualStateGroups> on the first ControlTemplate child :
<Style TargetType="local:WaitSpinner">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:WaitSpinner">
<Viewbox Visibility="{TemplateBinding Visibility}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Working">
<VisualState x:Name="WorkingState">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="SpinnerRotate"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:01.3"
RepeatBehavior="Forever" />
</Storyboard>
</VisualState>
<VisualState x:Name="Stop"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- ................. -->
Edit : (I full response with your comment) Use VisualStateManager GotoState method with this :
VisualStateManager.GoToState(this, "WorkingState", true);
I am creating multiple buttons with a custom template. Each button is binded to a different thumbnail image, but I want them to all have the same visual state. I created customButtonStyle style and each other button will inherit from this style. It seems however that the visual states are not inherited from customButtonStyle.
Any ideas on why it won't inherit the visuals states? and how would I set each button to its own thumbnail?
Thanks in advance.
Here is my code below:
<Style x:Key="customButtonStyle" TargetType="Button">
<Setter Property="Background" Value="{StaticResource ApplicationButtonBackgroundBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="ControlRoot" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<!--Take one half second to transition to the MouseOver state.-->
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.3"/>
<!-- From Button Press to Normal -->
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<!-- Dpad focus on button-->
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ControlRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="0.85"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.367" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="3"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- Button Press-->
<VisualState x:Name="Pressed"/>
<!-- Disabled -->
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ControlRoot"/>
</Storyboard>
</VisualState>
<!-- End of stateGrouop -->
</VisualStateGroup>
<!-- Focus states -->
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusFill">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- Draw border around button that is in focus -->
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<!--<Image x:Name="ButtonImage" Width="208" Height="156" Source="{Binding tile1}"/>-->
<Rectangle x:Name="FocusFill" Fill="{StaticResource ApplicationButtonHoverBackgroundBrush}" Visibility="Collapsed"/>
<Rectangle x:Name="MouseOverFill" Fill="{StaticResource ApplicationButtonHoverBackgroundBrush}" Visibility="Collapsed"/>
</Grid>
</Border>
<Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="{StaticResource ApplicationButtonFocusBackgroundBrush}" BorderThickness="5" Margin="-2.5"/>
<Border x:Name="MouseOverVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="{StaticResource ApplicationButtonFocusBackgroundBrush}" BorderThickness="5" Margin="-2.5"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
///////////////////////////
<Style x:Key="tile6" TargetType="Button" BasedOn="{StaticResource customButtonStyle}">
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,0,1,1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image x:Name="ButtonImage" Width="208" Height="156" Source="{Binding tile1}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
No. As you can see for yourself, the visual states reside in the control template, and you're providing a whole new one.
You can try to place the states as resources and references them from each template, but I would advise against it. Since you have two separate templates they are likely to fork at some stage, in which reuse won't be an option. IMHO it's best to just copy them. Would make life easier in Blend as well.
I'm working on a button control in silverlight which can be in various states. Each state has its own look, different colours and even different images on the button.
I was wondering how I could modify the visual properties of the control from codebehind?
Here's the xaml:
<Style x:Key="MyButton" TargetType="Button">
<Setter Property="FontSize" Value="10"/>
<Setter Property="Height" Value="22"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Name="RootElement">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:01.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.94"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:01.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.94"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard/>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard/>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border CornerRadius="1,1,1,1" Background="{StaticResource BlueVerticalGradientBrush}" BorderBrush="Red" BorderThickness="1,1,1,1" x:Name="MouseOver" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter x:Name="contentPresenter" Margin="10,0,10,0" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="MinWidth" Value="65"/>
</Style>
Have you tried giving the element and x:Name and accessing properties in code behind with the name?
You may want to look into using the VisualStateManager.GoToState or the VisualStateManager.GoToElementState Methods. I am not aware personally of a method to modify a style that is defined in the xaml.
I am able to change the colour of a silverlight Pie chart or change the tooltip design. What i want is to do both.
This is the code i have for my chart:
<charts:Chart x:Name="MyChart" Title="MyChart">
<charts:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="Width" Value="0"/>
</Style>
</charts:Chart.LegendStyle>
<charts:PieSeries
ItemsSource="{Binding}"
IndependentValuePath="Title"
DependentValuePath="Value"
SelectionChanged="PieSeries_SelectionChanged"
DataPointStyle="{StaticResource MyPieDataPointTemplate}">
</charts:PieSeries>
</charts:Chart>
And here is the resource for myPieDataPointTemplate:
<Style x:Key="MyPieDataPointTemplate" TargetType="toolkit:PieDataPoint">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:PieDataPoint">
<Grid x:Name="Root" Opacity="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="MouseOverHighlight"
Storyboard.TargetProperty="Opacity" To="0.6"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="SelectionHighlight"
Storyboard.TargetProperty="Opacity" To="0.6"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="1" />
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0"/>
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="0" />
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Slice" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Data="{TemplateBinding Geometry}" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0" ScaleY="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
<ContentControl Content="{TemplateBinding FormattedRatio}"/>
</StackPanel>
</ToolTipService.ToolTip>
</Path>
<Path x:Name="SelectionHighlight" IsHitTestVisible="False" Opacity="0" Fill="Red" Data="{TemplateBinding GeometrySelection}"/>
<Path x:Name="MouseOverHighlight" IsHitTestVisible="False" Opacity="0" Fill="White" Data="{TemplateBinding GeometryHighlight}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have the following listbox below which binds to a database table of image URL's. When the application is running, it is possible to click on each individual image, and witness a light blue selection box appear on the image (you can tell when each individual image is selected as its clicked). What I would like to be able to do is perform a zoom upon clicking each image. Does anyone know of a way in which I could do this by amending the code I am currently using below!? (The reason for this is that I need to display the images in a horizontal listbox, which is what this code does.)
<ListBox x:Name="list1" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5" Width="400" d:LayoutOverrides="HorizontalAlignment">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<Image Width="100" Height="100" Stretch="Fill" Source="{Binding LowResUrl}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can use this snippet you are currently using ItemTemplate there is one more template GeneratedItemContainer(ItemContainerStyle)
<Style x:Key="ListBoxItemStyleContainerWide" TargetType="ListBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="grid" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1"/>
<ColorAnimation BeginTime="00:00:00" Duration="00:00:00.2000000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" To="#FFF6BD43"/>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#00F6BD43"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(UIElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="fillColor" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF6BD43"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" RadiusX="10" RadiusY="10" IsHitTestVisible="False" Width="950" Height="74" Stroke="Black" StrokeThickness="3"/>
<Rectangle x:Name="fillColor2" Fill="#FFEEDEA7" RadiusX="5" RadiusY="5" IsHitTestVisible="False" Opacity="0"/>
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Rectangle x:Name="FocusVisualElement" StrokeThickness="1" RadiusX="10" RadiusY="10" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can access the ListBoxItem control's visualStateManager by overriding the ControlTemplate. In Expression Blend select a ListBoxItem and "Edit a copy" of the Template. This will copy the old ListBoxItem control's style and control template to givey ou a nice starting place to modify what happens on key events that this ListBox control is setup to handle.
After doing this you can apply animations within the visual state manager on a wide variety of events (Hover, Selection, disabled, etc).
If you are data binding your ItemsSource property and don't have literal ListBoxItems to generate a ListBoxItem Style to start from, just create a new ListBox and add a ListBoxItem to it to generate the Style+ControlTemplate from. Once you generate the style, you can change your nice data bound ListBox Item's control template by specifying the newly created resource on your data bound ListBox control's ItemContainerStyle property.