feat: update radio button theme, pending on card and pure card.

update checkbox glyphs.
This commit is contained in:
rabbitism
2022-12-09 19:14:03 +08:00
parent 8c19376e7c
commit c509d2024a
11 changed files with 460 additions and 29 deletions

View File

@@ -1,14 +1,9 @@
<Window
Title="Semi.Demo"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d"
x:Class="Semi.Avalonia.Demo.MainWindow"
xmlns="https://github.com/avaloniaui"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:pages="using:Semi.Avalonia.Demo.Pages"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
x:Class="Semi.Avalonia.Demo.MainWindow" xmlns="https://github.com/avaloniaui"
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:pages="using:Semi.Avalonia.Demo.Pages"
Title="Semi.Demo" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
<TabControl TabStripPlacement="Left">
<TabItem Header="Button">
<pages:ButtonDemo />
@@ -16,5 +11,8 @@
<TabItem Header="CheckBox">
<pages:CheckBoxDemo />
</TabItem>
<TabItem Header="RadioButton">
<pages:RadioButtonDemo />
</TabItem>
</TabControl>
</Window>

View File

@@ -1,4 +1,5 @@
using Avalonia.Controls;
using Avalonia.Interactivity;
namespace Semi.Avalonia.Demo
{

View File

@@ -0,0 +1,56 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" xmlns="https://github.com/avaloniaui"
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" d:DesignHeight="450"
d:DesignWidth="800" mc:Ignorable="d">
<StackPanel
Margin="20" HorizontalAlignment="Left"
Spacing="20">
<TextBlock Text="Radio Buttons" />
<StackPanel>
<RadioButton>111</RadioButton>
<RadioButton>222</RadioButton>
<RadioButton>333</RadioButton>
</StackPanel>
<TextBlock Text="Radio Button as Button" />
<Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
<RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小2</RadioButton>
</StackPanel>
</Border>
<Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
<RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
</StackPanel>
</Border>
<Border Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
<RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
</StackPanel>
</Border>
<TextBlock Text="Radio Button as Card" />
<StackPanel Width="300">
<RadioButton Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
</StackPanel>
</StackPanel>
</UserControl>

View File

@@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Semi.Avalonia.Demo.Pages;
public partial class RadioButtonDemo : UserControl
{
public RadioButtonDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}