1

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

1 に答える 1

1

バインディングにRelativeSourceでDataTriggerを使用してみてください。

これがサンプルです...StackPanelの任意の場所に2秒以上マウスを置くと、非表示のボタンがフェードインします。マウスを離すと消えます。うまくいけば、ListBoxItemTemplate内で機能します。

<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>
于 2012-11-27T22:46:58.357 に答える