Question

A designer has given me a Silverlight child window that was designed in Expression Blend and uses a Visual State Manager to toggle between two modes. In short, there’s an expand button on the child window that, when clicked, slides down another Grid control with detailed information.

This interaction happens entirely in the XAML. However, I need to enhance it so that if certain conditions are met – say if the user chooses some option, “Always show expanded details” – that when the child window is opened the expanded visual state will be in effect.

I thought this was as simple as calling:

VisualStateManager.GoToState(this, "VisualStateDetails", false);

But that is not working. What am I missing? (I apologize if I’m overlooking something obvious, I’m relatively new to Silverlight and not at all familiar with the Visual State Manager.)

Here is the XAML that has a bit removed for brevity.

<Grid x:Name="LayoutRoot" Margin="2" DataContext="{Binding ProjectNode, Mode=TwoWay}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="EditorWindowStates">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="VisualStateNormal"/>
            <VisualState x:Name="VisualStateDetails">
                <Storyboard>
                    <!-- snip -->
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <VisualStateManager.CustomVisualStateManager>
        <ei:ExtendedVisualStateManager/>
    </VisualStateManager.CustomVisualStateManager>

    <!-- snip -->

And here is a button that, when clicked, expands the details:

<Button ...>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Click">
            <ei:GoToStateAction StateName="VisualStateDetails"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Button>

Thanks!

Answer 1

The issue appears to be that the Visual State Manager does not play nice in a Child window.

This blog entry described the problem and provides two workarounds. The first one (using the ExtendedVisualStateManager class) did the trick for me:

Using Visual State Manager with Silverlight Toolkit’s Child Windows control