Guia de início rápido: Controles de estilo
Idioma: HTML | XAML

Guia de início rápido: Controles de estilo (XAML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

A estrutura XAML oferece muitas maneiras de personalizar a aparência de seus aplicativos. Os estilos permitem definir propriedades de controle e reutilizar essas configurações para criar uma aparência consistente para vários controles.

Mapa: Como este tópico está relacionado aos outros? Veja:

Este tópico contém as seguintes seções:

Pré-requisitos

Presumimos que você saiba adicionar controles à sua interface do usuário, definir as suas propriedades e atribuir manipuladores de eventos. Para obter instruções sobre como adicionar controles ao seu aplicativo, consulte Guia de início rápido: adicionando controles e manipulando eventos.

Noções básicas de estilos

Use estilos para extrair configurações de propriedades visuais para recursos reutilizáveis. Aqui está um exemplo que mostra 3 botões com um estilo que define as propriedades BorderBrush, BorderThickness e Foreground. Aplicando um estilo, você não precisa definir essas propriedades separadamente em cada controle e os controle têm todos a mesma aparência.

Botões com estilo definido

Você pode definir um estilo embutido em XAML (Extensible Application Markup Language) para um controle, ou como um recurso reutilizável. 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. 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. O local onde o recurso é definido determina o escopo no qual ele pode ser usado. Recursos de nível de página estão disponíveis somente na página em que são definidos. Se recursos com a mesma chave forem definidos em App.xaml e em uma página, o recurso na página substituirá o recurso em 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.

Na definição de Style, você precisa de um atributo TargetType e de uma coleção de um ou mais elementos Setter. O atributo TargetType é uma cadeia de caracteres que especifica um tipo FrameworkElement ao qual aplicar o estilo. O valor de TargetType deve especificar um tipo derivado de FrameworkElement definido pelo Tempo de Execução do Windows ou um tipo personalizado disponível em um assembly referenciado. 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á.

Cada elemento Setter requer uma Property e um 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. Você pode definir Setter.Value com a sintaxe de atributos ou de elemento de propriedade. Esse XAML mostra o estilo que usamos no exemplo anterior. Nesse XAML, os primeiros dois elementos Setter usam a sintaxe de atributos, mas o último Setter, para a propriedade BorderBrush, usa a sintaxe de elementos de propriedade. O exemplo não usa o atributo x:Key e, portanto, o estilo é aplicado implicitamente aos botões. A aplicação implícita ou explícita de estilos é explicada na próxima seção.


<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Blue" />
        <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>


Aplicando um estilo implícito ou explícito

Se você definir um estilo como um recurso, há duas maneiras de aplicá-lo aos seus controles:

  • Implicitamente, especificando apenas um TargetType para o Style.
  • Explicitamente, especificando um TargetType e um atributo x:Key para o Style e, em seguida, definindo a propriedade Style do controle de destino com uma referência de StaticResource que ussa a chave explícita.

Se um estilo contiver o atributo x:Key, você só pode aplicá-lo a um controle definindo a propriedade Style do controle como o estilo de chave. Em contraste, 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.

Aqui há dois botões que demonstram estilos implícitos e explícitos.

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

Neste exemplo, o primeiro estilo possui um atributo x:Key e seu tipo de destino é Button. A propriedade Style do primeiro botão é definida para essa chave, de maneira que esse estilo é aplicado explicitamente. O segundo estilo é aplicado explicitamente ao segundo botão porque seu tipo de destino é Button e o estilo não possui um atributo x:Key.


<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Foreground" Value="MediumOrchid" />
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Lucida Sans Unicode" />
        <Setter Property="FontStyle" Value="Italic" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
</Page.Resources>
<Grid x:Name="LayoutRoot">
    <Button Content="Button" Height="23" Width="75" Style="{StaticResource PurpleStyle}" />
    <Button Content="Button" Height="23" Width="75" />
</Grid>


Usando estilos baseados

Para facilitar a manutenção de estilos e otimizar a reutilização de estilos, você pode criar estilos que herdam de outros estilos. Você usa a propriedade BasedOn para criar estilos herdados. 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. Por exemplo, se um estilo base tem como destino ContentControl, estilos baseados nesse estilo podem ter como alvo ContentControl ou tipos derivados de ContentControl, como Button e ScrollViewer. Se um valor não é definido no estilo baseado, ele é herdado do estilo base. Para alterar um valor do estilo base, o estilo baseado substitui esse valor. O próximo exemplo mostra um Button e uma CheckBox com estilos herdados do mesmo estilo base.

Botões estilizados com estilos baseados.

O estio base tem como destino ContentControl e define as propriedades Height e Width. Os estilos baseados neste estilo têm como destino CheckBox e Button, que derivam de ContentControl. Os estilos baseados definem cores diferentes para as propriedades BorderBrush e Foreground.


<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="100" />
        <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="Orange" />
    </Style>
    <Style x:Key="CheckBoxStyle" TargetType="CheckBox" BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<Grid Background="White">
    <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
    <CheckBox Content="CheckBox"  Style="{StaticResource CheckBoxStyle}"/>
</Grid>

Use ferramentas para trabalhar facilmente com estilos.

Uma forma rápida de aplicar estilos aos seus controle é clicar com o botão direito 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). Você pode, então, aplicar um estilo existente selecionando Aplicar Recurso ou pode definir um novo estilo selecionando Criar Vazio. 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.

Modificando os estilos padrão do Tempo de Execução do Windows

Você deve usar os estilos que provenientes dos recursos XAML padrão do Tempo de Execução do Windows sempre que possível. 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).

A propriedade Template

Um setter de estilo pode ser usado para a propriedade Template de um Control e, de fato, isso forma a maior parte de um estilo XAML típico e dos recursos XAML de um aplicativo. Isso é discutido com mais detalhes no tópico Guia de início rápido: modelos de controle.

Tópicos relacionados

Mapa para criação de aplicativos usando C#, C++ ou VB
Adicionando controles e conteúdo
Guia de início rápido: modelos de controle
Referências de recursos XAML e ResourceDictionary
Style
Setter
Atributo x:Key

 

 

Mostrar:
© 2017 Microsoft