WPF using VisualStateManager to animate panels in & out

Question

I'm hoping what I'm trying to do is possible using Visual States...

What I want to do is have a button that toggles a stackPanel between two states: 'In' and 'Out'. I would then call VisualStateManager.GoToState on the button's click event, to toggle between the two states.

The problem I've run into is I can't figure out how to attach states to the StackPanel. It won't let me using Expression Blend. So I'm stuck... Is there anyway to animate in and out this panel using VisualStateManager? (I know I could use Storyboards and create and In and Out animation, but I'd preffer to use States if possible)

I really hope this is possible. Otherwise what is VisualStateManager good for besides doing gimmicky rollover effects on buttons?

Thanks for any help!

Answer 1

just fired up Blend and got this:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="WpfApplication1.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

    <StackPanel x:Name="LayoutRoot">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="PanelState">
                <VisualState x:Name="In"/>
                <VisualState x:Name="Out">
                    <Storyboard>
                        <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="stackPanel">
                            <EasingThicknessKeyFrame KeyTime="0" Value="-65,15,0,0"/>
                        </ThicknessAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <i:Interaction.Behaviors>
            <ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=toggleButton}" Value="True" TrueState="In" FalseState="Out"/>
        </i:Interaction.Behaviors>
        <Button Content="Button" Width="50" HorizontalAlignment="Left" Click="Button_Click"/>
        <StackPanel x:Name="stackPanel" Height="100" HorizontalAlignment="Left" Margin="0,15,0,0">
            <TextBlock><Run Text="Funnytext"/></TextBlock>
        </StackPanel>
        <ToggleButton x:Name="toggleButton" Content="Toggle" Width="50" HorizontalAlignment="Left"/>
    </StackPanel>
</Window>

and code behind:

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
    var sgs=VisualStateManager.GetVisualStateGroups(LayoutRoot);
    var sg=sgs[0] as VisualStateGroup;
    VisualStateManager.GoToElementState(LayoutRoot, ((VisualState) sg.States[sg.CurrentState == sg.States[0]?1:0]).Name,true);
}

(didn't know what stackpanel you meant so i just included two)

EDIT: my bad, didn't notice I didn't include the clickhandler. For for your convenience I included an example to use a Togglebutton to toggle the states...