Windows 8: Cambiar el borde y la marca de selección de elementos en GridView o ListView

16 octubre, 2012 Sin categoría

El artículo de hoy va más dedicado a los diseñadores que, como a mi, les gusta ponerse creativos y darle un toque “especial” a sus aplicaciones.

Por eso, vamos a ver cómo cambiar el color del borde y la marca (triángulo con el check de la esquina superior derecha) de selección de elementos tanto en GridView como en ListView

Para ilustrar el ejemplo, voy a usar una aplicación en la que he realizado el diseño y, no es otra que la aplicación para Windows 8 de CompartiMOSS (Ya en su Windows Store) a la que le he cambiado el color de selección a azul en vez del violeta que viene por defecto como podemos ver en la aplicación de ejemplo de Microsoft “Contoso Cookbook”

Para conseguir este objetivo, tenemos que empezar por editar la plantilla del contenedor de items (ItemContainerStyle) del GridView o ListView tal y haciendo click sobre el control con el botón derecho del ratón, y seleccionando “Edit Aditional Templates –> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy” como muestro en la imagen. 

En la ventana emergente que se nos muestra, voy a seleccionar crear el nuevo estilo dentro de la página actual aunque, recomiendo que pongan estos estilos en un fichero aparte para poder hacer más legible el código XAML que si sois como yo, lo vais a mirar mucho. Volviendo a lo importante, llamaré al estilo “MyListItemContainerStyle” y presiono OK.

Esto nos generará dentro de la página un bloque de estilo como el que os muestro a continuación, pero advierto que es enorme y para los que no estés muy sueltos en código XAML y “VisualStates” igual os suena a chino.

 

 

<Style x:Key="MyListItemContainerStyle" TargetType="GridViewItem">

    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>

    <Setter Property="FontSize" Value="{StaticResource 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 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>

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

                            <VisualState x:Name="Disabled">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDisabledThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>

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

                            <VisualStateGroup.Transitions>

                                <VisualTransition GeneratedDuration="0:0:0.65" To="NoSelectionHint"/>

                            </VisualStateGroup.Transitions>

                            <VisualState x:Name="VerticalSelectionHint">

                                <Storyboard>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectionBackground" ToVerticalOffset="15"/>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="ContentBorder" ToVerticalOffset="15"/>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectedBorder" ToVerticalOffset="15"/>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectedCheckMark" ToVerticalOffset="15"/>

                                    <DoubleAnimationUsingKeyFrames Duration="0:0:0.500" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph">

                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>

                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.500" Value="0"/>

                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="HorizontalSelectionHint">

                                <Storyboard>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="-23" TargetName="SelectionBackground" ToVerticalOffset="0"/>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="-23" TargetName="ContentBorder" ToVerticalOffset="0"/>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="-23" TargetName="SelectedBorder" ToVerticalOffset="0"/>

                                    <SwipeHintThemeAnimation ToHorizontalOffset="-23" TargetName="SelectedCheckMark" ToVerticalOffset="0"/>

                                    <DoubleAnimationUsingKeyFrames Duration="0:0:0.500" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph">

                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.5"/>

                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0.500" Value="0"/>

                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="NoSelectionHint"/>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="SelectionStates">

                            <VisualState x:Name="Unselecting">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Unselected">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="UnselectedPointerOver">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="UnselectedSwiping">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectingGlyph"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Selecting">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectingGlyph"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder"/>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Selected">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="SelectedSwiping">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="SelectedUnfocused">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="DragStates">

                            <VisualStateGroup.Transitions>

                                <VisualTransition GeneratedDuration="0:0:0.2" To="NotDragging"/>

                            </VisualStateGroup.Transitions>

                            <VisualState x:Name="NotDragging"/>

                            <VisualState x:Name="Dragging">

                                <Storyboard>

                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent"/>

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

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayBackground"/>

                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayText"/>

                                    <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentBorder"/>

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

                        <VisualStateGroup x:Name="ReorderHintStates">

                            <VisualStateGroup.Transitions>

                                <VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint"/>

                            </VisualStateGroup.Transitions>

                            <VisualState x:Name="NoReorderHint"/>

                            <VisualState x:Name="BottomReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation Direction="Bottom" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="TopReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation Direction="Top" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="RightReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation Direction="Right" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="LeftReorderHint">

                                <Storyboard>

                                    <DragOverThemeAnimation Direction="Left" ToOffset="{StaticResource ListViewItemReorderHintThemeOffset}" TargetName="ReorderHintContent"/>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                        <VisualStateGroup x:Name="DataVirtualizationStates">

                            <VisualState x:Name="DataAvailable"/>

                            <VisualState x:Name="DataPlaceholder">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderTextBlock">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <Visibility>Visible</Visibility>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect">

                                        <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" 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="{StaticResource ListViewItemCheckSelectingThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,9.5,9.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>

                        <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40">

                            <Path x:Name="HintGlyph" 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="{StaticResource ListViewItemCheckHintThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>

                        </Border>

                        <Border x:Name="ContentContainer">

                            <Grid x:Name="InnerDragContent">

                                <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBackgroundThemeBrush}" IsHitTestVisible="False" Margin="1" Opacity="0"/>

                                <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemFocusBorderThemeBrush}" StrokeThickness="2"/>

                                <Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" Margin="4" Opacity="0"/>

                                <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">

                                    <Grid>

                                        <ContentPresenter x:Name="contentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                                        <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Text="Xg" Visibility="Collapsed"/>

                                        <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>

                                        <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>

                                    </Grid>

                                </Border>

                                <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Margin="4" Opacity="0" Stroke="{StaticResource ListViewItemSelectedBackgroundThemeBrush}" StrokeThickness="{StaticResource GridViewItemSelectedBorderThemeThickness}"/>

                                <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" VerticalAlignment="Top">

                                    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">

                                        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource 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="{StaticResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>

                                    </Grid>

                                </Border>

                                <TextBlock x:Name="MultiArrangeOverlayText" Foreground="{StaticResource ListViewItemDragForegroundThemeBrush}" FontSize="26.667" FontFamily="{StaticResource ContentControlThemeFontFamily}" IsHitTestVisible="False" Margin="18,9,0,0" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" TextTrimming="WordEllipsis"/>

                            </Grid>

                        </Border>

                    </Grid>

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

 

