[UWP] [VisualState] Настраиваемая презентация ListViewItem

Question

Я хотел бы добавить действия при наведении курсора на ListViewItem, но кажется, что в шаблоне ListViewItem.DataTemplate состояние "PointerOver" не вызывается. Я создавал пользовательский ItemContainerStyle, но в этом стиле я могу просто установить определенные c свойства, связанные с TargetType 'ListViewItem'. В моем случае я хотел бы иметь кнопку, которая видна только когда пользователь наводит курсор на элемент.

Я хочу использовать VisualStateManager, но, возможно, я не понял концепцию стилей, шаблонов и взаимодействия пользователя с привязками между ними.

Есть хорошие ссылки / документация для этого?

Заранее спасибо

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>