列表框刪除項目圖標動畫在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>