WPF - Estilos

A estrutura .NET fornece várias estratégias para personalizar e personalizar a aparência de um aplicativo. Os estilos nos fornecem 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, Tamanho da fonte, etc.
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. Os estilos implícitos são usados para aplicar uma aparência a todos os controles de um determinado tipo e simplificar o aplicativo. Imagine três botões, todos eles devem ter a mesma aparência, mesma largura e altura, mesmo tamanho de fonte, mesma cor de primeiro plano, etc. Podemos definir todas essas propriedades nos próprios elementos do botão e isso ainda está bem para todos os botões. Dê uma olhada no diagrama a seguir.

Mas em aplicativos 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 e é 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. Dê uma olhada no diagrama a seguir.

Exemplo

Vamos dar um exemplo simples para entender esse conceito. Comece criando um novo projeto WPF.

Arraste três botões da caixa de ferramentas para a janela de design.
O código XAML a seguir cria três botões e os inicializa com algumas propriedades.

<Window x:Class = "WPFStyle.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: WPFStyle" 
   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 para o código acima, verá que para todos os botões a altura, largura, cor de primeiro plano, tamanho da fonte e propriedades de margem são iguais. Agora, quando o código acima for compilado e executado, a seguinte janela será exibida.

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 em 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 você compila e executa o código acima, ele exibe a seguinte janela (a mesma saída).

A vantagem de fazer assim é imediatamente óbvia, podemos reutilizar esse estilo em qualquer lugar em seu escopo; e se precisarmos mudá-lo, simplesmente mudamos uma vez na definição de 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. Os estilos podem ser definidos 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. A seguir, é fornecido um exemplo de nível de controle em que o botão e o TextBlock têm seu próprio estilo.
2	Nível de Layout Definir um estilo em qualquer nível de layout o tornará acessível apenas para aquele layout e seus elementos filho.
3	Nível da janela Definir um estilo em um nível de janela pode torná-lo acessível a todos os elementos dessa janela.
4	Nível de Aplicação Definir um estilo no nível do aplicativo pode torná-lo acessível em todo o aplicativo. Vamos pegar o mesmo exemplo, mas aqui colocaremos os estilos no arquivo app.xaml para torná-lo acessível em todo o aplicativo.

↰ Previous page Next page ↱