Tablets MultiTouch con MS Windows 7: El tamaño importa (II).

En la anterior entrada  de esta serie Tablets MultiTouch con MS Windows 7: El tamaño importa (I),  junto a otras aspectos, se analizaban los primeros pasos para la modificación de ciertos elementos gráficos como una “Slide Bar”. De igual modo ya se hacía mención de los “Controls Templates”. Pues bien en este sexto post de la serie y en algún otro que se subirá posteriormente se mostrarán los pasos a llevar a efecto para realizar las modificaciones de aspecto de los controles por defecto que aporta  WPF (Windows Presentation Fundation) por medio de “Controls Templates”. Veamos por lo tanto cuáles son esos pasos.

Inicio Proyecto WPF

El primer paso será iniciar un proyecto de  WPF en la plataforma Visual Studio. Para ello simplemente pulsaremos  en el “Menú Archivo” y se irán seleccionando las opciones “Nuevo” y “Proyecto”. Finalmente, tal y como nos muestra la siguiente imagen optaremos por la modalidad “Aplicación de WPF”.

Una vez dada apertura al proyecto, el siguiente paso recomendable será añadir una carpeta “Recursos”. Esto permitirá una mejor organización de  las clases y código del nuevo proyecto que se está generando.

Sobre esta carpeta, y dando apertura al menú contextual con el botón derecho del ratón, se incluirá en la misma una clase diccionario donde residirán nuestros “Control Templates”. La clase diccionario en WPF se denomina “Diccionario de recurso WPF”. En ella se almacenan tanto parejas de claves valor, para ser utilizadas y modificadas en tiempo de ejecución, como componentes de las hojas de estilo.

Crear diccionario de recursos
En el ejemplo que estamos desarrollando se hará uso del diccionario para almacenar colores particularizados y los “Control Templates”. Para ello se hará uso de una estructura en formato XML donde el nombre del nodo hace referencia a una etiqueta comprensible por WPF como puede ser “Color”.  

Diccionario de recursos

Los elementos que se van a utilizar serán “Color” lógicamente para la definición de colores,” Style” donde se indicará  que control es modificado y “Control Template” encargado de  realizar la modificación.

En la imagen anterior se puede observar que todos los nodos presentan el atributo “x:Key”, que permite asociar al mismo una palabra, pudiéndola así referenciar en el código y de este modo hacer uso del valor que se le indique en tiempo de ejecución.

Una vez mencionados los elementos principales, pasamos a iniciar nuestra modificación para ello creamos un estilo. La manera de generarlo es hacer uso del  nodo del tipo “Style”. El nodo “Style” actuará como hoja de estilo de todos los controles que se asocien en su atributo “TargetType”.

Dentro de la estructura de este nodo destaca el subnodo “Style.Triggers”. Este se utiliza para definir si el estilo  actúa sobre los controles verticales u horizontales, según se indique en el parámetro “Value”, tal y como se muestra a continuación:

 <Trigger Property="Orientation" Value="Horizontal">

Seguidamente os incluimos el código necesario para que el nodo “Style” modifique el diseño de un objeto “Slider”al estar reverenciado en la variable “TargetType”:

<Style x:Key="MiEstilo" TargetType="{x:Type Slider}">

        <Setter Property="OverridesDefaultStyle"

            Value="true" />

        <Style.Triggers>

            <Trigger Property="Orientation"

               Value="Horizontal">

                <Setter Property="MinWidth"

                Value="104" />

                <Setter Property="MinHeight"

                Value="21" />

                <Setter Property="Template"

                Value="{StaticResource PosicionHorizontal}" />

            </Trigger>

        </Style.Triggers>

    </Style>

En el código anterior se dispone de los datos necesarios para modificar el objeto”Slider”, pero el apartado encargado de realizar la modificación del diseño es la propiedad “Template”. Esta propiedad se encarga del diseño del objeto y llamará directamente al “Control Template” que en este caso se denomina “PosicionHorizontal”.

A continuación  se presenta el código del “Control Template” orientado a un objeto “Slider :

Control Template

Como puede apreciarse este control se encuentra dividido en dos nodos en “Grid” y “ControlTemplate.Triggers”.

El subnodo “Grid” se utilizará para pintar el control y contendrá todas las definiciones correspondientes al diseño del mismo, mientras “ControlTemplate.Triggers” indicará a las diferentes partes del control si son visibles o no  para  la inclusión de código.

Como el objetivo es aumentar el tamaño de un objeto a través de su diseño, será necesario modificar el subnodo “Grid”. En el presente ejemplo se trabaja sobre un objeto “Slider”  y tiene estructurado el nodo “Grid” en tres partes: la barra denominada “TickBar”, el botón deslizante “Track” y el borde del control.

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.

Para acabar, recuerda que si quieres aprender mucho más sobre los secretos de los sistemas de 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.