Develop Reference

ControlTemplate MahApps.Metro VisualStateManager State Transition Problems

I am experimenting with the radio button control template from MahApps.Metro.
My App.xaml looks the same as in http://mahapps.com/guides/quick-start.html
I copied the control template via VS context menu, my window looks like this:
<controls:MetroWindow x:Class="MahAppsRadioButtonControlTemplateWrapTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
Title="MainWindow" Height="350" Width="525">
<controls:MetroWindow.Resources>
<Style x:Key="RBStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource LabelTextBrush}"/>
<Setter Property="FontSize" Value="{DynamicResource ContentFontSize}"/>
<Setter Property="FontFamily" Value="{DynamicResource ContentFontFamily}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="6,0,0,0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<!-- Uncomment the line below to break the radio button -->
<!-- <Grid> -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftCol" Width="18"/>
<ColumnDefinition x:Name="RightCol" Width="*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="hover"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pressed"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.55" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="disabled"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Checked1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="focused"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="PART_CHECKBOX">
<Rectangle Fill="{DynamicResource TransparentWhiteBrush}" Margin="-6,0"/>
<Ellipse x:Name="normal" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="1" Stroke="{DynamicResource CheckBoxBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="hover" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource CheckBoxMouseOverBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="pressed" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource HighlightBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="focused" Fill="{DynamicResource WhiteBrush}" Height="18" Opacity="0" Stroke="{DynamicResource HighlightBrush}" StrokeThickness="1" Width="18"/>
<Ellipse x:Name="Checked1" Fill="{DynamicResource HighlightBrush}" Height="10" Opacity="0" Width="10"/>
<Ellipse x:Name="disabled" Fill="{DynamicResource SemiTransparentWhiteBrush}" Height="18" Opacity="0" StrokeThickness="1" Width="18"/>
</Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<!-- Uncomment the line below to break the radio button -->
<!-- </Grid> -->
<ControlTemplate.Triggers>
<Trigger Property="controls:ControlsHelper.ContentDirection" Value="RightToLeft">
<Setter Property="Padding" Value="0,0,6,0"/>
<Setter Property="Width" TargetName="LeftCol" Value="*"/>
<Setter Property="Width" TargetName="RightCol" Value="18"/>
<Setter Property="Grid.Column" TargetName="PART_CHECKBOX" Value="1"/>
<Setter Property="Grid.Column" TargetName="contentPresenter" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</controls:MetroWindow.Resources>
<Grid>
<StackPanel>
<RadioButton Style="{DynamicResource RBStyle}">Foo</RadioButton>
<RadioButton>Bar</RadioButton>
<RadioButton>Baz</RadioButton>
</StackPanel>
</Grid>
</controls:MetroWindow>
If I wrap the outer Grid of the control template within another Grid control, the radio button works normally but the checked mark never shows.
Can someone explain me what's going on?

So like I was saying, it's an interesting quirk whereby the element (in this case your transition targets) that's in a ControlTemplate will only inherit from the outer-most parent FrameworkElement. Which, is one of those things that can really confuse ya when you're sitting there thinking "wtf? all I did was add a damn Grid around it..." Right?
For more info checkout this doc article about Changing the Visual Structure of a Control and you can get the full explanation.
Anyway, glad it helped!

List Box data template with style - On tap change the background color

I am working on Windows Phone 8 application, I have List box with Items in it, for the items i have used DataTemplate, now i have a style as well which i have applied to List as ItemContainerStyle.
Basically this is how it is , i have a list item with default color say grey,now when i tap on that item the color grey should change to red, so that it indicates to user that he has selected that item.
My code works but its not applying as background, instead its being applied as foreground.
List box :
<ListBox Name="listBox"
HorizontalAlignment="Stretch"
ItemTemplate="{StaticResource DefaultTemplate}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>
Data template:
<DataTemplate x:Key="DefaultTemplate">
<Border
Background="#e3e8f0"
Margin="0,2,0,0"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid Width="Auto"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock
Text="{Binding Path=Text}"
HorizontalAlignment="Center"
Padding="10,25,10,25"
TextWrapping="Wrap"
MinHeight="80"
VerticalAlignment="Center"
TextAlignment="Center"
Style="{StaticResource TextStyle}"
Foreground="Black"/>
</Grid>
</Border>
</DataTemplate>
ListBoxItemStyle:
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseLeave">
<Storyboard>
<DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="fillColor" Fill="#d2f2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="fillColor2" Fill="#d2f2f9" IsHitTestVisible="False" RadiusY="1" RadiusX="1" Margin="0,3" Opacity="0"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" StrokeThickness="1" Visibility="Collapsed" Margin="0,3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

You don't need to override ControlTemplate for that. Override system highlight brush for your ListBox by placing it under ListBox resources if all you want is to change highlight brush for your listBox.
<ListBox>
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Red"/>
</ListBox.Resources>
</ListBox>

Update: Okay, since you didn't specify explicitly that you are using Silverlight which is a subset of WPF framework, not all of its API is the same.
For windows phone you want to do something like this
<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ContentContainer"
Storyboard.TargetProperty="Foreground"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="White"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="Background"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="YellowGreen"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel x:Name="border" Orientation="Horizontal">
<CheckBox x:Name="checkBox" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=IsSelected, Mode=TwoWay}" DataContext="{TemplateBinding
IsSelected}" Visibility="{Binding Converter={StaticResource
BooleanToVisibilityConverter}}"
HorizontalContentAlignment="{TemplateBinding
HorizontalContentAlignment}"/>
<ContentControl x:Name="ContentContainer" ontentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Foreground="{TemplateBinding
Foreground}" HorizontalContentAlignment="{TemplateBinding
HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding
VerticalContentAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
then set the style for the ListBox
<ListBox x:Name="databoundListBox" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" SelectionMode="Multiple"/>

Does basedOn inherit visual states as well?

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.

Silverlight start Animation on MouseOverState does not work

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>

C# Silverlight - Zoom into Horizontal Listbox Image Items

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.