Tablets MultiTouch con MS Windows 7:El tamaño importa, el color también (III)

La anterior entrada de esta serie Tablets MultiTouch con MS Windows 7: El tamaño importa (II) finalizaba con el siguiente párrafo:

“La razón de modificar el diseño es interactuar con la barra deslizadora usando nuestros dedos, por ello tendremos que modificar el nodo “Track”, que es el botón de la barra. A este nodo se le incluirá el subnodo “Track.Thumb” encargado de gestionar el diseño del botón por medio de su atributo “Style”. Pero sobre éste trataremos en detalle en la siguiente entrada de la serie. “

Pues bien la entrada que ahora iniciamos continúa donde dejábamos la anterior. Es decir se va a tratar en ella el diseño del botón de la barra de desplazamiento correspondiente al nodo “Track”, para lo cual habrá actuar sobre el atributo “Style”, tal y como se indicaba.

Se adjunta a continuación las líneas de código donde se puede identificar el atributo “Style” sobre el que vamos a actuar.

                <Track Grid.Row="1"

             x:Name="PART_Track">

                <Track.Thumb>

                    <Thumb Style="{StaticResource EstiloDelBoton}" />

                </Track.Thumb>

            </Track>

Como puede observarse, el atributo “Style” realiza una llamada al recurso estático que  será necesario definir y que en el ejemplo que se está desarrollando queda identificado en el recurso “EstiloDelBoton”. Este es la hoja de estilo y contiene el diseño del botón. En esta ocasión se ha optado por hacer uso de una elipse en vez del botón rectangular que figuraba por defecto. Adicionalmente se va a modificar su color y tamaño. Este último se regulará en función de los valores que presente las propiedades "Height" y "Width que en el ejemplo, tal y como se muestra a continuación, figura con los valores 58 y 65.

    <!--<SnippetThumb>-->

    <Style x:Key="EstiloMiBoton"

         TargetType="{x:Type Thumb}">

        <Setter Property="SnapsToDevicePixels"

            Value="true" />

        <Setter Property="OverridesDefaultStyle"

            Value="true" />

        <Setter Property="Height"

            Value="58" />

        <Setter Property="Width"

            Value="65" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type Thumb}">

                    <Ellipse x:Name="Ellipse"

                   StrokeThickness="1">

                        <Ellipse.Stroke>

                            <LinearGradientBrush StartPoint="0,0"

                                   EndPoint="0,1">

                                <LinearGradientBrush.GradientStops>

                                    <GradientStopCollection>

                                        <GradientStop Color="DarkOrange"

                                  Offset="0.0" />

                                        <GradientStop Color="Green"

                                  Offset="1.0" />

                                    </GradientStopCollection>

                                </LinearGradientBrush.GradientStops>

                            </LinearGradientBrush>

                        </Ellipse.Stroke>

                        <Ellipse.Fill>

                            <LinearGradientBrush EndPoint="0.5,1"

                                   StartPoint="0.5,0">

                                <GradientStop Color="LightSeaGreen"

                              Offset="1" />

                                <GradientStop Color="Yellow" />

                            </LinearGradientBrush>

                        </Ellipse.Fill>

                    </Ellipse>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!--</SnippetThumb>-->

Para las modificaciones de color del botón será necesario actuar sobre la variable “Color” correspondiente al relleno de la elipse. En el caso que se está desarrollando se ha optado por el amarillo y el verde. De las líneas de código reflejadas anteriormente se extractan a continuación aquellas  que afectan a los aspectos de color mencionados.

                    <Ellipse.Fill>

                            <LinearGradientBrush EndPoint="0.5,1"

                                   StartPoint="0.5,0">

                                <GradientStop Color="LightSeaGreen"

                              Offset="1" />

                                <GradientStop Color="Yellow" />

                            </LinearGradientBrush>

                        </Ellipse.Fill>

A  modo de resumen  de lo expuesto hasta el momento, en esta y las dos entradas anteriores, presentamos a continuación una imagen que muestra el estado final de la clase “Diccionario.xaml”.

Diccionario.xaml

Después de haber realizado toda una serie de modificaciones: añadir el modificador “Control Template”, incluir el objeto “PosicionHorizontal”, crear un estilo ”EstiloMiBoton” para el diseño del botón y otros cambios comentados llegamos a un resultado final del aspecto del objeto “Slider” (barra de desplazamiento),  tal y como muestra la siguiente imagen.

Evolución del Slider

Una vez abordados los aspectos de diseño asociados al objeto “Slider” en función de las necesidades que una posible aplicación puede demandar,  en la próxima entrada de la serie se abordarán los apartados de código en C# y XAML necesarios para incorporar este diseño al proyecto WPF en curso.

Esperamos que esta serie, que continúa, este siendo de utilidad. Para acabar, recuerda que si quieres aprender mucho más sobre los secretos de los sistemas Microsoft Windows, te recomendamos leer el libro de Sergio de los Santos "Máxima Seguridad en Windows: Secretos Técnicos" , o siempre puedes suscribirte al Canal RSS de Windows Técnico para estar al día de las novedades e información técnica de interés.