UWP - 当指针位于 ListViewItem 上时 ListView 显示按钮

Question

有一个 ListView，其项目包含可见性设置为 Collapsed 的 Button。 当指针悬停在包含该按钮的 ListViewItem 上时，如何使按钮可见？ 使用VisualStateManager可以实现吗？

我尝试过以下方法，但到目前为止没有运气。可以不使用C#而仅使用xaml来完成吗？

<ListView x:Name="Items" Width="500" Height="700">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OkButtom" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="400"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="Some Text" Grid.Column="0"/>
                            <Button x:Name="OkButtom" Visibility="Collapsed" Content="OK" Grid.Column="1"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Answer 1

VisualStateManager 不会以这种方式工作。

有多种方法可以实现它，以下是使用 XAML Behaviours 的方法。 从 nuget 添加 Microsoft.Toolkit.Uwp.UI.Behaviors，然后为

PointerEntered

和

PointerExited

事件添加 EventTriggerBehaviors，以便它们调用 ChangePropertyAction 来更改按钮的可见性。

<ListView.ItemTemplate>
    <DataTemplate>
        <Border xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
                xmlns:Interactivity="using:Microsoft.Xaml.Interactivity">
            <Grid Width="500" Background="Transparent">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="400"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0"
                           Text="Some Text"/>
                <Button Grid.Column="1"
                        x:Name="OkButtom"
                        Content="OK"
                        Visibility="Collapsed"/>

                <Interactivity:Interaction.Behaviors>
                    <Core:EventTriggerBehavior EventName="PointerEntered">
                        <Core:ChangePropertyAction TargetObject="{Binding ElementName=OkButtom}"
                                                   PropertyName="Visibility" Value="Visible"/>
                    </Core:EventTriggerBehavior>
                    <Core:EventTriggerBehavior EventName="PointerExited">
                        <Core:ChangePropertyAction TargetObject="{Binding ElementName=OkButtom}"
                                                   PropertyName="Visibility" Value="Collapsed"/>
                    </Core:EventTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </Grid>
        </Border>
    </DataTemplate>
</ListView.ItemTemplate>