WPF列表項模板 - 按鈕淡入

Question

我有一個ItemTemplate（如下圖所示），當鼠標移動到某個項目，則會顯示一個按鈕，將觸發一個DELETE命令的列表框。

這工作，但我想是的按鈕，「淡入」鼠標已經在列表項的幾秒鐘後。我怎樣才能做到這一點？

 <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

嘗試使用DataTrigger和RelativeSource進行綁定。

下面是一個示例...鼠標上的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>