如何用動畫ContentControl中WPF

Question

我試圖模擬一個OnLoad頁面上這種影響移動：

藍色方塊代表beggining事務，而紅色的結束動畫。

在WPF中，這方是我的ContentControl，我已經試過這樣：

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

我的想法是，給ContentControl一個beggining位置（藍色方塊），而當它被加載，從位置1（藍色方塊）到位置2（紅色方塊）的平滑效果。我嘗試了RenderTransform，但我想我找不到足夠的信息，並且感覺有點失落。

你可以看到我有一個ContentControl，它有一個帶有淡入淡出效果的邊框。這Border的影響發生，但我有點失去了如何使ContentControl顯示爲我想要的。

我現在還沒有任何C＃代碼。

有什麼想法，我能做些什麼？

Answer 1

您可以使用ThicknessAnimation爲內容控件的Margin設置動畫。

下面是一個例子，這將在動畫上的鼠標，但你可以看到如何使用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>