Estilos de XAMLXAML styles

É possível personalizar a aparência de seus aplicativos de muitas formas usando a estrutura XAML.You can customize the appearance of your apps in many ways by using the XAML framework. Os estilos permitem definir propriedades de controle e reutilizar essas configurações para criar uma aparência consistente em vários controles.Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.

Noções básicas de estilosStyle basics

Use estilos para extrair configurações de propriedades visuais para recursos reutilizáveis.Use styles to extract visual property settings into reusable resources. Aqui está um exemplo que mostra 3 botões com um estilo que define as propriedades BorderBrush, BorderThickness e Foreground.Here's an example that shows 3 buttons with a style that sets the BorderBrush, BorderThickness and Foreground properties. Ao aplicar um estilo, você torna igual a aparência dos controles sem precisar definir essas propriedades em cada controle separadamente.By applying a style, you can make the controls appear the same without having to set these properties on each control separately.

Captura de tela de três botões estilizados dispostos lado a lado.

Você pode definir um estilo embutido na linguagem XAML para um controle, ou como um recurso reutilizável.You can define a style inline in the XAML for a control, or as a reusable resource. Defina recursos no arquivo XAML de uma página individual, no arquivo App.xaml ou em um arquivo XAML de dicionário de recursos separado.Define resources in an individual page's XAML file, in the App.xaml file, or in a separate resource dictionary XAML file. Um arquivo XAML do dicionário de recursos pode ser compartilhado entre aplicativos e mais de um dicionário de recursos pode ser mesclado em um único aplicativo.A resource dictionary XAML file can be shared across apps, and more than one resource dictionary can be merged in a single app. O local onde o recurso é definido determina o escopo no qual ele pode ser usado.Where the resource is defined determines the scope in which it can be used. Recursos de nível de página estão disponíveis somente na página em que são definidos.Page-level resources are available only in the page where they are defined. Se recursos com a mesma chave forem definidos tanto no App.xaml quanto em uma página, o recurso na página substituirá o recurso no aplicativo 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. Se um recurso estiver definido em um arquivo de dicionário de recurso separado, seu escopo será determinado pela referência de onde partiu o dicionário do recurso.If a resource is defined in a separate resource dictionary file, its scope is determined by where the resource dictionary is referenced.

Na definição de Style, você precisa de um atributo TargetType e de uma coleção de um ou mais elementos Setter.In the Style definition, you need a TargetType attribute and a collection of one or more Setter elements. O atributo TargetType é uma cadeia de caracteres que especifica um tipo FrameworkElement ao qual aplicar o estilo.The TargetType attribute is a string that specifies a FrameworkElement type to apply the style to. O valor de TargetType deve especificar um tipo derivado de FrameworkElement definido pelo Windows Runtime ou um tipo personalizado disponível em um assembly referenciado.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. Se você tentar aplicar um estilo a um controle, e o tipo do controle não corresponder ao atributo TargetType do estilo que você está tentando aplicar, uma exceção ocorrerá.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 requer uma Property e um Value.Each Setter element requires a Property and a Value. Essas configurações de propriedade indicam a qual propriedade de controle a configuração se aplica e qual é o valor a ser definido para essa propriedade.These property settings indicate what control property the setting applies to, and the value to set for that property. Você pode definir Setter.Value com a sintaxe de elemento de propriedade ou atributo.You can set the Setter.Value with either attribute or property element syntax. O XAML aqui mostra o estilo aplicado aos botões mostrados anteriormente.The XAML here shows the style applied to the buttons shown previously. Nesse XAML, os dois primeiros elementos Setter usam a sintaxe de atributos, mas o último Setter para a propriedade BorderBrush usa a sintaxe de elementos de propriedade.In this XAML, the first two Setter elements use attribute syntax, but the last Setter, for the BorderBrush property, uses property element syntax. O exemplo não usa o atributo x:Key; portanto, o estilo é aplicado implicitamente aos botões.The example doesn't use the x:Key attribute attribute, so the style is implicitly applied to the buttons. A aplicação implícita ou explícita de estilos é explicada na próxima seção.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 um estilo implícito ou explícitoApply an implicit or explicit style

Se você definir um estilo como um recurso, haverá duas maneiras de aplicá-lo aos seus controles:If you define a style as a resource, there are two ways to apply it to your controls:

Se um estilo contiver o atributo x:Key, você só poderá aplicá-lo a um controle definindo a propriedade Style do controle como o estilo com chave.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 outro lado, um estilo sem um atributo x:Key é automaticamente aplicado a todos os controles do seu tipo de destino que, de outra forma, não teriam uma definição 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.

Aqui há dois botões que demonstram estilos implícitos e explícitos.Here are two buttons that demonstrate implicit and explicit styles.

botões com o estilo definido de forma implícita e explícita.

