Reputation: 3531
How to deactivate the GridViewItem-click animation (shown below), when right-clicking a GridViewItem?
Edit:
Code after Nate's suggestion (does not work). I added the VisualStates, but I still see the animation. However, selected items no longer have the blue border, since I added the VisualStateGroup
element (which I don't care about, but the code has some effects).
<Page
x:Name="pageRoot"
x:Class="MovieLibrary.VideoPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MovieLibrary"
xmlns:common="using:MovieLibrary.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="pageRoot_Loaded">
<Page.Resources>
<local:SetPercentageConverter x:Key="SetPercentageConverter"/>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">Hello, video!</x:String>
<Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter x:Name="gridViewItemPresenter" Padding="0" ContentMargin="0">
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed"><Storyboard/></VisualState>
<VisualState x:Name="PointerOverPressed"><Storyboard/></VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</GridViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Page.TopAppBar>
<CommandBar x:Name="commandBar">
<AppBarButton x:Name="SyncMovieLibraryButton" Icon="SyncFolder" Label="Sync Movie Library" Click="SyncMovieLibraryButton_Click"/>
<AppBarButton x:Name="SetMovieLibraryButton" Icon="Folder" Label="Set Movie Library" Click="SetMovieLibraryButton_Click"/>
</CommandBar>
</Page.TopAppBar>
<GridView x:Name="videoGridView" ItemsSource="{Binding Movies}" ItemContainerStyle="{StaticResource GridViewItemStyle}" Padding="0" RightTapped="videoGridView_RightTapped">
<GridView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding PosterPath}" Loaded="Image_Loaded" Stretch="UniformToFill" RightTapped="Image_RightTapped" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Page>
Upvotes: 1
Views: 681
Reputation: 5575
In order to do it only for right clicking, you'll likely have to make a custom control that doesn't trigger pointer pressed state change on right click, but does on left click.
The next part is for left- and right-clicks:
There are two things to try, based on your current Xaml.
In the GridViewItem
default styles and templates there are two content templates, one which uses GridViewItemPresenter
and one which does not.
First, try using the GridViewItemPresenter
style, but overwrite the ContentTransitions
property with a new TransitionCollection
.
<!-- Default style for Windows.UI.Xaml.Controls.GridViewItem -->
<Style TargetType="GridViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,2,2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<GridViewItemPresenter
Padding="{TemplateBinding Padding}"
SelectionCheckMarkVisualEnabled="True"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource GridViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
PointerOverBackgroundMargin="1"
ContentMargin="4" >
<GridViewItemPresenter.ContentTransitions>
<TransitionCollection/>
</GridViewItemPresenter.ContentTransitions>
</GridViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If that still doesn't work, then use the style below that one on the same page. It's too long to be placed here completely, so I have just added the fixed VisualStateGroup
for CommonStates
. If you go to the place I linked above, scroll to the section at the bottom, and copy all of it in, then collapse and overwrite the CommonStates VisualStateGroup
block, it should work.
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PointerOverBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard/>
</VisualState>
<VisualState x:Name="PointerOverPressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PointerOverBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
Hope this helps and happy coding!
Upvotes: 1