XAML - Estilos

A estrutura XAML fornece várias estratégias para personalizar e personalizar a aparência de um aplicativo. Os estilos nos dão a flexibilidade de definir algumas propriedades de um objeto e reutilizar essas configurações específicas em vários objetos para uma aparência consistente.

Em estilos, você pode definir apenas as propriedades existentes de um objeto, como Altura, Largura e Tamanho da fonte.
Apenas o comportamento padrão de um controle pode ser especificado.
Várias propriedades podem ser adicionadas em um único estilo.

Os estilos são usados para dar uma aparência uniforme a um conjunto de controles. Estilos implícitos são usados para aplicar uma aparência a todos os controles de um determinado tipo e simplificar o aplicativo.

Imagine que temos três botões e todos eles têm que ter a mesma aparência - mesma largura e altura, mesmo tamanho de fonte e mesma cor de primeiro plano. Podemos definir todas essas propriedades nos próprios elementos do botão e isso ainda está bem para todos os botões, conforme mostrado no diagrama a seguir.

Mas em um aplicativo da vida real, você normalmente terá muito mais desses que precisam ser exatamente iguais. E não apenas botões, é claro, você normalmente deseja que seus blocos de texto, caixas de texto e caixas de combinação, etc., tenham a mesma aparência em seu aplicativo. Certamente deve haver uma maneira melhor de conseguir isso - é conhecido comostyling. Você pode pensar em um estilo como uma maneira conveniente de aplicar um conjunto de valores de propriedade a mais de um elemento, conforme mostrado no diagrama a seguir.

Vejamos o exemplo que contém três botões criados em XAML com algumas propriedades.

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button2" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/>
      
      <Button Content = "Button3" Height = "30" Width = "80" Foreground = "Blue" 
         FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

Quando você olhar o código acima, verá que para todos os botões, a altura, a largura, a cor do primeiro plano, o tamanho da fonte e as propriedades da margem permanecem as mesmas. Quando o código acima for compilado e executado, ele exibirá a seguinte saída -

Agora vamos dar uma olhada no mesmo exemplo, mas desta vez, vamos usar style.

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" mc:Ignorable = "d" 
   Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button">
         <Setter Property = "Height" Value = "30"/> 
         <Setter Property = "Width" Value = "80"/> 
         <Setter Property = "Foreground" Value = "Blue"/> 
         <Setter Property = "FontSize" Value = "12"/> 
         <Setter Property = "Margin" Value = "10"/> 
      </Style>
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}"/>
      <Button Content = "Button3" Style = "{StaticResource myButtonStyle}"/>
   </StackPanel>
	
</Window>

Os estilos são definidos no dicionário de recursos e cada estilo possui um identificador de chave exclusivo e um tipo de destino. Dentro de <style>, você pode ver que várias tags setter são definidas para cada propriedade que será incluída no estilo.

No exemplo acima, todas as propriedades comuns de cada botão agora são definidas no estilo e, em seguida, o estilo é atribuído a cada botão com uma chave exclusiva, definindo a propriedade de estilo por meio da extensão de marcação StaticResource.

Quando o código acima é compilado e executado, ele irá produzir a seguinte janela que é a mesma saída.

A vantagem de fazer assim é imediatamente óbvia. Podemos reutilizar esse estilo em qualquer lugar em seu escopo e, se precisarmos alterá-lo, simplesmente o alteramos uma vez na definição do estilo, em vez de em cada elemento.

Em que nível um estilo é definido limita instantaneamente o escopo desse estilo. Portanto, o escopo, ou seja, onde você pode usar o estilo, depende de onde você o definiu. O estilo pode ser definido nos seguintes níveis -

Sr. Não	Níveis e descrição
1	Nível de Controle Definir um estilo no nível de controle só pode ser aplicado a esse controle específico.
2	Nível de Layout A definição de um estilo em qualquer nível de layout só pode ser acessada por aquele layout e por seus elementos filhos.
3	Nível da janela Definir um estilo em um nível de janela pode ser acessado por todos os elementos dessa janela.
4	Nível de Aplicação Definir um estilo no nível do aplicativo torna-o acessível em todo o aplicativo.