Neste exemplo, o primeiro estilo tem um atributo x:Key, e seu tipo de destino é Button.In this example, the first style has an x:Key attribute and its target type is Button. A propriedade Style do primeiro botão é definida para essa chave, de maneira que esse estilo é aplicado explicitamente.The first button's Style property is set to this key, so this style is applied explicitly. O segundo estilo é aplicado explicitamente ao segundo botão porque seu tipo de destino é Button e o estilo não tem um 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 baseados em outrosUse based-on styles

Para facilitar a manutenção de estilos e otimizar sua reutilização, você pode criar estilos que herdam de outros estilos.To make styles easier to maintain and to optimize style reuse, you can create styles that inherit from other styles. Você usa a propriedade BasedOn para criar estilos herdados.You use the BasedOn property to create inherited styles. Estilos que herdam de outros estilos devem ter como destino o mesmo tipo de controle ou um controle derivado do tipo de destino do 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 exemplo, se um estilo base tiver como destino ContentControl, estilos baseados nesse estilo poderão ter como alvo ContentControl ou tipos derivados de ContentControl, como Button e 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. Se um valor não é definido no estilo baseado, ele é herdado do estilo base.If a value is not set in the based-on style, it's inherited from the base style. Para alterar um valor do estilo base, o estilo baseado substitui esse valor.To change a value from the base style, the based-on style overrides that value. O próximo exemplo mostra um Button e uma CheckBox com estilos herdados do mesmo estilo base.The next example shows a Button and a CheckBox with styles that inherit from the same base style.

botões estilizados com estilos baseados.

O estilo base tem como destino ContentControl e define as propriedades Height e Width.The base style targets ContentControl, and sets the Height, and Width properties. Os estilos baseados neste estilo têm como destino CheckBox e Button, que derivam de ContentControl.The styles based on this style target CheckBox and Button, which derive from ContentControl. Os estilos baseados definem cores diferentes para as propriedades BorderBrush e Foreground.The based-on styles set different colors for the BorderBrush and Foreground properties. (Normalmente você não coloca uma borda ao redor de uma CheckBox.(You don't typically put a border around a CheckBox. Fazemos isso aqui para mostrar os efeitos do 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>

Use ferramentas para trabalhar facilmente com estilosUse tools to work with styles easily

Uma forma rápida de aplicar estilos aos seus controles é clicar com o botão direito do mouse em um controle na superfície de design XAML do Microsoft Visual Studio e selecionar Editar Estilo ou Editar Modelo (dependendo do controle no qual você está clicando com o botão direito).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). Você pode, então, aplicar um estilo existente selecionando Aplicar Recurso ou pode definir um novo estilo selecionando Criar Vazio.You can then apply an existing style by selecting Apply Resource or define a new style by selecting Create Empty. Se você criar um estilo vazio, terá a opção de defini-lo na página, no arquivo App.xaml ou em um dicionário de recursos separado.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.

Estilo leveLightweight styling

Substituir os pincéis do sistema é geralmente feito no nível do aplicativo ou da página e, em ambos os casos, a substituição de cor afetará todos os controles que fazem referência a esse pincel – e, em XAML, muitos controles podem referenciar o mesmo pincel de 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.

Captura de tela de dois botões: um no estado de repouso e outro com estilo leve aplicado.

<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 (mouse passa sobre o botão), PointerPressed (botão foi invocado) ou Desabilitado (botão não é interativo).For states like PointerOver (mouse is hovered over the button), PointerPressed (button has been invoked), or Disabled (button is not interactable). Essas terminações são acrescentadas aos nomes de estilo leve originais: ButtonBackgroundPointerOver, ButtonForegroundPointerPressed, ButtonBorderBrushDisabled, etc. A modificação daqueles pincéis, também, irá assegurar que seus controles sejam coloridos conforme o tema do seu aplicativo.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.

Colocar essas substituições de pincel no nível App.Resources irá alterar todos os botões dentro do aplicativo inteiro, em vez de em uma única 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.

Estilo por controlePer-control styling

Em outros casos, é desejável mudar um único controle em uma página somente para ter uma determinada aparência, sem alterar outras versões daquele controle: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:

Captura de tela de três botões estilizados, empilhados uns sobre os outros.

<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"/>

Isso só teria efeito naquela "Special CheckBox" na página em que esse controle existia.This would only effect that one “Special CheckBox” on the page where that control existed.

Modificar os estilos de sistema padrãoModify the default system styles

Você deve usar os estilos provenientes dos recursos XAML padrão do Windows Runtime sempre que possível.You should use the styles that come from the Windows Runtime default XAML resources when you can. Quando for necessário definir seus próprios estilos, tente baseá-los nos estilos padrão sempre que possível (usando estilos baseados conforme explicado anteriormente ou editando uma cópia do estilo padrão 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).

A propriedade TemplateThe template property

Um setter de estilo pode ser usado para a propriedade Template de um Control e, na verdade, isso compõe a maior parte de um estilo XAML típico e dos recursos XAML de um aplicativo.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. Isso é discutido com mais detalhes no tópico Modelos de controle.This is discussed in more detail in the topic Control templates.