如何停用GridViewItem-点击动画?

时间:2014-11-15 20:55:25

标签: xaml windows-store-apps

如何停用 GridViewItem点击动画(如下所示),右击一个GridViewItem?

GridViewItem-click animation

修改
Nate建议后的代码(不起作用)。我添加了VisualStates,但我仍然看到动画。但是,所选项目不再具有蓝色边框,因为我添加了VisualStateGroup元素(我不关心,但代码有一些效果)。

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

1 个答案:

答案 0 :(得分:1)

为了仅对右键单击进行操作,您可能必须制作一个自定义控件,该控件在右键单击时不会触发指针按下状态更改,但在左键单击时会执行。 < / p>

下一部分是针对left- 的右键点击:

根据您当前的Xaml,有两件事要尝试。

GridViewItem default styles and templates中有两个内容模板,一个使用GridViewItemPresenter,另一个不使用。{/ p>

首先,尝试使用GridViewItemPresenter样式,但使用新的ContentTransitions覆盖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>

如果仍然无效,请在同一页面上使用下面的样式。完全放在这里太长了,所以我刚为VisualStateGroup添加了固定的CommonStates。如果你去了我上面链接的地方,滚动到底部的部分,然后将其全部复制,然后折叠并覆盖CommonStates VisualStateGroup块,它应该有效。

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

希望这有助于编码!