Estilos XAMLXAML styles

El marco XAML te permite personalizar la apariencia de tus aplicaciones de varias maneras.You can customize the appearance of your apps in many ways by using the XAML framework. Los estilos te permiten establecer propiedades de control y reusar esa configuración para mantener un aspecto uniforme en varios controles.Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.

Conceptos básicos de estilosStyle basics

Los estilos te permiten extraer opciones de configuración de propiedades visuales en recursos reutilizables.Use styles to extract visual property settings into reusable resources. Este es un ejemplo en el que se muestran tres botones con un estilo que establece las propiedades BorderBrush, BorderThickness y Foreground.Here's an example that shows 3 buttons with a style that sets the BorderBrush, BorderThickness and Foreground properties. Al aplicar un estilo, puedes hacer que todos los controles tengan el mismo aspecto no tener que establecer estas propiedades en cada control de manera independiente.By applying a style, you can make the controls appear the same without having to set these properties on each control separately.

botones con estilo

Puedes definir un estilo en línea en el lenguaje XAML para un control o como una fuente reutilizable.You can define a style inline in the XAML for a control, or as a reusable resource. Define recursos en un archivo XAML de una página individual, en el archivo App.xaml o en un archivo XAML de diccionario de recursos independiente.Define resources in an individual page's XAML file, in the App.xaml file, or in a separate resource dictionary XAML file. Varias aplicaciones pueden compartir un mismo archivo XAML de diccionario de recursos y se pueden combinar varios diccionarios de recursos en una sola aplicación.A resource dictionary XAML file can be shared across apps, and more than one resource dictionary can be merged in a single app. El lugar donde se define el recurso determina el ámbito en el que puede usarse.Where the resource is defined determines the scope in which it can be used. Los recursos de nivel de página se encuentran disponibles solo en la página donde se definen.Page-level resources are available only in the page where they are defined. Si tanto en App.xaml como en la página se definen con la misma clave, el recurso de la página invalida al recurso de App.xaml.If resources with the same key are defined in both App.xaml and in a page, the resource in the page overrides the resource in App.xaml. Si un recurso se define en un archivo de diccionario de recursos diferente, su ámbito se determina por el lugar donde se hace referencia al diccionario de recursos.If a resource is defined in a separate resource dictionary file, its scope is determined by where the resource dictionary is referenced.

En la definición de Style, necesitas un atributo TargetType y una colección de uno o más elementos Setter.In the Style definition, you need a TargetType attribute and a collection of one or more Setter elements. El atributo TargetType es una cadena que especifica un tipo FrameworkElement al que aplicarle el estilo.The TargetType attribute is a string that specifies a FrameworkElement type to apply the style to. El valor TargetType debe especificar un tipo derivado de FrameworkElement definido por Windows Runtime o un tipo personalizado que esté disponible en un ensamblado referido.The TargetType value must specify a FrameworkElement-derived type that's defined by the Windows Runtime or a custom type that's available in a referenced assembly. Si intentas aplicar un estilo a un control y el tipo del control no coincide con el atributo TargetType de dicho estilo, se produce una excepción.If you try to apply a style to a control and the control's type doesn't match the TargetType attribute of the style you're trying to apply, an exception occurs.

Cada elemento Setter requiere una propiedad Property y una propiedad Value.Each Setter element requires a Property and a Value. Esta configuración de las propiedades indica a qué propiedades del control se aplica la configuración, y el valor que se fija para esa propiedad.These property settings indicate what control property the setting applies to, and the value to set for that property. Puedes establecer Setter.Value con sintaxis de atributo o elemento de propiedad.You can set the Setter.Value with either attribute or property element syntax. El XAML muestra el estilo que se aplica a los botones que se mostraron anteriormente.The XAML here shows the style applied to the buttons shown previously. En este XAML, los dos primeros elementos Setter usan la sintaxis de atributo, pero el último Setter, para la propiedad BorderBrush, usa la sintaxis de elemento de propiedad.In this XAML, the first two Setter elements use attribute syntax, but the last Setter, for the BorderBrush property, uses property element syntax. En el ejemplo no se usa el atributo x:Key, por lo que el estilo se aplica implícitamente a los botones.The example doesn't use the x:Key attribute attribute, so the style is implicitly applied to the buttons. La aplicación de estilos de manera implícita o explícita se explica en la siguiente sección.Applying styles implicitly or explicitly is explained in the next section.

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<StackPanel Orientation="Horizontal">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</StackPanel>

