VisualStateManager does nothing (silverlight)

Question

Hi,

I am building a custom control using studio 2010 and silverlight 4. I am trying to use the visual state manager.

With the following xml:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:SilverView">
    <Style TargetType="controls:ScaleImage">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:ScaleImage">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="MouseOver"
                                                      GeneratedDuration="0:0:.5"/>
                                    <VisualTransition To="Normal"
                                                      GeneratedDuration="0:0:.5"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="img"
                                        Storyboard.TargetProperty="Width"
                                        From="50" To="100"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation
                                        Storyboard.TargetName="img"
                                        Storyboard.TargetProperty="Width"
                                        From="50" To="100"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image Name="img" Width="50">
                            <Image.RenderTransform>
                                <ScaleTransform x:Name="scale"/>
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Nothing happens when I mouse over the image. How do I get the image to enlarge when the mouse is over it?

Thanks

Answer 1

In the XAML above you are only defining state groups and states with names like "MouseOver". You are not actually causing the state to change, as they are apparently not connected to any events.

If you are not already, try using GoToState behaviours to trigger the state changes of your control.

Do you have any more code or XML that triggers a state change?

Answer 2

The VisualStateManager.VisualStateGroups attached property defines the set of visual states however the names of the groups and the names of the states are just names, they do not actually enable the functionality they describe automatically.

It's up to code in your control to decide when it is in a specific state and then inform the VisualStateManager of that choice. You do that with code like this:-

VisualStateManager.GotoState(this, "MouseOver", true);

Typically you would collect information like whether the mouse is over the control via the various control events and have a central UpdateVisualState function that sets all the appropriate states.