UWP ListviewItem Customize Pointer Events preserving Drag & Drop functionality - xaml

Question

Following this question, I'm with the same and other doubts.
Like the user #fipcurren88 I were using Buttons inside ListView ItemTemplate to customize the behavior of pointer events (Pointer Over and Pressed). This is the way I usually do it until I found Drag and Drop didn't work and using a Button inside a ItemTemplate is the wrong approach (like #Filip Skakun mentioned in the same question).
Removing the custom Button and using Itemtemplate directly with the content I want (an Image for example - the custom Button content) I didn't knew how to set the background colors for other states (pointer over and pressed for example). I found out the solution using ListViewItemPresenter in the ItemContainerStyle were I can set different backgrounds to each Pointer Event.
But, I lost the PointerDownThemeAnimation on the Item and I don't know how to get it back. Using a Button is easy, but it affects the Drag and Drop functionality.
This is the Problem Number 1.
This works with simple Items (a single Image), but imagine I have a more complex Item (a Image, a Grid and a TextBlock inside the Grid). I want to change the Grid Background (or the Textblock Foreground) while Pointer is over and/or while the pressed event.
In this case I know the ListViewItemPresenter solution will not work. I need a more specific way to define the different states (VisualStateManager, Common States). Using a custom Button will affect the Drag and Drop functionality (the starting point of the other thread).
What can I do?!
Let's call this Problem Number 2.
Any UWP/XAML Expert that can clear me mind? Thank you.

Answer 1

These requests can all be done in the xaml code by modifying the ListViewItem styles and templates, and doing this will not affect the Drag and Drop function of ListView.
For your both questions, you can copy the style of x:Key="ListViewItemExpanded" into your Page.Resource and remove the x:Key="ListViewItemExpanded", so will this style be applied to all the ListViewItems in your page.
If you have Grid, Image, and TextBlock together in an item, you can set ListView like this:
<ListView x:Name="listView">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Height="100" Width="100" Grid.Column="0"
Source="{Binding image}" />
<TextBlock Grid.Column="1" FontSize="20" Text="{Binding txt}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Then if you want to change the background of the item and the the foreground of your text when your item is in PointerOver or Pressed state, you just need to find this two VisualStates in the style and for example modify them like this:
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
By doing this, the Background targets the background of the whole item, not just the Grid. The Grid will adapt to the controls inside it even you set HorizontalAlignment="Stretch" to the Grid by default, this is because by default it uses ContentPresent like this:
<ContentPresenter x:Name="ContentPresenter"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
If you change the HorizontalAlignment and VerticalAlignment properties in the style to Stretch, your Grid in the DateTemplate will fill the whole item. In this scenario, changing the Background of BorderBackground and the Foreground of ContentPresenter in the visual state can still work.