WPF использует VisualStateManager для анимации панелей в и из - PullRequest
Новая
       22

WPF использует VisualStateManager для анимации панелей в и из

1 голос
/ 23 февраля 2011

Я надеюсь, что то, что я пытаюсь сделать, возможно с помощью визуальных состояний ...

То, что я хочу сделать, - это кнопка, которая переключает стековую панель между двумя состояниями: «В» и «Вне». Затем я вызову VisualStateManager.GoToState для события нажатия кнопки, чтобы переключаться между двумя состояниями.

Panel States

Проблема, с которой я столкнулся, заключается в том, что я не могу понять, как присоединять состояния к StackPanel. Это не позволит мне использовать Expression Blend. Так что я застрял ... Есть ли способ анимировать эту панель с помощью VisualStateManager? (Я знаю, что мог бы использовать раскадровки и создавать анимацию и вход и выход, но я бы предпочел использовать Штаты, если это возможно)

Я действительно надеюсь, что это возможно. В противном случае, что VisualStateManager хорош для того, чтобы делать бесполезные эффекты ролловера для кнопок?

Спасибо за любую помощь!

1 Ответ

2 голосов
/ 23 февраля 2011

только что запустил Blend и получил это: 

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

(не знал, какую стековую панель вы имели в виду, поэтому я просто включил две)

РЕДАКТИРОВАТЬ: мой плохой, не заметил, я не включил обработчик кликов. Для вашего удобства я включил пример использования тумблера для переключения состояний ...

...