Geekly articles weekly

Stylish Avalonia

Os estilos, por padrão, no wpf, no Avalonia, são neutros e longe de sempre adequados para as tarefas que precisamos. Neste artigo, gostaria de falar sobre o básico de trabalhar com estilos e mostrar alguns exemplos interessantes.



Por que precisamos de estilos na estrutura Avalonia?

  1. Os estilos oferecem mais liberdade ao personalizar elementos;
  2. Não duplique descrições de itens;
  3. Separe a marcação em si e seu design.

Alguns exemplos


Para uma melhor compreensão dos estilos, primeiro observe um exemplo:

Botão arredondado (algo semelhante a um gnomo do ubuntu)
Para fazer isso, crie no modelo padrão ( como criar um modelo ) um layout simples da pilha do painel e alguns botões.

<StackPanel> <Button Margin = "20" Content = "Btn" /> <Button Margin = "20" Content = "Style Btn" /> </StackPanel>

Agora podemos definir o segundo plano principal dos botões e as cores da fonte, mas teremos que duplicar o código. O estilo ajudará a evitar essa repetição.

Adicione o estilo apropriado à janela:

  <Window.Styles> <Style Selector = "Button"> <Setter Property = "Foreground" Value = "# FFFFFFFF" /> <Setter Property = "BorderThickness" Value = "2" /> <Setter Property = "Background" Value = "# FFDD4812" /> <Setter Property = "BorderBrush" Value = "# FFFFFFFF" /> </Style> </Window.Styles>



Temos algo parecido, mas seria bom contornar as bordas. Infelizmente, não importa como tentamos, é impossível arredondar as bordas do botão, mas você pode arredondar as bordas do modelo responsável por exibir o botão. Para fazer isso, adicione outro estilo:

  <Style Selector = "Button / template / ContentPresenter"> <Setter Property = "CornerRadius" Value = "10" /> </Style>



Acabou quase parecido, mas há um problema - quando você passa o mouse sobre o botão, uma moldura cinza é exibida (olá do estilo padrão).



Para fazer isso, vá para a pseudo classe css : pointerover e adicione outro estilo:

  <Style Selector = "Button: pointerover / template / ContentPresenter"> <Setter Property = "BorderBrush" Value = "# FFDD4812" /> </Style>



Muito melhor.

Mas e se eu quiser aplicar estilos apenas a botões específicos?

Adicione mais um botão ao modelo e defina o atributo Classes como os botões que queremos “decorar”.

  <StackPanel> <Button Margin = "20" Content = "Btn" /> <Button Margin = "20" Classes = "btn" Content = "Style Btn" /> <Button Margin = "20" Classes = "btn" Content = "Style Btn" /> </StackPanel>

E indicaremos aos estilos que precisamos influenciar apenas determinadas classes:

  <Style Selector = "Button.btn / template / ContentPresenter"> <Setter Property = "CornerRadius" Value = "10" /> </Style> <Style Selector = "Button.btn"> <Setter Property = "Foreground" Value = "# FFFFFFFF" /> <Setter Property = "BorderThickness" Value = "2" /> <Setter Property = "Background" Value = "# FFDD4812" /> <Setter Property = "BorderBrush" Value = "# FFFFFFFF" /> </Style> <Style Selector = "Button: pointerover.btn / template / ContentPresenter"> <Setter Property = "BorderBrush" Value = "# FFDD4812" /> </Style>



Todo o código da janela
 <Window xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:Wind1.ViewModels;assembly=Wind1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="Wind1.Views.MainWindow" Icon="/Assets/avalonia-logo.ico" Title="Wind1"> <Window.Styles> <Style Selector="Button.btn /template/ ContentPresenter"> <Setter Property="CornerRadius" Value="10" /> </Style> <Style Selector="Button.btn"> <Setter Property="Foreground" Value="#FFFFFFFF" /> <Setter Property="BorderThickness" Value="2" /> <Setter Property="Background" Value="#FFDD4812" /> <Setter Property="BorderBrush" Value="#FFFFFFFF" /> </Style> <Style Selector="Button:pointerover.btn /template/ ContentPresenter"> <Setter Property="BorderBrush" Value="#FFDD4812" /> </Style> </Window.Styles> <StackPanel> <Button Margin="20" Content="Btn" /> <Button Margin="20" Classes="btn" Content="Style Btn" /> <Button Margin="20" Classes="btn" Content="Style Btn" /> </StackPanel> </Window>


Outro exemplo de estilo interessante
A caixa de seleção padrão é assim:



A caixa de seleção aprimorada é semelhante ao android (um pouco)



