UWP - ListView show button when PointerOver ListViewItem

Question

There is a ListView with items that contain Button with visibility set to Collapsed. How to make button visible, when pointer over ListViewItem containing that button? Can it be achieved using VisualStateManager?

I have tried following approach, but no luck so far. Can it be done using xaml only wihtout C#?

<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

The VisualStateManager won't work in such a way.

There are several approaches to accomplish it and the following is a way using XAML Behaviors. Add Microsoft.Toolkit.Uwp.UI.Behaviors from nuget and then add EventTriggerBehaviors for PointerEntered and PointerExited events so that they will invoke ChangePropertyAction to change the Button's Visibility.

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