Aplicar un estilo implícito o explícitoApply an implicit or explicit style

Si defines un estilo como un recurso, puedes aplicarlo a los controles de dos maneras:If you define a style as a resource, there are two ways to apply it to your controls:

Si un estilo contiene el atributo x:Key, solo puedes aplicarlo a un control mediante el establecimiento de la propiedad Style del control en el estilo con clave.If a style contains the x:Key attribute, you can only apply it to a control by setting the Style property of the control to the keyed style. Por el contrario, un estilo sin un atributo x:Key se aplica automáticamente a cada control de su tipo de destino si el control no tiene una opción de estilo explícita.In contrast, a style without an x:Key attribute is automatically applied to every control of its target type, that doesn't otherwise have an explicit style setting.

Aquí hay dos botones que muestran los estilos implícitos y explícitos.Here are two buttons that demonstrate implicit and explicit styles.

botones con estilos implícitos y explícitos.

En este ejemplo, el primer estilo tiene un atributo x:Key y su tipo de destino es Button.In this example, the first style has an x:Key attribute and its target type is Button. La propiedad Style del primer botón se establece en esta clave, por lo que este estilo se aplica de manera explícita.The first button's Style property is set to this key, so this style is applied explicitly. El segundo estilo se aplica de manera implícita al segundo botón porque su tipo de destino es Botón y el estilo no tiene un atributo x:Key.The second style is applied implicitly to the second button because its target type is Button and the style doesn't have an x:Key attribute.

<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="Purple"/>
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25"/>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Green"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Foreground" Value="Green"/>
    </Style>
</Page.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="Button" Style="{StaticResource PurpleStyle}"/>
    <Button Content="Button"/>
</Grid>

Usar estilos heredadosUse based-on styles

Para crear estilos que sean más fáciles de mantener y optimizar la reutilización de estilos, puedes crear estilos que hereden de otros estilos.To make styles easier to maintain and to optimize style reuse, you can create styles that inherit from other styles. Usa la propiedad BasedOn para crear estilos heredados.You use the BasedOn property to create inherited styles. Los estilos que heredan de otros estilos deben apuntar al mismo tipo de control o a uno que derive del tipo al que apunta el estilo base.Styles that inherit from other styles must target the same type of control or a control that derives from the type targeted by the base style. Por ejemplo, si un estilo base apunta a ContentControl, los estilos que estén basados en este estilo pueden apuntar a ContentControl o a tipos que deriven de ContentControl, como Button y ScrollViewer.For example, if a base style targets ContentControl, styles that are based on this style can target ContentControl or types that derive from ContentControl such as Button and ScrollViewer. Si no se establece un valor en el estilo heredado, se hereda del estilo base.If a value is not set in the based-on style, it's inherited from the base style. Para cambiar un valor del estilo base, el estilo heredado invalida ese valor.To change a value from the base style, the based-on style overrides that value. En el siguiente ejemplo se muestra un elemento Button y un elemento CheckBox con estilos que heredan del mismo estilo base.The next example shows a Button and a CheckBox with styles that inherit from the same base style.

botones con estilos que usan estilos heredados.

