Aplicar estilos a un control que admite plantillas

Puede personalizar los controles de Windows Presentation Foundation (WPF) y Microsoft Silverlight creando y modificando las plantillas y estilos de los controles. El resultado es un aspecto único y coherente para su aplicación.

Las plantillas y los estilos definen, respectivamente, las partes que componen un control y el comportamiento predeterminado del mismo. Las plantillas y los estilos se crean mediante copias de los estilos y plantillas predeterminados del sistema para un control (no se pueden modificar los estilos ni las plantillas del sistema). La modificación de las plantillas y los estilos es una forma sencilla de crear controles nuevos en la vista Diseño de Microsoft Expression Blend sin tener que usar código.

Diferencia entre estilos y plantillas

En la tabla siguiente, se proporciona una comparación detallada de los estilos y las plantillas para ayudarle a decidir si desea modificar el estilo o la plantilla de un control, o ambos:

Característica	Estilos	Plantillas
Objetivo	Mediante los estilos, puede modificar los valores predeterminados de las propiedades establecidas en el control al que se aplica el estilo. Por ejemplo, puede especificar colores predeterminados para el fondo, el borde y el primer plano de un control, como un botón. Estas propiedades de estilo pueden reemplazarse por los valores establecidos en el control cuando éste se dibuja en la mesa de trabajo. Por ejemplo, si establece el color del fondo en azul en el estilo de un botón, el botón aparecerá en azul cuando se dibuje en la mesa de trabajo, pero podrá cambiarlo. Sólo puede establecer propiedades ya existentes en el estilo. Por ejemplo, no puede establecer un valor predeterminado para una propiedad que pertenezca a una nueva parte que ha agregado a la plantilla. Por último, puede usar los estilos para especificar el comportamiento predeterminado de un control. Por ejemplo, en un estilo para un botón, puede especificar un desencadenador para que, cuando el usuario mueva el puntero sobre el botón, el color del fondo cambie. Estos cambios en las propiedades son instantáneos (no pueden animarse gradualmente).	Mediante las plantillas, puede modificar la estructura del control al que se aplica la plantilla. Puede modificar una plantilla de control para reorganizar, agregar o eliminar los objetos (o elementos) del control. Por ejemplo, puede agregar el diseño o la imagen del fondo a un control, como un botón. También puede modificar los valores de las propiedades (como el color del fondo) establecidas en el control al que se aplica la plantilla. Estos valores de plantilla no pueden reemplazarse por los valores establecidos en el control cuando éste se dibuja en la mesa de trabajo. Sin embargo, puede usar el enlace a plantilla para establecer las propiedades de una plantilla de acuerdo con los valores de las propiedades del control cuando se dibuja en la mesa de trabajo. Al modificar una plantilla, tiene acceso a más partes de un control que al modificar un estilo. Por ejemplo, puede cambiar la forma en que aparece una lista emergente en un cuadro combinado, o bien puede cambiar la apariencia del botón que desencadena la lista emergente en el cuadro combinado si modifica la plantilla de elementos. Algunas plantillas constan de las siguientes partes: ContentPresenter    Una ranura de contenido es un marcador de posición de la plantilla de control que se usa para mostrar el contenido del control al que se aplica la plantilla. Puede ser el valor de una propiedad de contenido (por ejemplo, en un botón) o una propiedad de texto (en un cuadro de texto). Header    Algunos controles tienen varias propiedades con contenido. En este caso, se usa una ranura de contenido adicional en la plantilla como marcador de posición para el tipo de contenido que se usa como encabezado. Un ejemplo de un control con encabezado es un control de elemento de ficha en el que el encabezado es la etiqueta de la ficha y el contenido se muestra debajo del encabezado. ItemsHost    Host de elementos. Se usa como marcador de posición para los objetos secundarios de un control. La parte del host de elementos de una plantilla se identifica con IsItemsHost = True en el panel Propiedades. ItemContainerTemplate    Una plantilla de contenedores de elementos se aplica a un control que contiene elementos, como los controles Menu o List . Esta plantilla se usa cuando se agregan elementos a la lista. Por último, puede especificar el comportamiento de cualquier parte nueva o existente de una plantilla mediante desencadenadores. Por ejemplo, puede especificar un desencadenador para que, cuando el usuario mueva el puntero sobre un botón, el color de una de las partes cambie. Estos cambios en las propiedades pueden ser instantáneos o animados para crear una transición suave. Nota: No puede animar a partir del valor de una propiedad enlazada mediante plantilla o de un recurso de color a otro valor. Al usar animaciones en los desencadenadores, use valores de propiedades específicos.
Modificar	Puede entrar en el modo de edición para un estilo de las siguientes formas: Mediante el menú En Objetos y escala de tiempo, seleccione el control. En el menú Objeto, elija Editar estilo. Realice una de las siguientes acciones: Haga clic en Editar actual (si desea cambiar el estilo aplicado actualmente al control). Haga clic en Editar una copia (para crear una copia del estilo aplicado actualmente al control y, simultáneamente, aplicar el nuevo estilo al control). La opción Editar estilo no estará disponible si el estilo del sistema está aplicado al control.. Para obtener un ejemplo, vea Crear un estilo. Mediante el panel Recursos (para modificar un estilo existente) En el panel Recursos, busque el estilo y haga clic en el botón Editar recurso situado junto al estilo. Nota: Los estilos y las plantillas son recursos que pueden aplicarse a los controles de distintas formas y almacenarse en diferentes lugares de la aplicación. Para obtener un ejemplo de cómo crear un estilo, vea Crear un estilo.	Puede entrar en el modo de edición para una plantilla de control de las siguientes formas: Mediante el menú En Objetos y escala de tiempo, seleccione el control. Realice una de las siguientes acciones: En el menú Objeto, elija Editar plantilla. Haga clic con el botón secundario en el control y elija Editar plantilla. Haga clic en Editar actual (si desea modificar la plantilla actualmente aplicada al control) o en Editar una copia (para crear y aplicar al control simultáneamente una copia de la plantilla aplicada actualmente al control). La opción Editar actual no estará disponible si la plantilla del sistema está aplicada al control. Para obtener un ejemplo, vea Crear o modificar una plantilla. Mediante el panel Recursos (para modificar una plantilla existente) En el panel Recursos, busque el estilo que contiene la plantilla y haga clic en el botón Editar recurso situado al lado del estilo. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en los objetos Style, seleccione Editar plantilla y haga clic en Editar actual. Sugerencia: Las plantillas de control están incluidas en los estilos, por lo que el estilo que se aplica a un control incluye la apariencia (partes) y el comportamiento del control. El motivo de hacer clic en Editar plantilla en lugar de Editar una copia es que la copia del estilo incluye la plantilla.Para volver al ámbito de edición del documento principal, debe hacer clic en Devolver ámbito a  dos veces, ya que el primer clic le devolverá al modo de edición del estilo. Nota: Los estilos y las plantillas son recursos que pueden aplicarse a los controles de distintas formas y almacenarse en diferentes lugares de la aplicación. Para obtener un ejemplo de cómo crear una plantilla, vea Crear o modificar una plantilla.
Aplicar	Puede aplicar un estilo existente a un control en la mesa de trabajo de las siguientes formas: Mediante el menú En Objetos y escala de tiempo, seleccione el control. En el menú Objeto, seleccione Editar estilo, elija Aplicar recurso y, a continuación, seleccione el estilo en la lista desplegable que aparece. En la lista desplegable sólo se mostrarán los estilos disponibles para el control seleccionado. Por ejemplo, no puede aplicar un estilo de cuadro de texto a un botón. Mediante el panel Activos para dibujar un control con estilo en la mesa de trabajo Abra el panel Activos haciendo clic en Activos . Realice una de las siguientes acciones: Si el estilo se creó en el documento en el que está trabajando, haga clic en la categoría Estilos. Si el estilo se creó en un diccionario de recursos, expanda la categoría Estilos y haga clic en el nombre del diccionario. Seleccione el estilo que desee y, a continuación, dibuje en la mesa de trabajo.	Puede aplicar una plantilla existente a un control en la mesa de trabajo de las siguientes formas: Mediante el menú En Objetos y escala de tiempo, seleccione el control. En el menú Objeto, seleccione Editar plantilla, elija Aplicar recurso y, a continuación, seleccione la plantilla en la lista desplegable que aparece. En la lista desplegable solo se mostrarán las plantillas disponibles para el control seleccionado. Por ejemplo, no puede aplicar una plantilla de cuadro de texto a un botón. Mediante el panel Activos para dibujar un control con plantilla en la mesa de trabajo Las plantillas están contenidas en estilos. Para aplicar una plantilla a un control en la mesa de trabajo, use el mismo método que para aplicar estilos.

