How to move with an animation a ContentControl WPF

Question

I'm trying to simulate this effect on an OnLoad page:

The blue square represents the beggining transaction, and the red one the end of the animation.

In WPF, that square is for me a ContentControl, and I have tried this:

<Window x:Class="WPFShapes.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="802" Width="1557" WindowState="Maximized" WindowStyle="None" WindowStartupLocation="CenterScreen">
<Window.Resources>
    <!-- This effect makes the main container appear the first time smoothly -->
    <Style TargetType="Border" x:Key="animatedBorder">
        <Setter Property="Opacity" Value="0.0" />
        <Style.Triggers>
            <Trigger Property="Opacity" Value="0.0">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.0" To="1.0" Duration="0:0:0.4"/>
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="900*" />
        <RowDefinition Height="150" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="460" />
        <ColumnDefinition Width="850*" />
        <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>
<ContentControl Grid.Column="1" Grid.Row="1" Margin="150,0,150,0" Name="contentControl1" Width="Auto" Height="650" >
        <ContentControl.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </ContentControl.RenderTransform>
        <Border Style="{StaticResource animatedBorder}"
            Name="movableBorder"
            Background="WhiteSmoke"
                >
            <Border.Effect>
                <DropShadowEffect 
                BlurRadius="10"
                Color="#877b77"
                Opacity="100"
                ShadowDepth="10"
                Direction="-50" />
            </Border.Effect>
        </Border>
    </ContentControl>
</Grid>

My idea was, give the ContentControl a beggining position (the blue square), and when it's loaded, traslate it with a smooth effect from position 1 (blue square) to position 2 (red square). I tried the RenderTransform, but I think I couldn't find enough information and I feel a bit lost.

You can see that I have a ContentControl that has a border that appears with a fade effect. This Border effect happens, but I'm a bit lost on how to make the ContentControl appear as I want.

I don't have any C# code til now.

Any idea on what can I do?

Answer 1

You can use the ThicknessAnimation to animate the Margin of your content control.

Here is an example, it will animate on mouse over, but you will be able to see how to use the ThicknessAnimation

<Window x:Class="WpfApplication11.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="317.3" Width="337" x:Name="UI">
    <Grid>
        <Border BorderBrush="Red" BorderThickness="2" Margin="10,107,60,10">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ThicknessAnimation Storyboard.TargetProperty="Margin" Duration="0:0:1.5" FillBehavior="HoldEnd" From="10,107,60,10" To="36,48,34,69" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
       </Border>
   </Grid>
</Window>