UWP ListView - DragOver not called anymore - xaml

Question

I'm facing an issue that I can't solve. I have a ListView and I need to customize item style when the user drag an object over the list view item. Due to the complexity of my states, I don't want to keep the ListViewItemPresenter of the extended ListViewItem style. So when i remove that presenter and define my own style (basically a classic content presenter + overlay + underlay + VisualStateGroups to define animations), I don't recieve the DragOver and Drop event anymore on my list item objects. I don't understand why ? If i keep the default item container style it works fine... What did i miss?
Let me go a bit further with some code. Here is my List view that define ItemTemplate and ItemContainerStyle :
<ListView x:Name="notebookListView"
ItemsSource="{x:Bind NoteBookItems}"
ItemTemplate="{StaticResource NotebookItemListViewTemplate}"
ItemContainerStyle="{StaticResource notebookItemContainerStyle}"
IsItemClickEnabled="True"
SelectionMode="Single"
AllowDrop="True" CanReorderItems="False" CanDragItems="True"
DragItemsStarting="NotebookListView_DragItemsStarting"
DragItemsCompleted="NotebookListView_DragItemsCompleted"
ItemClick="NotebookItem_Click" />
Here is the item template that define the DragOver and Drop method:
<DataTemplate x:Name="NotebookItemListViewTemplate" x:DataType="model:NotebookItem">
<Grid x:Name="notebook" HorizontalAlignment="Left" Height="48" Width="320"
AllowDrop="True"
DragOver="DragOverNotebookItem"
Drop="DropInNotebookItem">
[...]
</Grid>
</DataTemplate>
And finaly my extended item container style:
<Style x:Key="notebookItemContainerStyle" TargetType="ListViewItem">
<!-- all default setter properties ... -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<!-- Here is my customization with VisualState to catch PointerOver and other events above my list items -->
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="overlay" Duration="0" To="{StaticResource ColorUIBlackAlpha04}" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="overlay" Duration="0" To="{StaticResource ColorUIBlackAlpha12}" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="PressedSelected">
<Storyboard>
<ColorAnimation Storyboard.TargetName="overlay" Duration="0" To="{StaticResource ColorUIBlackAlpha12}" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Storyboard.TargetName="overlay" Duration="0" To="Transparent" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- and a Grid that contains the definition of the item content -->
<Grid>
<Rectangle x:Name="underlay" Stroke="Transparent" Fill="Transparent" Margin="0" />
<ContentPresenter Margin="{TemplateBinding Padding}"
Background="Transparent"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="overlay" Stroke="Transparent" Fill="Transparent" Margin="0" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
With that code, the DragOver event of my item is never triggered. But if i use the default item container style with the default ListViewItemPresenter it works fine. I don't understand why... Could anyone help me to understand what happens ?
Here is the default list view item container style, with the ListViewItemPresenter instead of my custo:
<Style x:Key="notebookItemContainerStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="{ThemeResource ListViewItemBackground}"/>
<Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="FocusVisualMargin" Value="0"/>
<Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}"/>
<Setter Property="FocusVisualPrimaryThickness" Value="2"/>
<Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}"/>
<Setter Property="FocusVisualSecondaryThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter CheckBrush="{ThemeResource ListViewItemCheckBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="{ThemeResource ListViewItemCheckMode}"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
DragForeground="{ThemeResource ListViewItemDragForeground}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackground}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Control.IsTemplateFocusTarget="True"
PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
PressedBackground="{StaticResource UIBlackAlpha12}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
PointerOverBackground="{StaticResource UIBlackAlpha04}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPressedBackground="Transparent"
SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
SelectedPointerOverBackground="Transparent"
SelectedBackground="Transparent"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

I could reproduce your issue, but I don't know the reason that caused this issue. I will continue to study this issue. Currently, there is a workaround for you. I found you want to modify the color of underlay overlay Rectangle. You could realize this in the code behind rather than in xaml with Visualtreehelper.
private void MYListview_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
StackPanel test = MyFindListViewChildByName(MYListview.ContainerFromItem(MYListview.SelectedItem), "MyTest") as StackPanel;
test.Background = new SolidColorBrush(Colors.White);
}
public static DependencyObject MyFindListViewChildByName(DependencyObject parant, string ControlName)
{
int count = VisualTreeHelper.GetChildrenCount(parant);
for (int i = 0; i < count; i++)
{
var MyChild = VisualTreeHelper.GetChild(parant, i);
if (MyChild is FrameworkElement && ((FrameworkElement)MyChild).Name == ControlName)
return MyChild;
var FindResult = MyFindListViewChildByName(MyChild, ControlName);
if (FindResult != null)
return FindResult;
}
return null;
}
You could use VisualTreeHelper to get underlay overlay Rectangle instance then create animation for them. You could invoke those animation manually in ListViewItem event handler that match xaml VisualStateGroup.