Información general sobre estilos y plantillas

Puede personalizar los controles de Windows Presentation Foundation (WPF) y Silverlight 2 de muchas formas, por ejemplo, creando un conjunto de plantillas y estilos para los controles. De esta forma, obtiene una apariencia coherente y única para la aplicación.

[!NOTA]

Los estilos y plantillas no se admiten en los proyectos de Microsoft Silverlight 1.0, pero puede crear clases JavaScript para definir controles reutilizables. Para obtener un ejemplo, vea la clase Button en el ejemplo ButtonGallery que se encuentra disponible en la ficha Ejemplos de la Pantalla de bienvenida (en el menú Ayuda). Para obtener más información, vea el área de recursos de Silverlight (puede estar en inglés).

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 de 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 del mouse 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 elementos (o partes) 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: Content Presenter   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. Items Host   Un host de elementos se usa como marcador de posición para los elementos secundarios de un control. La parte del host de elementos de una plantilla se identifica mediante Is_Items_Host = 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 del mouse 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 estilo (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 se aplica al control. Para obtener un ejemplo, vea Crear un recurso de estilo. Mediante el panel Recursos (para modificar un estilo existente) 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 recurso de 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 partes del control (Plantilla). Haga clic con el botón secundario en el control y elija Editar partes del control (Plantilla). Haga clic en Editar plantilla (si desea modificar la plantilla actualmente aplicada al control) o en Editar una copia (para crear una copia de la plantilla aplicada actualmente al control y, simultáneamente, aplicar la nueva plantilla al control). La opción Editar plantilla no estará disponible si la plantilla del sistema se aplica al control. Para obtener un ejemplo, vea Crear o editar una plantilla de control. 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 Objetos y escala de tiempo, haga clic con el botón secundario en los elementos Style, seleccione Editar partes del control(Plantilla) y, a continuación, haga clic en Editar plantilla. 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. Éste es el motivo por el que se hace clic en Editar plantilla en lugar de en Editar una copia, ya que la copia del estilo incluye la plantilla.Para volver al ámbito de edición del documento principal, es necesario hacer clic en el botón Ámbito superior  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 editar una plantilla de control.
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 biblioteca para dibujar un control con estilo en la mesa de trabajo Abra el Panel biblioteca . Realice una de las siguientes acciones: Si el estilo se creó en el documento en el que está trabajando, haga clic en la ficha Estilos locales. Si el estilo se creó en un diccionario de recursos (sólo WPF), haga clic en la ficha Controles y, a continuación, seleccione el 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. Realice una de las siguientes acciones: En el menú Objeto, elija Editar partes del control (Plantilla). Haga clic con el botón secundario en el control y elija Editar partes del control (Plantilla). Haga clic en Editar plantilla (si desea modificar la plantilla actualmente aplicada al control) o en Editar una copia (para crear una copia de la plantilla aplicada actualmente al control y, simultáneamente, aplicar la nueva plantilla al control). La opción Editar plantilla no estará disponible si la plantilla del sistema se aplica al control. Para obtener un ejemplo, vea Crear o editar una plantilla de control. 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 Objetos y escala de tiempo, haga clic con el botón secundario en los elementos Style, seleccione Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla. Para volver al ámbito de edición del documento principal, es necesario hacer clic en el botón Ámbito superior  dos veces, ya que el primer clic le devolverá al modo de edición del estilo.

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 sobre estilos simples y diccionarios de recursos.

Volver al principio

Modificar estilos y plantillas

Cuando se encuentra en el ámbito de edición de un estilo o plantilla en Expression Blend 2, aparece 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 editar una plantilla de control. Cuando modifique estilos o plantillas, asegúrese de adoptar las siguientes Prácticas recomendadas.

Volver al principio

Prácticas recomendadas

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

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

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

• No quite ningún elemento auxiliar, como TabPanel en SimpleTabControl o Track en SimpleScrollBar. Es necesario que estos elementos 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 de la propiedad. El enlace de 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 elemento de ranura (por ejemplo, ContentPresenter o ItemsPresenter), asegúrese de mantener este elemento en la plantilla. Los elementos de ranura muestran el contenido que está definido en el control al que se aplica la plantilla.

Volver al principio

Temas

Un tema es un conjunto de estilos y plantillas que produce una apariencia coherente para los controles de la interfaz de usuario. Por ejemplo, Windows Presentation Foundation usa un tema para las aplicaciones de WPF que se ejecutan en Microsoft Windows XP y otro tema distinto para las aplicaciones de WPF que se ejecutan en Windows Vista. El motivo es que el mismo botón tendrá una apariencia diferente en cada uno de los dos sistemas operativos.

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

Volver al principio

Estilos simples y diccionarios de recursos

[!NOTA]

Los estilos simples y los diccionarios de recursos no son compatibles con proyectos de Silverlight 2.

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 ficha Controles del Panel biblioteca. 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 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 ejemplos del uso de estilos simples, vea los temas de Estilos simples. Para obtener más información sobre cómo administrar los recursos, vea Información general de recursos.

Volver al principio