Estilos e modelos de GridViewItem

Estilos e modelos de GridViewItem

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Este tópico descreve estilos e modelos para o controle GridViewItem. Você pode modificar esses recursos e o ControlTemplate padrão para dar uma aparência única ao controle.

Estados visuais

Estes são os VisualStates definidos no estilo padrão do controle.

Nome de VisualStateNome de VisualStateGroupDescrição
NormalCommonStatesO estado padrão.
PointerOverCommonStatesO ponteiro é posicionado sobre o item.
PressedCommonStatesO item é pressionado.
PointerOverPressedCommonStatesO ponteiro é colocado sobre o item, que é pressionado.
DisabledCommonStatesO item é desabilitado.
FocusedFocusStatesO item tem foco.
UnfocusedFocusStatesO item não tem foco.
PointerFocusedFocusStatesO item ganha foco com uma ação do ponteiro.
VerticalSelectionHintSelectionHintStatesUma dica de seleção vertical é mostrada.
HorizontalSelectionHintSelectionHintStatesUma dica de seleção horizontal é mostrada.
NoSelectionHintSelectionHintStatesNão são mostradas dicas de seleção.
UnselectingSelectionStatesA seleção do item está sendo cancelada usando uma interação de passar o dedo.
UnselectedSelectionStatesO item não é selecionado.
UnselectedPointerOverSelectionStatesO item não é selecionado e o ponteiro fica sobre ele.
UnselectedSwipingSelectionStatesO item não é selecionado e está recebendo uma interação de passar o dedo.
SelectingSelectionStatesO item está sendo selecionado usando uma interação de passar o dedo.
SelectedSelectionStatesO item é selecionado.
SelectedSwipingSelectionStatesO item é selecionado e está recebendo uma interação de passar o dedo.
SelectedUnfocusedSelectionStatesO item é selecionado e não tem foco.
NotDraggingDragStatesO item não está sendo arrastado.
DraggingDragStatesO item está sendo arrastado.
DraggingTargetDragStatesO item é o destino de uma operação de arraste.
MultipleDraggingPrimaryDragStatesO item faz parte de um grupo de itens arrastados e tem foco.
MultipleDraggingSecondaryDragStatesO item faz parte de um grupo de itens arrastados e não tem foco.
NoReorderHintReorderHintStatesNão são mostradas dicas de reorganização.
BottomReorderHintReorderHintStatesUma dica de reorganização na parte inferior é mostrada.
TopReorderHintReorderHintStatesUma dica de reorganização na parte superior é mostrada.
RightReorderHintReorderHintStatesUma dica de reorganização à direita é mostrada.
LeftReorderHintReorderHintStatesUma dica de reorganização à esquerda é mostrada.
DataAvailableDataVirtualizationStatesOs dados são mostrados.
DataPlaceholderDataVirtualizationStatesUm espaço reservado é mostrado.

 

Para saber mais sobre estados de foco, veja Control.FocusState.

Recursos de tema

Estes recursos são usados no estilo padrão do controle.

Pincéis para temas escuros

Para alterar as cores do controle no tema escuro, substitua esses pincéis em 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" />

Pincéis para temas claros

Para alterar as cores do controle no tema claro, substitua esses pincéis em 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" />

Outros recursos


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


Recursos compartilhados

O modelo de controle usa estes recursos compartilhados com outros modelos de controle. A alteração desses valores afetará outros controles que usam esses recursos.



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

Para saber mais sobre recursos de tema, incluindo os valores que são usados para o tema HighContrast, veja referência de recursos de tema de XAML.

Estilo padrão

Quando o GridView do ItemsPanel é um ItemsWrapGrid (o padrão) ou ItemsStackPanel, este modelo é usado para mostrar os itens de dados. Este modelo usa GridViewItemPresenter em vez de uma árvore UIElement para melhorar o desempenho da grade.



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

Quando o GridView do ItemsPanel não é um ItemsWrapGrid (o padrão) ou ItemsStackPanel, este modelo é usado para mostrar os itens de dados. Este modelo usa uma árvore UIElement e estados visuais em vez de 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>


 

 

Mostrar:
© 2016 Microsoft