动画由人造板有限公司 [英] Animation limited by panel

问题描述

这是一个有点很难形容，但我会尽我所能。

我有一个图像和一个标签控件，它需要有2个国家（大和小）。

It's a little hard to describe but I'll try my best.
I have a control which has an image and a label and it needs to have 2 states ("Big", and "Small").

在大的状态下，图像应在控件的顶部为中心，标签应低于中心（就像用图像的码头，停靠到顶部的标签）。

On the "Big" state the image should be centered at the top of the control, and the label should be center below (Just like a dock with an image and a label docked to the top).

在小状态的形象应该是在控制的左上角小，和标签应是正确的旁边。

On the "Small" state the image should be smaller and at the top left of the control, and the label should be right next to it.

大国家应该像这样：

和一个小国：

和棘手的问题：当我在它们之间切换我需要它在0.3秒的动画

没有面板，我发现适合这个。

And the tricky part: when I switch between them I need it to animate over 0.3s.
There is no panel I found suitable for this.

DockPanel中是这两种状态的一个很好的解决方案，但它不能动画吧。

画布可以动画，但没有一个适当的布局（可以不那么容易居中它们）。

DockPanel is a good solution for both of these states, but it can't animate it.
Canvas can animate it, but doesn't have a proper layout (can't center them so easily).

什么是做到这一点的最好方法是什么？

What would be the best way to do it?

推荐答案

在WPF没有动画对齐，能想出的唯一的东西 - 它 ThicknessAnimation 。但是你可以使用 DiscreteObjectKeyFrame 来设置对齐。下面是一个简单的演示，在其中标签设置 VerticalAlignment 在底：

In WPF no animation alignment, the only thing that can come up - it ThicknessAnimation. But you can use the DiscreteObjectKeyFrame to set the alignment. Below is a simple demonstration in which to Label set VerticalAlignment in 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是，我想你就可以实现这个目标。

Using it in combination with standard animations, such as DoubleAnimation, I think you'll be able to achieve this goal.

这篇关于动画由人造板有限公司的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！