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

您可以将样式应用于动画不透明度属性的ToggleButtons。请参考以下示例标记，该标记可以提供您的想法：

<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属性设置动画，以获得更多的＆＃34;滑动＆＃34;经验：

<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中删除项目图标动画

1 个答案: