स्टाइलिश अवलोनिया

1. तत्वों को अनुकूलित करते समय शैलियाँ अधिक स्वतंत्रता देती हैं;
2. तत्वों के विवरण की नकल न करने दें;
3. मार्कअप को स्वयं और उसके डिज़ाइन को अलग करें।

उदाहरण के एक जोड़े

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

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

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

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

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

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

एक और दिलचस्प स्टाइलिंग उदाहरण

मानक चेकबॉक्स इस तरह दिखता है:



थोड़ा सुधरा हुआ Android के समान है (थोड़ा)

कुछ जादू

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

जहां शैलियों का उपयोग करने के लिए

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

ग्रेटर जुदाई

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

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

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

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

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

 namespace ClassLibrary1 { public class DarkCustom:Styles { } } 

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

कुछ और उपयोगी