CODEWITHSUNDEEP
layoutuwpstylesdatatemplatevisualstatemanager
M.Kalinski
M.Kalinski

Reputation: 33

[UWP][VisualState] Custom ListViewItem hover presentation

I would like to add hover actions to a ListViewItem, but it seems that in the ListViewItem.DataTemplate the "PointerOver" state is not triggered. I was creating a custom ItemContainerStyle but in this style, I can just set specific properties related to the TargetType 'ListViewItem'. In my case, I would like to have a button which is only visible, when the user hover over the item.

Image example

I want to use the VisualStateManager, but maybe I havn´t understood the concept behind styles, templates and user interaction with bindings in between.

Are there good references/documentation for this?

Thank you in advance

Upvotes: 0

Views: 219

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32785

[UWP][VisualState] Custom ListViewItem hover presentation

For your requirement, the better way is XamlBehaviors to edit the property witin DataTempate. For the detail please refer the following code.

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

Upvotes: 0

Related Questions