如何爲網格行高度生成動畫

Question

我有看起來像這樣的示例代碼。

<ItemsControl ItemsSource="{Binding MyDataCollection}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.Style> 
        <Style TargetType="Grid"> 
         <Style.Triggers> 
          <EventTrigger RoutedEvent="MouseEnter"> 
           <EventTrigger.Actions> 
            <BeginStoryboard> 
             <Storyboard> 
              <!--<DoubleAnimation Duration="0:0:0.100" Storyboard.Target="(Grid.RowDefinitions[2])" Storyboard.TargetProperty="Height" From="10" To="0" />--> 
             </Storyboard> 
            </BeginStoryboard> 
           </EventTrigger.Actions> 
          </EventTrigger> 
         </Style.Triggers> 
        </Style> 
       </Grid.Style> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="*"/> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="10"/> 
       </Grid.RowDefinitions> 
       <Image Source="{Binding CurrentImage}" Grid.Row="0" Stretch="Uniform" /> 
       <TextBlock Grid.Row="1" Text="{Binding Title}" TextAlignment="Center" FontSize="16" /> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

我想在MouseEnter事件上設置動畫行高度。在xaml中設置Storyboard.Target的正確語法是什麼？

Answer 1

只需使用ObjectAnimationUsingKeyFrames有一個嘗試。您應該定義更多關鍵幀以使動畫更流暢。

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition x:Name="SecondRow" Height="30"/> 
     <RowDefinition Height="10"/> 
    </Grid.RowDefinitions> 
    <Grid.Triggers> 
     <EventTrigger RoutedEvent="UIElement.MouseEnter"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Duration="0:0:2.000" Storyboard.TargetName="SecondRow" Storyboard.TargetProperty="Height"> 
          <DiscreteObjectKeyFrame KeyTime="0:0:0.000"> 
           <DiscreteObjectKeyFrame.Value> 
            <GridLength>30</GridLength> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
          <DiscreteObjectKeyFrame KeyTime="0:0:0.500"> 
           <DiscreteObjectKeyFrame.Value> 
            <GridLength>32</GridLength> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
          <DiscreteObjectKeyFrame KeyTime="0:0:1.000"> 
           <DiscreteObjectKeyFrame.Value> 
            <GridLength>50</GridLength> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
          <DiscreteObjectKeyFrame KeyTime="0:0:1.500"> 
           <DiscreteObjectKeyFrame.Value> 
            <GridLength>60</GridLength> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
          <DiscreteObjectKeyFrame KeyTime="0:0:2.000"> 
           <DiscreteObjectKeyFrame.Value> 
            <GridLength>60</GridLength> 
           </DiscreteObjectKeyFrame.Value> 
          </DiscreteObjectKeyFrame> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </Grid.Triggers> 
    <Rectangle Grid.Row="1" Fill="LightBlue"/> 
</Grid> 

Answer 2

因爲物業是GridLength類型，你可以不使用DoubleAnimation動畫一個RowDefinition的Height。

您可以按照此處的建議編寫自定義動畫類：https://www.codeproject.com/Articles/18379/WPF-Tutorial-Part-Writing-a-custom-animation-cla。

Animating Grid Column or Grid Row in XAML?

In WPF, has anybody animated a Grid?

如果我把在第三行定義一些自定義的控制，使它像這樣的東西。將我能夠動畫這個自定義控件的高度，以達到相同的效果？

你可以嘗試這樣的事：

<DoubleAnimation Duration="0:0:0.100" 
       Storyboard.Target="{Binding Children[2]}" 
       Storyboard.TargetProperty="Height" 
       From="0" To="100" />