Question

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.

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?

        <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

Try using a DataTrigger with a RelativeSource for the Binding.

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:

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