el Guille, la Web del Visual Basic, C#, .NET y más...

Aplicar estilos a controles con StaticResources

 
Publicado el 15/Ago/2007
Actualizado el 15/Ago/2007
Autor: Guillermo 'guille' Som

En este artículo te explico cómo definir recursos en una aplicación WPF y aplicar esos estilos a controles usando StaticResources.



 

Introducción:

La idea es definir un estilo que vamos a aplicar a ciertos controles, en este ejemplo ese control de destino será un botón, pero es aplicable a otros controles, e incluso de forma genérica a todos los controles.

Antes de entrar en detalles veamos un ejemplo y después te explico qué es lo que hace este código XAML, porque en este artículo todo será con código XAML y no habrá ni una sola línea de código en Visual Basic o C#.

 

Definir un estilo a nivel de toda la ventana (Window)

Los estilos se pueden definir en ciertos controles contenedores, pero para este ejemplo, lo voy a definir  a nivel de la ventana (Window), más que nada para que sepas que debes definirlo "antes" de otras propiedades de la ventana, por ejemplo, antes de Window.Background, si no lo haces así, te dará un error.

En el siguiente código se define un estilo llamado "btnPeque" para aplicar a los controles de tipo Button.

<Window.Resources>
    <Style x:Key="btnPeque" TargetType="{x:Type Button}">
        <Setter Property="Width" Value="22" />
        <Setter Property="Margin" Value="2, 0, 0, 0"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
    </Style>
</Window.Resources>

Como el estilo se aplicará a toda la ventana, es decir, a los controles de tipo Button que estén en la ventana y que quieran usar este estilo, lo definimos en Window.Resources.

El tipo de control al que se aplicará este estilo es el indicado por TargetType. En este caso es para el tipo Button. Todo esto se indica en el "nodo" Style.

Dentro de Style debemos indicar los "setters" es decir, los nombres de las propiedades y los valores que se asignarán. En este ejemplo, se asignará un valor 22 al ancho del botón, el margen será de 2,0,0,0 y la alineación vertical será arriba.

Debemos tener en cuenta que las propiedades que podemos indicar en cada estilo deben ser propiedades que existan en el "target type" (tipo de destino), de no ser así... ¡nos enteraremos! ;-)))

 

Aplicar el estilo a un control

Una vez que hemos definido el estilo, al que hemos llamado btnPeque y que será aplicable a los botones, debemos indicar qué botón lo usará. Esto lo hacemos en el código que define los botones. Por ejemplo:

<Button Name="btnPlay" Style="{StaticResource btnPeque}" Content="&gt;" />

Es decir, usamos Style="{StaticResource nombre}" para aplicar ese estilo al control que queramos.

 

Decir que si no usamos Style en un botón, la forma en que se mostrará será la normal o la que se haya indicado para todos los botones.

 

Estilos para varios tipos de controles

Si en lugar de aplicar el estilo solo a los botones queremos que sea a cualquier control, lo primero que debemos hacer es indicar en TargetType que es para Control.
Lo segundo es que las propiedades que indiquemos deben pertenecer a la clase Control, si no... pues tendremos un bonito error.

Por ejemplo, este estilo define el color de fondo, el del texto y el tipo de letra en negrita.

<Style x:Key="fondoNegro" TargetType="{x:Type Control}">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="Foreground" Value="Lime" />
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Margin" Value="4,0"/>
</Style>

Debido a que el "target" es cualquier control, lo podemos aplicar a varios tipos de controles, por ejemplo a una etiqueta y a un botón:

<Label Style="{StaticResource fondoNegro}" Content="Hola"/>
<Label Foreground="Tomato" Content="Mundo"/>
<Button Style="{StaticResource fondoNegro}" Content="Pulsa aquí"/>

Nuevamente te recuerdo que si no aplicamos ningún estilo a un control, se usará el que esté predeterminado.

 

Y esto es todo por el momento, como de costumbre, espero que te sea de utilidad.

Nos vemos.
Guillermo

 


 

Código de ejemplo (comprimido):

No hay código de ejemplo, salvo el mostrado en el artículo.



La fecha/hora en el servidor es: 13/11/2024 11:17:18

La fecha actual GMT (UTC) es: 

©Guillermo 'guille' Som, 1996-2024