Como podéis ver es un estilo muy largo y nos puede resultar complejo saber qué tenemos que modificar, por eso, voy a indicaros dónde tendréis que realizar cambios.

1 –> Para  empezar vamos a cambiar cómo se verá por defecto un elemento seleccionado y, para ello debemos buscar al final de todo este estilo los elementos que componen el estilo de selección y que son el borde, el triángulo de la esquina superior derecha y el símbolo de check.

 

 

 

<Rectangle x:Name="SelectionBackground" Fill="#DE0072cb" Margin="4" Opacity="0"/>

<Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4">

    <Grid>

        <ContentPresenter x:Name="contentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

        <TextBlock x:Name="PlaceholderTextBlock" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Text="Xg" Visibility="Collapsed"/>

        <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>

        <!-- Selected Border -->

        <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="#DE0072cb" StrokeThickness="{StaticResource GridViewItemSelectedBorderThemeThickness}"/>

        <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundThemeBrush}" IsHitTestVisible="False" Opacity="0"/>

    </Grid>

</Border>

<Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top">

    <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40">

        <!-- Selected Corner -->

        <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="#DE0072cb" Stretch="Fill"/>

        <!-- Check symbol -->

        <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="#FFFFFFFF" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15"/>

    </Grid>

</Border>

 

Como sigue siendo un poco lioso, os he marcado en negrita y con una fuente mayor los elementos que vamos a tratar. que serán, el Rectángulo con x:Name=”SelectedBorder” que corresponde al borde de selección y también al y fondo (si el elemento tiene transparencia), el Path con x:Name=”SelectedEarmark” que es el triángulo de la esquina superior derecha y, por último, el Path sin nombre que corresponde a la marca de “Check”. En estos elementos editaremos el color con el que deseamos aplicar por defecto a la selección.

 

2—> Lo siguiente es modificar los estados visuales que correspondan a los que queremos editar, por ejemplo, el más común es el que ocurre al pasar el ratón por encima “PointerOver”, aunque en entornos táctiles quizás nos pueda interesar más el estado visual que ocurre al tener presionado un elemento “PointerOverPressed” o “Pressed”. Para cada uno de los casos, las acciones a tomar son las mismas por lo que sólo pondré el ejemplo del “PointerOver”.

 

 

<VisualState x:Name="PointerOver">

    <Storyboard>

        <!-- Establece la opacidad del Rectángulo de fondo y borde a 1 con lo que ahora será visible -->

        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder"/>

 

        <!-- Establece el color del fondo del Rectángulo que se corresponderá con el fondo del elemento seleccionado -->

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground">

            <DiscreteObjectKeyFrame KeyTime="0" Value="#DE0072cb"/>

        </ObjectAnimationUsingKeyFrames>

 

        <!-- Borde del rectángulo -->

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder">

            <DiscreteObjectKeyFrame KeyTime="0" Value="#DE0072cb"/>

        </ObjectAnimationUsingKeyFrames>

 

        <!-- Color de fondo del triángulo de la esquina al pasar por encima después de seleccionar -->

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">

            <DiscreteObjectKeyFrame KeyTime="0" Value="#DE0072cb"/>

        </ObjectAnimationUsingKeyFrames>

    </Storyboard>

</VisualState>

 

He resaltado los elementos que vamos a modificar y que paso a explicar:

  1. Se establece el valor de opacidad del rectángulo que contiene a los elementos y que define tanto el fondo como el borde de los mismos.
  2. Se establece el valor que queramos para el color de fondo del rectángulo que sólo será visible si el elemento del GridView o del ListView (según proceda) tiene transparencia.
  3. Se establece el valor que queramos para el color del borde del rectángulo y, por consiguiente, del elemento del GridView o del ListView (según proceda)
  4. Se establece el valor que queramos para el color de fondo del triángulo de la esquina superior derecha que aparece cuando un elemento ha sido seleccionado.

 

Hecho esto, y editados los estados visuales que queramos, habremos acabado de personalizar la selección de un elemento en un GridView o ListView y, en mi caso de CompartiMOSS obtengo el resultado deseado que os mostré al inicio del artículo.

Santiago Porras Rodríguez

Innovation Team Leader at ENCAMINA

MVP in Developer Technologies

Apasionado por las nuevas tecnologías. Colaboro con la comunidad de desarrolladores escribiendo artículos en mi blog personal y ocasionalmente en CompartiMOSS.com. Además, soy uno de los coordinadores de TenerifeDev, grupo de usuarios de .NET de Tenerife y de otros grupos como Comunidad Office 365.

Puedes encontrarme en la red microparticipando en Twitter con el usuario @saintwukong

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *