WPF - Анимация изменения ориентации стековой панели? - PullRequest
Новая
       20

WPF - Анимация изменения ориентации стековой панели?

10 голосов
/ 31 января 2011

Я пытаюсь создать анимацию, в которой значок (векторная графика xaml на холсте, обернутом в Viewbox) идет от того, что текст (TextBlock) находится под ним.

В настоящее время у меня есть Viewbox и TextBlock в горизонтально ориентированной StackPanel. Я могу изменить ориентацию на вертикальную, но это мгновенное изменение (не плавно анимированное). Я также могу просто установить позицию TextBlock с помощью TranslateTransform (который может быть анимирован), но это трудно сделать повторно (т.е. без жестко заданных значений).

Может кто-нибудь сказать мне, есть ли какой-нибудь WPF-ориентированный способ оживить переход от горизонтальной к вертикальной ориентации на панели стека? Или другой способ, о котором я не думал, чтобы достичь желаемого эффекта?

Спасибо всем!

1 Ответ

4 голосов
/ 31 января 2011

В Blend есть функция под названием FluidLayout , которая может сделать это.

В смеси

  • Создайте новую группу состояний, установите продолжительность перехода и включите макет флюида.
  • Создать два состояния, одно для горизонтального, другое для вертикального.
  • Затем вы можете использовать поведение для переключения между ними.

Если у вас нет Blend, вы можете загрузить SDK , в котором должны быть необходимые файлы Microsoft.Expression.Interactions и System.Windows.Interactivity. Добавьте ссылки на них и попробуйте образец ниже. 

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    x:Class="WpfApplication4.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <VisualStateManager.CustomVisualStateManager>
            <ic:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Orientation" ic:ExtendedVisualStateManager.UseFluidLayout="True">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="00:00:00.3000000"/>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Vertical"/>
                <VisualState x:Name="Horizontal">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="stack" Storyboard.TargetProperty="(StackPanel.Orientation)">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Orientation.Horizontal}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="stack" Margin="8,49,8,8">
            <Button Content="Button"/>
            <Button Content="Button"/>
            <Button Content="Button"/>
            <Button Content="Button"/>
            <Button Content="Button"/>
        </StackPanel>
        <Button HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="H">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ic:GoToStateAction StateName="Horizontal"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button HorizontalAlignment="Left" Margin="109,8,0,0" VerticalAlignment="Top" Width="97" Height="25" Content="V">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ic:GoToStateAction StateName="Vertical"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Window>

Вы можете использовать аналогичный метод для обработки перехода элемента, используя состояния для перемещения элементов или изменив Grid.Row, RowSpan, Col. Вам может понадобиться код, чтобы связать все вместе. Я смотрю на более сложный пример, который опубликую, если разберюсь с проблемами.

...