Trabajar con estilos simples

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.

[!NOTA]

Los estilos simples de Expression Blend no están disponibles en los proyectos Microsoft Silverlight 1.0, pero se pueden crear clases JavaScript para definir controles reutilizables. Para obtener un ejemplo, vea la clase Button del ejemplo ButtonGallery, disponible en la ficha Ejemplos de la Pantalla de bienvenida (en el menú Ayuda). Para obtener más información, vea la página del centro de aprendizaje de Silverlight (puede estar en inglés).

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

Volver al principio

Crear un control de estilo simple

Los estilos simples están disponibles en la ficha Controles del Panel biblioteca si hace clic en Simple Styles. Active la casilla Mostrar todo para ver todos los estilos simples disponibles. Después de seleccionar un estilo simple en el Panel biblioteca, el icono del estilo simple aparece sobre el botón Panel biblioteca 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.

Si desea que los estilos simples se apliquen a las herramientas que están disponibles en las listas desplegables para algunas de las herramientas del cuadro de herramientas, puede hacer clic en el botón Usar como predeterminado en el Panel biblioteca cuando Simple Styles esté seleccionado en la ficha Controles.

Panel biblioteca que muestra los controles de estilo simple disponibles y la opción de convertirlos en estilos predeterminados

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
SimpleCheckBox	CheckBox
SimpleComboBox	ComboBox
SimpleComboBoxItem	ComboBoxItem
SimpleExpander	Expander
SimpleLabel	Etiqueta
SimpleListBox	ListBox
SimpleListBoxItem	ListBoxItem
SimpleMenu	Menu
SimpleMenuItem	MenuItem
SimpleProgressBar	ProgressBar
SimpleRadioButton	RadioButton
SimpleRepeatButton	RepeatButton en un control ListBox
SimpleScrollBar	ScrollBar
SimpleScrollBarRepeatButtonStyle	RepeatButton en un control ScrollBar
SimpleScrollViewer	ScrollViewer
SimpleSeparator	Separator en un control ListBox, Menu o ToolBar
SimpleSlider	Slider
SimpleSliderThumb	Thumb en un control Slider
SimpleTabControl	TabControl
SimpleTabItem	TabItem en un TabControl
SimpleTextBox	TextBox
SimpleThumbStyle	Thumb en un control ScrollBar en un control ListBox
SimpleTreeView	TreeView
SimpleTreeViewItem	TreeViewItem en un control TreeView
SimpleTreeViewItemToggleButton	ToggleButton en un control TreeView

Volver al principio

Modificar estilos simples

Los recursos de estilo simple se encuentran dentro de un diccionario de recursos llamado SimpleStyles.xaml. Después de agregar un estilo simple a la mesa de trabajo del cuadro de herramientas, el diccionario de recursos SimpleStyles.xaml se agrega al proyecto y todos los recursos de estilo simple pueden verse 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 Información general sobre la apariencia.

  Editar un recurso de pincel en el panel Recursos

  

• 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

  

• 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 con el estilo, puede establecer los desencadenadores de propiedades y eventos en la plantilla de control. Para cambiar la plantilla de control de un estilo simple, haga clic en el botón Editar recurso situado junto al estilo simple en el panel Recursos, haga clic con el botón secundario en el elemento Style que aparece en Objetos y escala de tiempo, seleccione Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.

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

  

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

Para obtener una comparación detallada entre estilos y plantillas, vea Estilos y plantillas. Para obtener información específica acerca de los estilos simples y ejemplos de la modificación de estilos simples y plantillas de control, vea los temas que aparecen bajo los encabezados Referencia y Inténtelo en Estilos simples.

Volver al principio

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 en este manual del usuario. Para obtener más información acerca de los recursos, vea Información general de recursos en este manual del usuario.

Volver al principio