UWP - PointerOver ListViewItem 时的 ListView 显示按钮

UWP - ListView show button when PointerOver ListViewItem

提问人:Nazarii Krypiak 提问时间:11/16/2023 更新时间:11/16/2023 访问量:26

问:

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

我尝试过以下方法,但到目前为止没有运气。是否可以仅使用 xaml 而不使用 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>
C# .net-core UWP-XAML

评论


答:

0赞 emoacht 11/16/2023 #1

VisualStateManager 不会以这种方式工作。

有几种方法可以实现它,下面是一种使用 XAML 行为的方法。 从 nuget 添加 Microsoft.Toolkit.Uwp.UI.Behaviors,然后为 和 事件添加 EventTriggerBehaviors,以便它们调用 ChangePropertyAction 来更改按钮的可见性。PointerEnteredPointerExited

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