WPF ListItem模板 - 淡入的按钮

I have a ListBox with an ItemTemplate (shown below) that when the mouse is over an item, a button is displayed that will fire a Delete Command.

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

This works, but what I'd like is for the button to "fade in" after the mouse has been over the listitem for a couple of seconds. How can I achieve this?

这是有效的，但我想要的是在鼠标已经超过listitem几秒后按钮“淡入”。我怎样才能做到这一点？

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

1 个解决方案

#1

Try using a DataTrigger with a RelativeSource for the Binding.

尝试将DataTrigger与RelativeSource一起用于绑定。

Here's a sample ... mouse over anywhere on the StackPanel for 2 seconds or more and the hidden button will fade in. It'll disappear when the mouse is moved off. Hopefully it'll work within your ListBox ItemTemplate:

这是一个示例...鼠标悬停在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>