locked
Disable GridView Item Click/Press Animation RRS feed

  • Question

  • I am using a GridView control to display a collection of items. By default, the GridView control applies an animation when you press an item. For reasons that would be too long to explain, I need turn off this animation since the items displayed in a grid view should not animate when pressed. The property IsItemClickEnabled seems like it should do the trick but it has no effect on the animation. I have also tried to set the IsHoldingEnabled and IsTapEnabled on the items themselves that the animation remains.

    I decided on the GridView control because it supports virtualization out of the box and I'm showing a very large number of items which make other controls not suited for my goal. Are there any alternatives to the GridView that are also virtualized or is there a way to stop the GridView animations on my items?

    Thanks.

    Wednesday, September 26, 2012 11:35 PM

Answers

  • A solution consists in disabling some VSM mechanisms as follows:

    - GridView -> DocumentOutline Tab in VS
    - Edit Additional Template -> Edit Generated Item Container -> Edit Copy -> Confirm 'GridViewItemStyle

    <GridView ItemContainerStyle="{StaticResource GridViewItemStyle1}" ...

    - Place in comment the following

    					<!--<VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation TargetName="ContentContainer"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation TargetName="ContentContainer"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>-->


    • Edited by ForInfo Thursday, September 27, 2012 6:26 AM
    • Proposed as answer by DanielEspinosa Thursday, September 27, 2012 12:20 PM
    • Marked as answer by L.Sobrado Thursday, September 27, 2012 12:57 PM
    Thursday, September 27, 2012 6:25 AM

