GridViewItem styles and templates

Applies to Windows and Windows Phone

This topic describes the styles and templates for the GridViewItem control. You can modify these resources and the default ControlTemplate to give the control a unique appearance.

Visual states

These are the VisualStates defined in the control's default style.

VisualState nameVisualStateGroup nameDescription
NormalCommonStatesThe default state.
PointerOverCommonStatesThe pointer is positioned over the item.
PressedCommonStatesThe item is pressed.
PointerOverPressedCommonStatesThe pointer is over the item and the item is pressed.
DisabledCommonStatesThe item is disabled.
FocusedFocusStatesThe item has focus.
UnfocusedFocusStatesThe item doesn't have focus.
PointerFocusedFocusStatesThe item has focus obtained through a pointer action.
VerticalSelectionHintSelectionHintStatesA vertical selection hint is shown.
HorizontalSelectionHintSelectionHintStatesA horizontal selection hint is shown.
NoSelectionHintSelectionHintStatesA selection hint is not shown.
UnselectingSelectionStatesThe item is being unselected using a swipe interaction.
UnselectedSelectionStatesThe item is not selected.
UnselectedPointerOverSelectionStatesThe item is not selected and the pointer is over it.
UnselectedSwipingSelectionStatesThe item is not selected and is receiving a swipe interaction.
SelectingSelectionStatesThe item is being selected using a swipe interaction.
SelectedSelectionStatesThe item is selected.
SelectedSwipingSelectionStatesThe item is selected and is receiving a swipe interaction.
SelectedUnfocusedSelectionStatesThe item is selected and doesn't have focus.
NotDraggingDragStatesThe item is not being dragged.
DraggingDragStatesThe item is being dragged.
DraggingTargetDragStatesThe item is the target of a drag operation.
MultipleDraggingPrimaryDragStatesThe item is one of a group of dragged items, and has focus.
MultipleDraggingSecondaryDragStatesThe item is one of a group of dragged items, and doesn't have focus.
NoReorderHintReorderHintStatesA reorder hint is not shown.
BottomReorderHintReorderHintStatesA bottom reorder hint is shown.
TopReorderHintReorderHintStatesA top reorder hint is shown.
RightReorderHintReorderHintStatesA right reorder hint is shown.
LeftReorderHintReorderHintStatesA left reorder hint is shown.
DataAvailableDataVirtualizationStatesData is shown.
DataPlaceholderDataVirtualizationStatesA placeholder is shown.

 

For more info about focus states, see Control.FocusState.

Theme resources

These resources are used in the control's default style.

Dark theme brushes

To change the colors of the control in the dark theme, override these brushes in App.xaml.


<SolidColorBrush x:Key="ListViewItemCheckHintThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ListViewItemCheckSelectingThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ListViewItemCheckThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ListViewItemDragBackgroundThemeBrush" Color="#994617B4" />
<SolidColorBrush x:Key="ListViewItemDragForegroundThemeBrush" Color="White" />
<SolidColorBrush x:Key="ListViewItemFocusBorderThemeBrush" Color="#FFFFFFFF"  />
<SolidColorBrush x:Key="ListViewItemOverlayBackgroundThemeBrush" Color="#A6000000" />
<SolidColorBrush x:Key="ListViewItemOverlayForegroundThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ListViewItemOverlaySecondaryForegroundThemeBrush" Color="#99FFFFFF"/>
<SolidColorBrush x:Key="ListViewItemPlaceholderBackgroundThemeBrush" Color="#FF3D3D3D" />
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="#4DFFFFFF" />
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#FF4617B4" />            
<SolidColorBrush x:Key="ListViewItemSelectedForegroundThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="#FF5F37BE" />

Light theme brushes

To change the colors of the control in the light theme, override these brushes in App.xaml.


<SolidColorBrush x:Key="ListViewItemCheckHintThemeBrush" Color="#FF4617B4" />
<SolidColorBrush x:Key="ListViewItemCheckSelectingThemeBrush" Color="#FF4617B4" />
<SolidColorBrush x:Key="ListViewItemCheckThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ListViewItemDragBackgroundThemeBrush" Color="#994617B4" />
<SolidColorBrush x:Key="ListViewItemDragForegroundThemeBrush" Color="White" />
<SolidColorBrush x:Key="ListViewItemFocusBorderThemeBrush" Color="#FF000000" />          
<SolidColorBrush x:Key="ListViewItemOverlayBackgroundThemeBrush" Color="#A6000000" />
<SolidColorBrush x:Key="ListViewItemOverlaySecondaryForegroundThemeBrush" Color="#99FFFFFF" />
<SolidColorBrush x:Key="ListViewItemOverlayForegroundThemeBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ListViewItemPlaceholderBackgroundThemeBrush" Color="#FF3D3D3D" />
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="#4D000000" />
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#FF4617B4" />
<SolidColorBrush x:Key="ListViewItemSelectedForegroundThemeBrush" Color="#FF000000" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="#FF5F37BE" />

Other resources


<x:Double x:Key="ListViewItemDisabledThemeOpacity">0.55</x:Double>
<x:Double x:Key="ListViewItemDragThemeOpacity">0.60</x:Double>
<x:Double x:Key="ListViewItemReorderHintThemeOffset">40.0</x:Double>
<x:Double x:Key="GridViewItemSelectedBorderThemeThickness">4</x:Double>
<Thickness x:Key="GridViewItemCompactSelectedBorderThemeThickness">4</Thickness>


Shared resources

The control template uses these resources that are shared with other control templates. Changing these values will affect other controls that use these resources.



<FontFamily x:Key="ContentControlThemeFontFamily">Segoe UI</FontFamily>
<x:Double x:Key="ControlContentThemeFontSize">14.667</x:Double>

For more info on theme resources, including the values that are used for the HighContrast theme, see XAML theme resources reference.

Default style

When the GridView's ItemsPanel is an ItemsWrapGrid (the default) or ItemsStackPanel, this template is used to show the data items. This template uses a GridViewItemPresenter instead of a UIElement tree to improve grid performance.



<!-- 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
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    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" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

When the GridView's ItemsPanel is not an ItemsWrapGrid (the default) or ItemsStackPanel, this template is used to show the data items. This template uses a UIElement tree and visual states instead of a GridViewItemPresenter.


<!-- Style for Windows.UI.Xaml.Controls.GridViewItem -->
<Style TargetType="GridViewItem" x:Key="GridViewItemExpanded">
    <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">
                <Border x:Name="OuterContainer">
                    <VisualStateManager.VisualStateGroups>
                        <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>
                                    <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>
                            <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>


 

 

Show:
© 2014 Microsoft