[UWP][VisualState] 自定义 ListViewItem 悬停呈现

Question

我想向 ListViewItem 添加悬停动作，但似乎在 ListViewItem.DataTemplate 中未触发 "PointerOver" 状态。我正在创建自定义 ItemContainerStyle，但在这种样式中，我只能设置与 TargetType 'ListViewItem' 相关的特定属性。在我的例子中，我想要一个只有在用户将鼠标悬停在项目上时才可见的按钮。

我想使用 VisualStateManager，但可能我还没有理解样式、模板和用户交互与两者之间的绑定背后的概念。

有什么好的references/documentation吗？

提前致谢

Answer 1

[UWP][VisualState] 自定义 ListViewItem 悬停呈现

根据您的要求，更好的方法是 XamlBehaviors 在 DataTempate 中编辑属性。详情请参考以下代码

<ListView x:Name="MyListView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Name="GridPanel">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="InfoTextBlock" Text="{Binding}" />
                <TextBlock
                    x:Name="FlagTextBlock"
                    Grid.Column="1"
                    Text="Hover"
                    Visibility="Collapsed"
                    >
                    <Interactivity:Interaction.Behaviors>
                        <Interactions:EventTriggerBehavior EventName="PointerEntered" SourceObject="{Binding ElementName=GridPanel}">
                            <Interactions:ChangePropertyAction
                                PropertyName="Visibility"
                                TargetObject="{Binding ElementName=FlagTextBlock}"
                                Value="Visible"
                                />
                            <Interactions:ChangePropertyAction
                                PropertyName="Foreground"
                                TargetObject="{Binding ElementName=InfoTextBlock}"
                                Value="Red"
                                />
                        </Interactions:EventTriggerBehavior>

                        <Interactions:EventTriggerBehavior EventName="PointerExited" SourceObject="{Binding ElementName=GridPanel}">
                            <Interactions:ChangePropertyAction
                                PropertyName="Visibility"
                                TargetObject="{Binding ElementName=FlagTextBlock}"
                                Value="Collapsed"
                                />
                            <Interactions:ChangePropertyAction
                                PropertyName="Foreground"
                                TargetObject="{Binding ElementName=InfoTextBlock}"
                                Value="Black"
                                />
                        </Interactions:EventTriggerBehavior>
                    </Interactivity:Interaction.Behaviors>
                </TextBlock>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>Hello Test</x:String>
    <x:String>Hello Test</x:String>
    <x:String>Hello Test</x:String>
</ListView>

[UWP][VisualState] 自定义 ListViewItem 悬停呈现

[UWP][VisualState] Custom ListViewItem hover presentation

layout

uwp

styles

datatemplate

visualstatemanager