Expression Blend incluye un conjunto de plantillas y estilos simples agrupados en un diccionario de recursos en proyectos de WPF. Los diccionarios de recursos pueden usarse para diseñar un tema para la aplicación. Para obtener más información, vea la sección "Estilos simples y diccionarios de recursos", más adelante en este tema.

Modificar estilos y plantillas

Cuando se encuentre en el ámbito de edición de un estilo o una plantilla en Expression Blend, aparecerá una barra de ruta de navegación en la parte superior izquierda de la mesa de trabajo.

Barra de ruta de navegación con el modo de edición de plantillas seleccionado

Si hace clic en los botones de la barra de ruta de navegación, podrá moverse rápidamente por los modos de edición de plantillas, edición de estilos y ámbito de edición de objetos correspondientes al objeto seleccionado. La barra de ruta de navegación aparece para cualquier objeto seleccionado que tenga un estilo personalizado o una plantilla aplicada.

Para obtener información sobre cómo modificar un estilo o plantilla, vea Editar un estilo y Crear o modificar una plantilla.

Procedimientos recomendados

Cuando modifique estilos o plantillas, asegúrese de adoptar los siguientes procedimientos recomendados.

• Evite cambiar los desencadenadores existentes excepto cuando cambie sólo los pinceles de color.

• No cambie el nombre de ningún objeto cuyo nombre empiece por "PART_" ni los modifique porque el código que implementa el control hace referencia a estos objetos.

