2014-11-15 50 views
1

如何停用 GridViewItem點擊動畫(如下圖所示),右擊一個GridViewItem?如何取消激活GridViewItem單擊動畫?

GridViewItem-click animation

編輯:
代碼後,內特的建議(不工作)。我添加了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> 
+0

在[GridViewItem默認樣式和模板](http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709915.aspx)中,特別是最下面的那個,您會注意到是'Pressed'狀態的'StoryBoard',其中包含'PointerDownThemeAnimation'。複製樣式,刪除'StoryBoard'(或者只是動畫),應該很好。 –

+0

感謝您的回答,但是:不,不起作用。你能檢查我是否犯了一個錯誤嗎? – Daniel

+0

它看起來像'PointerOverPressed'可能有類似的動畫。嘗試覆蓋這一點。 –

回答

1

爲了僅供右擊做到這一點,你可能不得不做出這樣的不會觸發上點擊右鍵按下指針狀態變化的自定義控制,但並左鍵單擊。

接下來的部分是左手右鍵點擊:

有兩件事情來嘗試,根據您當前的XAML。

GridViewItem default styles and templates中有兩個內容模板,一個使用GridViewItemPresenter,另一個不使用。

首先,嘗試使用GridViewItemPresenter樣式,但用新的TransitionCollection覆蓋ContentTransitions屬性。

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

如果仍然不起作用,則在同一頁面上使用下面的樣式。完全放置在這裏太長了,所以我剛剛爲CommonStates添加了固定的VisualStateGroup。如果你去了我上面鏈接的地方,滾動到底部的部分,並將其全部複製,然後摺疊並覆蓋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> 

希望這有助於和快樂的編碼!

+0

太好了,這有幫助。動畫現在被禁用。但是,也用於左鍵單擊。在我還沒有找到解決方案之前,我不能將其標記爲已回答,但作爲幫助。如果我找到解決方案,我將它添加到您的答案並標記爲答案。 :) 謝謝! – Daniel

+0

爲了做到這一點只用於右鍵點擊,你可能必須做一個自定義控件,不會觸發點擊右鍵點擊狀態變化,但左鍵單擊。 –