Daniel
Daniel

Reputation: 3531

How to deactivate GridViewItem-click animation?

How to deactivate the GridViewItem-click animation (shown below), when right-clicking a GridViewItem?

GridViewItem-click animation

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

Answers (1)

Nate Diamond
Nate Diamond

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

Related Questions