Compartir a través de


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

This page applies to WPF projects only

Microsoft Expression Blend permite ir más allá del simple trabajo con controles del sistema o predeterminados al diseñar la interfaz de usuario (UI) para su aplicación. Puede personalizar y dar estilo a los controles para adaptarlos a su gusto y hacer que se comporten como desee y, mediante el uso de los recursos de Expression Blend, también puede proporcionar a sus controles una apariencia atractiva y única para diferenciar su aplicación de otras y, de esta forma, crear una marca muy personalizada o una interfaz de usuario uniforme en todas sus aplicaciones.

¿Qué son los estilos simples?

Los estilos simples son un conjunto de recursos de estilo personalizados y listos para usar en un conjunto de controles del sistema comunes, como los controles Button y ListBox. Expression Blend proporciona estos recursos de estilo simple porque la modificación del estilo de un control del sistema requiere cierto conocimiento de los estilos y plantillas de Windows Presentation Foundation (WPF) para no romper la funcionalidad del control. Puede usar los estilos simples en Expression Blend como un conjunto de recursos independiente que puede modificar rápidamente para crear una apariencia única para su aplicación, sin necesidad de entender el funcionamiento de los estilos y las plantillas de WPF.

Crear un control de estilo simple

Los estilos simples están disponibles en el panel Activos de la categoría Estilos si hace clic en Simple Styles. Después de seleccionar un estilo simple en el panel Activos, el icono del estilo simple aparece debajo del botón ActivosCc294894.0d8b8d29-1af9-418f-8741-be3097d76eab(ES-ES,Expression.30).png y está seleccionado, listo para dibujarse en la mesa de trabajo. Al dibujar un estilo simple (como SimpleButton) en la mesa de trabajo, lo que en realidad hace es crear una instancia del control del sistema (como Button), pero con el estilo SimpleButton aplicado.

Panel Activos mostrando los controles de estilo simple disponibles

Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(ES-ES,Expression.30).png

En la siguiente tabla, se enumeran los estilos simples disponibles y los controles a los que se aplican.

Estilo simple

Control al que se aplica

Iconos

SimpleButton

Button

Cc294894.05df1779-a68f-436b-b834-a91b7995a3ec(ES-ES,Expression.30).png

SimpleCheckBox

CheckBox

Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(ES-ES,Expression.30).png

SimpleComboBox

ComboBox

Cc294894.b174a511-dd12-4a45-a986-034de7693de9(ES-ES,Expression.30).png

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(ES-ES,Expression.30).png

SimpleLabel

Etiqueta

Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(ES-ES,Expression.30).png

SimpleListBox

ListBox

Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ES-ES,Expression.30).png

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(ES-ES,Expression.30).png

SimpleMenuItem

MenuItem

Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(ES-ES,Expression.30).png

SimpleProgressBar

ProgressBar

Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(ES-ES,Expression.30).png

SimpleRadioButton

RadioButton

Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(ES-ES,Expression.30).png

SimpleRepeatButton

RepeatButton en un control ListBox

SimpleScrollBar

ScrollBar

Cc294894.6513a026-499e-4296-8a67-7558b466bd33(ES-ES,Expression.30).png

SimpleScrollBarRepeatButtonStyle

RepeatButton en un control ScrollBar

SimpleScrollViewer

ScrollViewer

Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(ES-ES,Expression.30).png

SimpleSeparator

Separator en un control ListBox, Menu o ToolBar

SimpleSlider

Slider

Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(ES-ES,Expression.30).png

SimpleSliderThumb

Thumb en un control Slider

SimpleTabControl

TabControl

Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(ES-ES,Expression.30).png

SimpleTabItem

TabItem en un TabControl

SimpleTextBox

TextBox

Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(ES-ES,Expression.30).png

SimpleThumbStyle

Thumb en un control ScrollBar en un control ListBox

SimpleTreeView

TreeView

Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(ES-ES,Expression.30).png

SimpleTreeViewItem

TreeViewItem en un control TreeView

SimpleTreeViewItemToggleButton

ToggleButton en un control TreeView

Modificar estilos simples

Los recursos de estilo simple se encuentran en un diccionario de recursos denominado SimpleStyles.xaml. Después de agregar un estilo simple a la mesa de trabajo desde el panel Herramientas, se agrega el diccionario de recursos SimpleStyles.xaml al proyecto y todos los recursos de estilo simple están visibles en el panel Recursos.

El diccionario de recursos SimpleStyles.xaml incluye recursos de pincel y otras plantillas que los estilos simples usan. Puede realizar cualquiera de los cambios siguientes en los estilos simples:

  • Cambiar los colores   Los colores usados por todos los estilos simples se almacenan como recursos que puede cambiar.

    Para cambiar uno de los recursos de color, haga clic en el botón de flecha abajo situado junto al recurso de color en el panel Recursos.

    Para obtener información acerca de los pinceles, vea Establecer colores, pinceles y máscaras.

    Editar un recurso de pincel en el panel Recursos

    Cc294894.64136c65-52bc-4225-a948-b1171634baca(ES-ES,Expression.30).png

  • Cambiar el estilo   Puede usar el estilo de un control en Expression Blend para especificar las propiedades y los desencadenadores que usará como valores predeterminados el control al que se aplica el estilo. Las propiedades (como el color de pincel de fondo) afectarán a la apariencia del control y los desencadenadores afectarán a la forma en que el control responde ante los eventos y los cambios en las propiedades. Por ejemplo, el estilo SimpleButton incluye un desencadenador para la propiedad IsMouseOver (mouse sobre) que cambia la apariencia del botón cuando el usuario mueve el puntero del mouse sobre el control. El desencadenador se activa cuando la propiedad IsMouseOver (mouse sobre) cambia de False a True.

    Para cambiar uno de los estilos simples, haga clic en el botón Editar recurso situado junto al estilo simple en el panel Recursos.

    Editar un recurso de estilo en el panel Recursos

    Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(ES-ES,Expression.30).png

  • Cambiar la plantilla de control   La plantilla de un control determina su apariencia mediante la definición de los controles secundarios que contiene el control. Por ejemplo, la plantilla de control del elemento SimpleTextBox contiene un elemento Grid, que a su vez contiene un elemento Border, que contiene un elemento ScrollViewer denominado PART_ContentHost. El elemento ScrollViewer muestra el contenido del TextBox cuando el estilo SimpleTextBox se aplica a un TextBox en la mesa de trabajo. Al igual que el estilo, puede establecer desencadenadores de propiedades y eventos en la plantilla del control.

    Para cambiar la plantilla de control de un estilo simple, haga clic en el botón Editar recurso junto al estilo simple en el panel Recursos, haga clic con el botón secundario en el elemento Estilo que aparece en el panel Objetos y escala de tiempo, elija Editar plantilla y haga clic en Editar actual.

    Editar la plantilla de control desde el ámbito de edición del estilo

    Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(ES-ES,Expression.30).png

    Cc294894.alert_tip(ES-ES,Expression.30).gifSugerencia:

    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. Es importante recordar esto al elegir entre Editar una copia y Editar actual.

Para obtener una comparación detallada entre estilos y plantillas, vea Aplicar estilos a un control que admite plantillas.

Aplicar un recurso de estilo a un control existente de la mesa de trabajo

Los estilos simples son recursos que pueden aplicarse y administrarse como cualquier otro recurso.

Para obtener un ejemplo, vea Aplicar un recurso de estilo.

Para obtener más información acerca de los recursos, vea Crear recursos reutilizables.