All replies

  • I think that the animation when you press an Item can not be suppressed but you can modify the style of a selected Item, pressed Item or Over Item. If you define Page resources inside your XAML page you could simulate that there is no selected Item. The code to acheive this would be

    <Page.Resources>    
    <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Transparent"></SolidColorBrush>
        <SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent"></SolidColorBrush>
        <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="Transparent"></SolidColorBrush>
        <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Transparent"></SolidColorBrush>
    </Page.Resources>
    Hope this helps and also this code could  be helpful for a ListView.
    Thursday, September 27, 2012 1:14 AM
  • A solution consists in disabling some VSM mechanisms as follows:

    - GridView -> DocumentOutline Tab in VS
    - Edit Additional Template -> Edit Generated Item Container -> Edit Copy -> Confirm 'GridViewItemStyle

    <GridView ItemContainerStyle="{StaticResource GridViewItemStyle1}" ...

    - Place in comment the following

    					<!--<VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation TargetName="ContentContainer"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation TargetName="ContentContainer"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>-->


    • Edited by ForInfo Thursday, September 27, 2012 6:26 AM
    • Proposed as answer by DanielEspinosa Thursday, September 27, 2012 12:20 PM
    • Marked as answer by L.Sobrado Thursday, September 27, 2012 12:57 PM
    Thursday, September 27, 2012 6:25 AM
  • ForInfo Great Solution!
    Thursday, September 27, 2012 12:21 PM
  • this is awesome, thank you!
    Friday, January 4, 2013 12:59 AM
  • How would you do this in 8.1?
    Wednesday, October 30, 2013 3:32 AM
  • Solution for Windows 8.1      :)

            <GridView ItemContainerStyle="{StaticResource GridViewItemStyle1}">

        <Page.Resources>
            <Style x:Key="GridViewItemStyle1" 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">
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Page.Resources>


    Gustavo

    • Proposed as answer by MJFara Sunday, December 29, 2013 7:57 PM
    Thursday, November 28, 2013 1:05 PM
  • Unfortunately the above style makes my items invisible in 8.1, do you have another solution?
    Thursday, November 28, 2013 5:21 PM
  • Still battling this, can't figure it out!
    Wednesday, December 11, 2013 2:56 AM
  • Gustavo's solution works for me.  But the ControlTemplate at least needs to contain a ContentPresenter.

    • Proposed as answer by MJFara Sunday, December 29, 2013 7:57 PM
    Saturday, December 21, 2013 7:18 AM
  • ForInfo's lution doesn't resolve on Win8.1 while Gustavo+Qnomad's workaround doesn't seem to address the issue neither (on latest WIN8.1 ofc). Here is the XAML:

            <Style x:Key="GridViewItemStyle1" 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 />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    any help?


    Kiss me before you eat me...

    Wednesday, January 22, 2014 4:00 PM
  • Finally, I resolved this on win8.1.

    I copied the original GridViewItemExpanded from

    C:\Program Files (x86)\Windows Kits\8.1\Include\winrt\xaml\design\generic.xaml

    then remark these sections: PointerOver, Pressed, PointerOverPressed

    i.e.:

      <!--<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>
                                                <PointerDownThemeAnimation TargetName="ContentContainer" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation TargetName="ContentContainer" />
                                                <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>-->


    Kiss me before you eat me...

    Thursday, January 23, 2014 10:45 AM
  • here is my final xaml:

     <Style x:Key="GridViewItemStyle1" 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="False"/>
     <Setter Property="IsTapEnabled" Value="False"/>
     <Setter Property="Margin" Value="0,0,2,2"/>
     <Setter Property="Template">
     <Setter.Value>
     <ControlTemplate TargetType="GridViewItem">
     <Border x:Name="OuterContainer">
     <VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="CommonStates">
     <VisualState x:Name="Normal"/>
     <VisualState x:Name="Disabled">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="contentPresenter"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
     </Storyboard>
     </VisualState>
     </VisualStateGroup>
     <VisualStateGroup x:Name="FocusStates">
     <VisualState x:Name="Focused">
     <Storyboard>
     <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="Unfocused"/>
     <VisualState x:Name="PointerFocused"/>
     </VisualStateGroup>
     <VisualStateGroup x:Name="SelectionHintStates">
     <VisualState x:Name="VerticalSelectionHint">
     <Storyboard>
     <SwipeHintThemeAnimation TargetName="SelectionBackground" ToVerticalOffset="15" ToHorizontalOffset="0" />
     <SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
     <SwipeHintThemeAnimation TargetName="SelectedBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
     <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="15" ToHorizontalOffset="0" />
     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
     Storyboard.TargetProperty="Opacity"
     Duration="0:0:0.500">
     <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
     <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
     </DoubleAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     <VisualState x:Name="HorizontalSelectionHint">
     <Storyboard>
     <SwipeHintThemeAnimation TargetName="SelectionBackground" ToHorizontalOffset="-23" ToVerticalOffset="0" />
     <SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
     <SwipeHintThemeAnimation TargetName="SelectedBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
     <SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-23" ToVerticalOffset="0" />
     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
     Storyboard.TargetProperty="Opacity"
     Duration="0:0:0.500">
     <DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
     <DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
     </DoubleAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     <VisualState x:Name="NoSelectionHint" />
     <VisualStateGroup.Transitions>
     <VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>
     </VisualStateGroup.Transitions>
     </VisualStateGroup>
     <VisualStateGroup x:Name="SelectionStates">
     <VisualState x:Name="Unselecting">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="Unselected">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="UnselectedPointerOver">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
     Storyboard.TargetProperty="Foreground">
     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     <VisualState x:Name="UnselectedSwiping">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="0.5" />
     <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="Selecting">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="SelectionBackground"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectedBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectingGlyph"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
     Storyboard.TargetProperty="Foreground">
     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     <VisualState x:Name="Selected">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="SelectionBackground"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectedBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
     Storyboard.TargetProperty="Foreground">
     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     <VisualState x:Name="SelectedSwiping">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="SelectionBackground"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectedBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
     Storyboard.TargetProperty="Foreground">
     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     <VisualState x:Name="SelectedUnfocused">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="SelectionBackground"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectedBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
     Storyboard.TargetProperty="Foreground">
     <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     </VisualStateGroup>
     <VisualStateGroup x:Name="DragStates">
     <VisualState x:Name="NotDragging" />
     <VisualState x:Name="Dragging">
     <Storyboard>
     <DoubleAnimation Storyboard.TargetName="InnerDragContent"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="{ThemeResource ListViewItemDragThemeOpacity}" />
     <DragItemThemeAnimation TargetName="InnerDragContent" />
     <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
     <FadeOutThemeAnimation TargetName="SelectedBorder" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="DraggingTarget">
     <Storyboard>
     <DropTargetItemThemeAnimation TargetName="OuterContainer" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="MultipleDraggingPrimary">
     <Storyboard>
     <!-- These two Opacity animations are required - the FadeInThemeAnimations
     on the same elements animate an internal Opacity. -->
     <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="1" />
     <DoubleAnimation Storyboard.TargetName="ContentBorder"
     Storyboard.TargetProperty="Opacity"
     Duration="0"
     To="{ThemeResource ListViewItemDragThemeOpacity}" />
     <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
     <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
     <DragItemThemeAnimation TargetName="ContentBorder" />
     <FadeOutThemeAnimation TargetName="SelectionBackground" />
     <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
     <FadeOutThemeAnimation TargetName="SelectedBorder" />
     <FadeOutThemeAnimation TargetName="PointerOverBorder" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="MultipleDraggingSecondary">
     <Storyboard>
     <FadeOutThemeAnimation TargetName="ContentContainer" />
     </Storyboard>
     </VisualState>
     <VisualStateGroup.Transitions>
     <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
     </VisualStateGroup.Transitions>
     </VisualStateGroup>
     <VisualStateGroup x:Name="ReorderHintStates">
     <VisualState x:Name="NoReorderHint"/>
     <VisualState x:Name="BottomReorderHint">
     <Storyboard>
     <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="TopReorderHint">
     <Storyboard>
     <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="RightReorderHint">
     <Storyboard>
     <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />
     </Storyboard>
     </VisualState>
     <VisualState x:Name="LeftReorderHint">
     <Storyboard>
     <DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />
     </Storyboard>
     </VisualState>
     <VisualStateGroup.Transitions>
     <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
     </VisualStateGroup.Transitions>
     </VisualStateGroup>
     <VisualStateGroup x:Name="DataVirtualizationStates">
     <VisualState x:Name="DataAvailable"/>
     <VisualState x:Name="DataPlaceholder">
     <Storyboard>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
     Storyboard.TargetProperty="Visibility"
     Duration="0">
     <DiscreteObjectKeyFrame KeyTime="0">
     <DiscreteObjectKeyFrame.Value>
     <Visibility>Visible</Visibility>
     </DiscreteObjectKeyFrame.Value>
     </DiscreteObjectKeyFrame>
     </ObjectAnimationUsingKeyFrames>
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
     Storyboard.TargetProperty="Visibility"
     Duration="0">
     <DiscreteObjectKeyFrame KeyTime="0">
     <DiscreteObjectKeyFrame.Value>
     <Visibility>Visible</Visibility>
     </DiscreteObjectKeyFrame.Value>
     </DiscreteObjectKeyFrame>
     </ObjectAnimationUsingKeyFrames>
     </Storyboard>
     </VisualState>
     </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Grid x:Name="ReorderHintContent" Background="Transparent">
     <Path x:Name="SelectingGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckSelectingThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,9.5,9.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
     <Border x:Name="HintGlyphBorder"
     Height="40"
     Width="40"
     HorizontalAlignment="Right"
     VerticalAlignment="Top"
     Opacity="0"
     Margin="4">
     <Path x:Name="HintGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckHintThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
     </Border>
     <Border x:Name="ContentContainer">
     <!-- This extra wrapper grid is necessary because rendertransforms set by the reorder hint animations
     will be lost when ContentContainer becomes a LTE -->
     <Grid x:Name="InnerDragContent">
     <Rectangle x:Name="PointerOverBorder"
     IsHitTestVisible="False"
     Opacity="0"
     Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
     Margin="1" />
     <Rectangle x:Name="FocusVisual"
     IsHitTestVisible="False"
     Opacity="0"
     StrokeThickness="2"
     Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
     <Rectangle x:Name="SelectionBackground"
     Margin="4"
     Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
     Opacity="0" />
     <Border x:Name="ContentBorder"
     Background="{TemplateBinding Background}"
     BorderBrush="{TemplateBinding BorderBrush}"
     BorderThickness="{TemplateBinding BorderThickness}"
     Margin="4">
     <Grid>
     <ContentPresenter x:Name="contentPresenter"
     ContentTransitions="{TemplateBinding ContentTransitions}"
     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
     Margin="{TemplateBinding Padding}" />
     <!-- The 'Xg' text simulates the amount of space one line of text will occupy.
     In the DataPlaceholder state, the Content is not loaded yet so we
     approximate the size of the item using placeholder text. -->
     <TextBlock x:Name="PlaceholderTextBlock"
     Visibility="Collapsed"
     Text="Xg"
     Foreground="{x:Null}"
     Margin="{TemplateBinding Padding}"
     IsHitTestVisible="False"
     AutomationProperties.AccessibilityView="Raw"/>
     <Rectangle x:Name="PlaceholderRect"
     Visibility="Collapsed"
     Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
     <Rectangle x:Name="MultiArrangeOverlayBackground"
     IsHitTestVisible="False"
     Opacity="0"
     Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" />
     </Grid>
     </Border>
     <Rectangle x:Name="SelectedBorder"
     IsHitTestVisible="False"
     Opacity="0"
     Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
     StrokeThickness="{ThemeResource GridViewItemSelectedBorderThemeThickness}"
     Margin="4"/>
     <Border x:Name="SelectedCheckMarkOuter"
     IsHitTestVisible="False"
     HorizontalAlignment="Right"
     VerticalAlignment="Top"
     Margin="4">
     <Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">
     <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
     <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
     </Grid>
     </Border>
     <TextBlock x:Name="MultiArrangeOverlayText"
     Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
     Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
     FontFamily="{ThemeResource ContentControlThemeFontFamily}"
     FontSize="26.667"
     IsHitTestVisible="False"
     Opacity="0"
     TextWrapping="Wrap"
     TextTrimming="WordEllipsis"
     Margin="18,9,0,0"
     AutomationProperties.AccessibilityView="Raw"/>
     </Grid>
     </Border>
     </Grid>
     </Border>
     </ControlTemplate>
     </Setter.Value>
     </Setter>
     </Style>


    Kiss me before you eat me...

    Thursday, January 23, 2014 10:52 AM
  • This is what worked for me:

        <Style x:Key="GridViewContainerClear" 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">
                        <ContentPresenter>
    
                        </ContentPresenter>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
       </Style>

    Thursday, January 23, 2014 2:17 PM
  • MJFara - This disables all animations and doesn't provide any chrome around the object at all.

    Terry

    Thursday, January 23, 2014 5:26 PM
  • Like I said, that worked for me.

    That was perfect in my scenario, as I wanted to add my own user controls to the gridview.

    Thursday, January 23, 2014 5:29 PM
  • Step 1:Create style 

     <Style x:Key="ListViewDisablePressAnimationStyle" TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ContentPresenter>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Step2:Apply the style in list view

    <ListView     AutomationProperties.AutomationId="ItemGridView"
                        AutomationProperties.Name="Grouped Items"
     ItemContainerStyle="{StaticResource ListViewDisablePressAnimationStyle}">


    Wednesday, April 22, 2015 7:19 AM