El estilo base apunta a ContentControl y establece las propiedades Height y Width.The base style targets ContentControl, and sets the Height, and Width properties. Los estilos basados en este estilo apuntan a CheckBox y Button, que derivan de ContentControl.The styles based on this style target CheckBox and Button, which derive from ContentControl. Los estilos heredados establecen distintos colores para las propiedades BorderBrush y Foreground.The based-on styles set different colors for the BorderBrush and Foreground properties. (Normalmente no se coloca un borde alrededor de una Casilla.(You don't typically put a border around a CheckBox. Lo hacemos aquí para mostrar los efectos del estilo.)We do it here to show the effects of the style.)

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="130" />
        <Setter Property="Height" Value="30" />
    </Style>

    <Style x:Key="ButtonStyle" TargetType="Button"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <Style x:Key="CheckBoxStyle" TargetType="CheckBox"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Blue" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<StackPanel>
    <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="0,10"/>
    <CheckBox Content="CheckBox" Style="{StaticResource CheckBoxStyle}"/>
</StackPanel>

Usar herramientas para trabajar con estilos fácilmenteUse tools to work with styles easily

Una manera rápida de aplicar estilos a los controles es hacer clic con el botón secundario en un control de la superficie de diseño XAML de Microsoft Visual Studio y seleccionar Editar estilo o Editar plantilla (según el control en el que estás haciendo clic con el botón secundario).A fast way to apply styles to your controls is to right-click on a control on the Microsoft Visual Studio XAML design surface and select Edit Style or Edit Template (depending on the control you are right-clicking on). Después, puedes aplicar un estilo existente si seleccionas Aplicar recurso o definir un estilo nuevo si seleccionas Crear vacío.You can then apply an existing style by selecting Apply Resource or define a new style by selecting Create Empty. Si creas un estilo vacío, tienes la opción de definirlo en la página, en el archivo App.xaml o en un diccionario de recursos independiente.If you create an empty style, you are given the option to define it in the page, in the App.xaml file, or in a separate resource dictionary.

Estilos ligerosLightweight styling

Por norma general, los pinceles del sistema se reemplazan en el nivel de página o aplicación y, en cualquier caso, la sustitución del color afectará a todos los controles que hacen referencia a ese pincel. Además, en XAML, muchos controles pueden hacer referencia al mismo pincel del sistema.Overriding the system brushes is generally done at the App or Page level, and in either case the color override will affect all controls that reference that brush – and in XAML many controls can reference the same system brush.

botones con estilo

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                 <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                 <SolidColorBrush x:Key="ButtonForeground" Color="MediumSlateBlue"/>
                 <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

Para estados como PointerOver (se sitúa el mouse sobre el botón), PointerPressed (se ha invocado el botón), o Disabled (el botón no es interactivos).For states like PointerOver (mouse is hovered over the button), PointerPressed (button has been invoked), or Disabled (button is not interactable). Estos finales se anexan a los nombres de estilo ligero originales: ButtonBackgroundPointerOver, ButtonForegroundPointerPressed, ButtonBorderBrushDisabled, etc. Al modificar esos pinceles, te asegurarás de que tus controles tengan colores homogéneos en el tema de la aplicación.These endings are appended onto the original Lightweight styling names: ButtonBackgroundPointerOver, ButtonForegroundPointerPressed, ButtonBorderBrushDisabled, etc. Modifying those brushes as well, will make sure that your controls are colored consistently to your app's theme.

Al colocar estos reemplazos de pincel en el nivel de recursos de la aplicación, se modificarán todos los botones de toda la aplicación, en lugar de en una sola página.Placing these brush overrides at the App.Resources level, will alter all the buttons within the entire app, instead of on a single page.

Estilos según el controlPer-control styling

En otros casos se desea modificar un solo control de una página para que tenga un aspecto determinado, sin alterar ninguna otra versión de ese control:In other cases, changing a single control on one page only to look a certain way, without altering any other versions of that control, is desired:

botones con estilo

<CheckBox Content="Normal CheckBox" Margin="5"/>
<CheckBox Content="Special CheckBox" Margin="5">
    <CheckBox.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="CheckBoxForegroundUnchecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxForegroundChecked"
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundChecked"
                        Color="White"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked"  
                        Color="Purple"/>
                    <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked"
                        Color="Purple"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </CheckBox.Resources>
</CheckBox>
<CheckBox Content="Normal CheckBox" Margin="5"/>

Esto solo afectaría a esa "casilla especial" en la página donde estuviera el control.This would only effect that one “Special CheckBox” on the page where that control existed.

Modificar los estilos predeterminados del sistemaModify the default system styles

Debes usar los estilos que vienen con los recursos XAML predeterminados de Windows Runtime cada vez que puedas.You should use the styles that come from the Windows Runtime default XAML resources when you can. Cuando tengas que definir tus propios estilos, intenta basarte en los predeterminados siempre que sea posible (para ello, usa estilos heredados como se explicó antes o empieza a editar una copia del estilo predeterminado original).When you have to define your own styles, try to base your styles on the default ones when possible (using based-on styles as explained earlier, or start by editing a copy of the original default style).

La propiedad TemplateThe template property

Se puede usar un establecedor de estilo para la propiedad Template de Control. De hecho, esto conforma la mayor parte de un estilo XAML típico y los recursos XAML de una aplicación.A style setter can be used for the Template property of a Control, and in fact this makes up the majority of a typical XAML style and an app's XAML resources. Esto se explica con más detalle en el tema Plantillas de control.This is discussed in more detail in the topic Control templates.