Animation limited by panel

Question

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.

The big state should look like so:

And the small state:

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

Answer 1

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>

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