Um pouco de magia
  <Window.Styles> <Style Selector = "CheckBox.uberbox"> <Setter Property = "Template"> <Setter.Value> <ControlTemplate> <Grid> <Border Background = "# b0b0b0" Padding = "5" BorderBrush = "# 303030" CornerRadius = "5"> <Grid> <Grid Classes = "unchecked" ColumnDefinitions = "Auto, Auto"> <Border Width = "20" Height = "20" Background = "Blue" CornerRadius = "5" /> <TextBlock FontWeight = "Bold" Margin = "5,0,0,0" Grid.Column = "1"> 0FF </TextBlock> </Grid> <Grid Classes = "checked" ColumnDefinitions = "Auto, Auto"> <Border Grid.Column = "1" Width = "20" Height = "20" Background = "Red" CornerRadius = "5" /> <TextBlock FontWeight = "Bold" Margin = "0,0,5,0"> ON </TextBlock> </Grid> </Grid> </Border> <Border Classes = "fade" Background = "White" CornerRadius = "5" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style Selector = "CheckBox.uberbox / template / Grid.checked"> <Setter Property = "Opacity" Value = "0" /> </Style> <Style Selector = "CheckBox.uberbox: checked / template / Grid.checked"> <Setter Property = "Opacity" Value = "1" /> </Style> <Style Selector = "CheckBox.uberbox: checked / template / Grid.unchecked"> <Setter Property = "Opacity" Value = "0" /> </Style> <Style Selector = "CheckBox.uberbox / template / Border.fade"> <Setter Property = "Opacity" Value = "0" /> </Style> <Style Selector = "CheckBox.uberbox: pointerover / template / Border.fade"> <Setter Property = "Opacity" Value = "0.2" /> </Style> </Window.Styles> <StackPanel> <CheckBox Classes = "uberbox" Margin = "10" /> </StackPanel>



Onde usar estilos


Os estilos podem ser usados ​​na janela (como fizemos nos exemplos escritos acima),
e dentro de todo o aplicativo (o estilo será aplicado em todas as janelas).

Para fazer isso, adicione o estilo ao arquivo App.xaml

  <Application.Styles> <StyleInclude Source = "avares: //Avalonia.Themes.Default/DefaultTheme.xaml" /> <StyleInclude Source = "avares: //Avalonia.Themes.Default/Accents/BaseLight.xaml" /> <Style Selector = "Button"> <Setter Property = "Background" Value = "Blue"> </Setter> </Style> </Application.Styles>

Maior separação


Com a complicação do código, não queremos mais manter os estilos dentro do layout da janela, mas preferimos colocá-los em um arquivo separado:



Para fazer isso, crie o diretório Styles e coloque nossos estilos no formato xml ou xaml, adicionando o namespace:

  <Styles xmlns = "https://github.com/avaloniaui" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: sys = "clr-namespace: System; assembly = netstandard"> <Style Selector = "Button / template / ContentPresenter"> <Setter Property = "CornerRadius" Value = "10" /> </Style> <Style Selector = "Button"> <Setter Property = "Foreground" Value = "# FFFFFFFF" /> <Setter Property = "BorderThickness" Value = "2" /> <Setter Property = "Background" Value = "# FFDD4812" /> <Setter Property = "BorderBrush" Value = "# FFFFFFFF" /> </Style> <Style Selector = "Button: pointerover / template / ContentPresenter"> <Setter Property = "BorderBrush" Value = "# FFDD4812" /> </Style> </Styles>

Adicione novos recursos ao arquivo do projeto (* .csproj):

  <AvaloniaResource Include = "Styles \ **" />

E conecte-os usando a tag StyleInclude

  <Window.Styles> <StyleInclude Source = "/ Styles / Style.xml" /> </Window.Styles>

Mas às vezes isso não é suficiente, e quero colocar os estilos em uma dll separada para usar em todos os meus projetos.

Para fazer isso, crie uma ClassLibrary e forneça suporte para nossos arquivos futuros como recurso avaloina:

  <ItemGroup> <AvaloniaResource Include="**\*.xaml"> <SubType>Designer</SubType> </AvaloniaResource> </ItemGroup> <ItemGroup> <AvaloniaResource Include="**\*.xml"> <SubType>Designer</SubType> </AvaloniaResource> </ItemGroup>

Agora adicione o já familiar Styles.xml e mais 2 novos arquivos ao projeto:



No arquivo xaml, você deve especificar o espaço para nome e a classe à qual ele pertence, bem como a conexão do recurso necessário:

  <Styles xmlns = "https://github.com/avaloniaui" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" x: Class = "ClassLibrary1.DarkCustom"> <StyleInclude Source = "avares: //ClassLibrary1/Style.xml" /> </Styles>

E no arquivo cs, definimos que este é um estilo e não mais:

  namespace ClassLibrary1 { public class DarkCustom: Styles { } }

Adicione uma dependência à nossa biblioteca e reconecte o estilo, especificando o estilo como um recurso de avalonia usando StyleInclude e

  <Window.Styles> <StyleInclude Source = "avares: //ClassLibrary1/DarkCustom.xaml" /> </Window.Styles>

Algumas coisas mais úteis


Não deixe de conferir o Tutorial oficial de estilo da Avalonia ( aqui )
Você pode obter idéias básicas sobre como escrever um estilo para um elemento aqui ( aqui )
E se você não tiver tempo / desejo para criar seu próprio estilo, poderá usar este maravilhoso gerador de estilos ( aqui )



Gostaria de dizer obrigado ForNeVeR kekekeks worldbeater

Source: https://habr.com/ru/post/pt471342/

More articles:


All Articles