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

您可以将 Style 应用到 ToggleButtons 以动画化 Opacity 属性。请参考以下示例标记，您应该可以从中得到启发：

<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 属性设置动画以获得更多 "sliding" 体验：

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

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

Listbox delete item icon animation in WPF

c#

wpf

xaml

listbox

datatemplate