WPF ListItem 模板 - 淡入的按钮

Question

我有一个带有 ItemTemplate 的 ListBox（如下所示），当鼠标悬停在某个项目上时，会显示一个按钮，该按钮将触发删除命令。

这可行，但我希望在鼠标在列表项上停留几秒钟后按钮“淡入”。我怎样才能做到这一点？

        <ListBox.ItemTemplate>
            <DataTemplate d:DesignSource="{d:DesignInstance quizCompanion:Question}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40"></ColumnDefinition>
                        <ColumnDefinition Width="16"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Path=Number}"></TextBlock>
                    <Button 
                        Content="x" Grid.Column="1"
                        Command=MyDeleteCommand>
                        <Button.Style>
                            <Style TargetType="Button">
                                <Setter Property="Visibility" Value="Hidden"></Setter>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsMouseOver}" Value="True">
                                        <Setter Property="Visibility" Value="Visible" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Button.Style>
                    </Button>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

Answer 1

尝试使用带有 RelativeSource 的 DataTrigger 进行绑定。

这是一个示例... 将鼠标悬停在 StackPanel 上的任意位置 2 秒或更长时间，隐藏的按钮将淡入。当鼠标移开时它会消失。希望它可以在您的 ListBox ItemTemplate 中工作：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Grid>
      <StackPanel Height="100" Background="Yellow">
         <TextBlock Text="Mouse over the yellow area to see the button"/>
         <Button Width="250" Height="50" HorizontalAlignment="Left" Opacity="0">
            <Button.Style>
               <Style>
                  <Style.Triggers>
                     <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type StackPanel}}}" Value="True">
                        <DataTrigger.EnterActions>
                           <BeginStoryboard Name="Fade">
                              <Storyboard>
                                 <DoubleAnimationUsingKeyFrames Duration="0:0:3" Storyboard.TargetProperty="Opacity">
                                    <LinearDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                                    <LinearDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
                                 </DoubleAnimationUsingKeyFrames>
                              </Storyboard>
                           </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                           <StopStoryboard BeginStoryboardName="Fade"/>
                        </DataTrigger.ExitActions>
                     </DataTrigger>
                  </Style.Triggers>
               </Style>
            </Button.Style>
         </Button>
      </StackPanel>
   </Grid>
</Page>