列表框删除项目图标动画在WPF

Question

我有一个ListBox与下面的模板：

<ListBox.ItemTemplate> 
    <DataTemplate> 
     <Grid HorizontalAlignment="Stretch"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition 
        Width="1*" /> 
       <ColumnDefinition 
        x:Name="AnimeatedGrid" 
        Width="Auto" /> 
      </Grid.ColumnDefinitions> 
      <StackPanel 
       Orientation="Horizontal"> 
       <ToggleButton ... /> 
       <ToggleButton ... /> 
       <TextBlock 
        VerticalAlignment="Center" 
        Text="{Binding Name}" /> 
      </StackPanel> 
      <StackPanel 
       Grid.Column="1" 
       Orientation="Horizontal"> 
       <ToggleButton ... /> 
       <ToggleButton ... /> 
      </StackPanel> 
     </Grid> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

我想显示的最后两个按钮只有当鼠标移动到每个列表框项目，具有滑动动画，如果可能。我如何在XAML中创建这样的动画？

Answer 1

您可以将样式应用于切换按钮的动画不透明度属性。请参考下面的示例标记，应该给你的想法：

<ListBox.ItemTemplate> 
    <DataTemplate> 
     <DataTemplate.Resources> 
      <Style x:Key="style" TargetType="ToggleButton"> 
       <Setter Property="Opacity" Value="0" /> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" 
           Value="True"> 
         <DataTrigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
             From="0" To="1" Duration="0:0:1" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
             From="1" To="0" Duration="0:0:1" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </DataTrigger.ExitActions> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </DataTemplate.Resources> 
     <Grid HorizontalAlignment="Stretch"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="1*" /> 
       <ColumnDefinition x:Name="AnimeatedGrid" Width="Auto" /> 
      </Grid.ColumnDefinitions> 
      <StackPanel Orientation="Horizontal"> 
       <ToggleButton /> 
       <ToggleButton /> 
       <TextBlock VerticalAlignment="Center" Text="{Binding Name}" /> 
      </StackPanel> 
      <StackPanel Grid.Column="1" Orientation="Horizontal"> 
       <ToggleButton Content="A" Style="{StaticResource style}" /> 
       <ToggleButton Content="B" Style="{StaticResource style}" /> 
      </StackPanel> 
     </Grid> 
    </DataTemplate> 
</ListBox.ItemTemplate> 

或者，您也可以应用的RenderTransform是的ToggleButtons是动画和动画TranslateTransform的X属性来获取更多的“滑动”的经验：

<ListBox.ItemTemplate> 
    <DataTemplate> 
    <DataTemplate.Resources> 
     <Style x:Key="style" TargetType="ToggleButton"> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" 
          Value="True"> 
        <DataTrigger.EnterActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="-50" To="0" Duration="0:0:1" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.EnterActions> 
        <DataTrigger.ExitActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="0" To="-50" Duration="0:0:1" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.ExitActions> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </DataTemplate.Resources> 
    <Grid HorizontalAlignment="Stretch"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition x:Name="AnimeatedGrid" Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <StackPanel Orientation="Horizontal"> 
      <ToggleButton /> 
      <ToggleButton /> 
      <TextBlock VerticalAlignment="Center" Text="{Binding Name}" /> 
     </StackPanel> 
     <StackPanel Grid.Column="1" Orientation="Horizontal"> 
      <ToggleButton Content="A" Style="{StaticResource style}"> 
       <ToggleButton.RenderTransform> 
        <TranslateTransform X="-50"/> 
       </ToggleButton.RenderTransform> 
      </ToggleButton> 
      <ToggleButton Content="B" Style="{StaticResource style}"> 
       <ToggleButton.RenderTransform> 
        <TranslateTransform X="-50"/> 
       </ToggleButton.RenderTransform> 
      </ToggleButton> 
     </StackPanel> 
    </Grid> 
    </DataTemplate> 
</ListBox.ItemTemplate>