• No quite los objetos auxiliares, como, por ejemplo, TabPanel en SimpleTabControl , o Track en SimpleScrollBar . Es necesario que estos objetos estén presentes para mantener las capacidades del control.

• No restablezca ni cambie ningún enlace en el panel Propiedades. Se identifican por medio del resaltado amarillo que rodea a la propiedad o mediante el botón amarillo Opciones avanzadas. El enlace a plantilla se usa para enlazar las propiedades de la plantilla a las propiedades del control al que se aplica la plantilla.

• Si la plantilla incluye un objeto de ranura (por ejemplo, ContentPresenter o ItemsPresenter ), asegúrese de mantener este objeto en la plantilla. Los objetos de ranura muestran el contenido que está definido en el control al que se aplica la plantilla.

Precaución:
Al modificar plantillas y estilos, debe recordar estos puntos clave para no romper la funcionalidad del control del sistema al que se aplica el estilo o la plantilla.

Temas

Un tema es un conjunto de estilos y plantillas que produce una apariencia coherente para los controles de la interfaz de usuario.

Para determinar la apariencia de un control (por ejemplo, un botón), una aplicación buscará en las siguientes ubicaciones:

1. Propiedades que se establecen en un control   Por ejemplo, si desea crear un botón en Expression Blend y después cambiar el color de fondo directamente en el botón. Al establecer una propiedad directamente en un control, se reemplaza cualquier valor que esa propiedad tenga establecido en cualquier otro sitio.

2. Propiedades que se establecen en la plantilla o el estilo personalizado usado en un control   Por ejemplo, si desea crear un botón en Expression Blend y, a continuación, modificar una copia de la plantilla para establecer el color de fondo en la plantilla. Se trata del color del fondo que se usará para el botón si la propiedad Background no se establece directamente en el botón. Puede definir los recursos dentro del documento que contiene el control, o bien puede definirlos en el nivel de la aplicación (con lo que estarán disponibles para todos los documentos de la aplicación). Los recursos del nivel de documento reemplazan a los recursos del nivel de aplicación.

3. Propiedades que se establecen en la plantilla del sistema usada por un control   WPF determina la plantilla del sistema en función del tema (en otras palabras, en función del sistema operativo).

Estilos simples y diccionarios de recursos

[!NOTA]

En proyectos de Silverlight no se admiten estilos simples.

Puede crear de forma efectiva un tema mediante la creación de recursos de propiedades, estilos y plantillas en un archivo individual denominado diccionario de recursos . Los diccionarios de recursos permiten volver a usar un tema en varias aplicaciones. También puede crear temas intercambiables si define varios diccionarios de recursos que proporcionen los mismos tipos de recursos, pero con diferentes valores. Por ejemplo, la aplicación Expression Blend usa distintos diccionarios de recursos para un tema oscuro y un tema claro, entre los que puede alternar haciendo clic en Opciones en el menú Herramientas y cambiando el Tema del Área de trabajo.

Para sus propias aplicaciones, Expression Blend proporciona un diccionario de recursos listo para usar denominado SimpleStyles.xaml que contiene un conjunto de estilos para controles comunes, como botones, cuadros de lista y otros. Puede obtener acceso a estos estilos en Simple Styles, en la categoría Estilos del panel Activos. Al usar uno de los estilos simples para dibujar un control en la mesa de trabajo, se crea la versión del sistema del control y, simultáneamente, se aplica el estilo simple. Por ejemplo, si crea un objeto Button del sistema en la mesa de trabajo, el lenguaje de marcado de aplicaciones extensible (XAML) resultante será como el que aparece a continuación:

<Button Content="Button" ... />

Si crea un SimpleButton en la mesa de trabajo, el XAML resultante incluirá una referencia al estilo SimpleButton :

<Button Content="Button" 
    Style="{DynamicResource SimpleButton}"
   ... />

Después de agregar un control de estilo simple a la mesa de trabajo, se agrega el archivo del diccionario de recursos SimpleStyles.xaml al proyecto y se vincula al archivo app.xaml, de forma que los estilos se definirán en el ámbito de la aplicación. Puede ver todos los estilos en el panel Recursos.

Para obtener más información sobre cómo administrar los recursos, vea Crear recursos reutilizables.

Vea también

Conceptos

Sugerencias para la aplicación de estilos a Simple Styles de WPF
Sugerencias para la aplicación de estilos a controles Silverlight comunes

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.