Анимация ограничена панелью

Это немного сложно описать, но я постараюсь.
У меня есть элемент управления с изображением и меткой, и он должен иметь 2 состояния ("Большой" и "Маленький").

В состоянии «Большой» изображение должно располагаться по центру вверху элемента управления, а метка должна располагаться по центру внизу (точно так же, как док-станция с изображением и меткой, закрепленной сверху).

В состоянии «Маленький» изображение должно быть меньше и находиться в левом верхнем углу элемента управления, а метка должна быть рядом с ним.

Большое состояние должно выглядеть так:

Большое государство

И маленькое государство:

Малый штат

И сложная часть: когда я переключаюсь между ними, мне нужно, чтобы анимация длилась более 0,3 с.
Я не нашел подходящей панели для этого.

DockPanel — хорошее решение для обоих этих состояний, но он не может анимировать его.
Canvas может анимировать его, но не имеет надлежащего макета. (не может центрировать их так легко).

Как лучше всего это сделать?


animation c# wpf visualstatemanager transitions
person MasterMastic    schedule 27.07.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В WPF нет выравнивания анимации, единственное, что может подойти - это ThicknessAnimation. Но вы можете использовать DiscreteObjectKeyFrame для установки выравнивания. Ниже приведена простая демонстрация, в которой Label устанавливается VerticalAlignment в Bottom:

<Grid>
    <Grid.Triggers>
        <EventTrigger SourceName="Small" RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>                        
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Test" Storyboard.TargetProperty="VerticalAlignment">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                            <DiscreteObjectKeyFrame.Value>
                                <VerticalAlignment>Bottom</VerticalAlignment>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Label x:Name="Test" Content="Test" Width="300" Height="300" Background="Aqua" VerticalAlignment="Top" HorizontalAlignment="Center" />

    <Button Name="Small" Content="Small" Width="100" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" />
</Grid>

Используя его в сочетании со стандартными анимациями, такими как DoubleAnimation, я думаю, вы сможете достичь этой цели.

person Anatoliy Nikolaev    schedule 27.07.2013