Geekly articles weekly

Stylish Avalonia

Os estilos, por padrão, que no wpf, no Avalonia, são extremamente neutros e longe de sempre adequados para as tarefas que precisamos, e poucos desenvolvedores iniciantes são amigos deles. 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. Permitir não duplicar descrições de elementos;
  3. Separe a marcação em si e seu design.

Alguns exemplos


Para uma melhor compreensão dos estilos, primeiro nos voltamos para um exemplo:

Botão arredondado (algo como um gnomo do ubuntu)
Para fazer isso, criaremos no modelo padrão ( como criar um modelo ) uma marcação simples da pilha do painel e alguns botões.

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

Agora podemos manipular os botões com o fundo principal e a cor 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 tentemos, é 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 escreva nos botões que queremos “decorar” o atributo Classes .

  <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:



Um pouco melhorado é semelhante ao android (um pouco)



Alguma mágica
 <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 lá na forma de arquivos xml ou xaml, adicionando as instruções do 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 avaloniya:

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

Agora adicione o 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>

Alguns mais úteis


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



Gostaria de dizer obrigado a ForNeVer kekekeks worldbeater

E observe que o suporte ao c # pode ser encontrado aqui e ao Avalonia aqui .

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

More articles:


All Articles