WPF使用VisualStateManager在&中设置面板动画出去 [英] WPF using VisualStateManager to animate panels in & out

问题描述

我希望使用视觉状态可以实现我想做的事情...

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

我想做的是有一个按钮，可以在两种状态(入"和出")之间切换stackPanel.然后，我将在按钮的click事件上调用VisualStateManager.GoToState，以在两种状态之间切换.

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.

我遇到的问题是我不知道如何将状态附加到StackPanel.它不会让我使用Expression Blend.所以我被困住了...是否可以使用VisualStateManager对这个面板进行动画制作? (我知道我可以使用情节提要和创建动画以及动画，但如果可能的话，我会尽量使用状态)

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)

我真的希望这是可能的.否则，VisualStateManager除了对按钮进行花哨的翻转效果外，还有什么用?

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

感谢您的帮助！

推荐答案

只是启动了Blend并得到了它:

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>

和后面的代码:

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);
}

(不知道您的意思是什么stackpanel，所以我只添加了两个)

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

我不好，没有注意到我没有包括clickhandler.为了方便起见，我提供了一个使用Togglebutton切换状态的示例...

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...

这篇关于WPF使用VisualStateManager在&中设置面板动画出去的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！