feat: implement CardBorder.

This commit is contained in:
rabbitism 2022-12-11 12:17:52 +08:00
parent db105b46f7
commit f55ead465c
10 changed files with 88 additions and 8 deletions

View File

@ -20,5 +20,8 @@
<TabItem Header="Label">
<pages:LabelDemo />
</TabItem>
<TabItem Header="Border">
<pages:BorderDemo />
</TabItem>
</TabControl>
</Window>

View File

@ -0,0 +1,17 @@
<UserControl
x:Class="Semi.Avalonia.Demo.Pages.BorderDemo" 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" Spacing="20">
<Border Theme="{StaticResource CardBorder}">
<TextBlock>Card</TextBlock>
</Border>
<Border Classes="Shadow" Theme="{StaticResource CardBorder}">
<TextBlock>Shadow Always Applied</TextBlock>
</Border>
<Border Classes="Hover" Theme="{StaticResource CardBorder}">
<TextBlock>Shadow on Pointerover</TextBlock>
</Border>
</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 BorderDemo : UserControl
{
public BorderDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

View File

@ -16,7 +16,7 @@ namespace Semi.Avalonia.Demo
public static AppBuilder BuildAvaloniaApp()
=> AppBuilder.Configure<App>()
.UsePlatformDetect()
.With(new Win32PlatformOptions(){ UseCompositor = false})
.With(new Win32PlatformOptions(){ UseCompositor = true})
.LogToTrace();
}
}

View File

@ -0,0 +1,36 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<StackPanel Margin="20" Spacing="20">
<Border Theme="{StaticResource CardBorder}">
<TextBlock>Hello</TextBlock>
</Border>
<Border Classes="Shadow" Theme="{StaticResource CardBorder}">
<TextBlock>Hello</TextBlock>
</Border>
<Border Classes="Hover" Theme="{StaticResource CardBorder}">
<TextBlock>Hello</TextBlock>
</Border>
</StackPanel>
</Design.PreviewWith>
<ControlTheme x:Key="RadioButtonGroupBorder" TargetType="Border">
<Setter Property="Border.CornerRadius" Value="{DynamicResource RadioButtonGroupCornerRadius}" />
<Setter Property="Border.Background" Value="{DynamicResource RadioButtonGroupBackground}" />
</ControlTheme>
<ControlTheme x:Key="CardBorder" TargetType="Border">
<Setter Property="Border.Padding" Value="{DynamicResource ThicknessCardPadding}" />
<Setter Property="Border.BorderBrush" Value="{DynamicResource BorderCardBorderBrush}" />
<Setter Property="Border.CornerRadius" Value="{DynamicResource RadiusCardCornerRadius}" />
<Setter Property="Border.Background" Value="{DynamicResource BorderCardBackground}" />
<Setter Property="Border.BorderThickness" Value="{DynamicResource ThicknessCardBorderThickness}" />
<Setter Property="Border.Margin" Value="{DynamicResource ThicknessCardMargin}" />
<Style Selector="^.Shadow">
<Setter Property="Border.BoxShadow" Value="0 0 14 #1A000000" />
</Style>
<Style Selector="^.Hover:pointerover">
<Setter Property="Border.BoxShadow" Value="0 0 14 #1A000000" />
</Style>
</ControlTheme>
</ResourceDictionary>

View File

@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />

View File

@ -183,7 +183,7 @@
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
FontSize="{TemplateBinding FontSize}"
RecognizesAccessKey="True" />
RecognizesAccessKey="True" UseLayoutRounding="True" />
</ControlTemplate>
</Setter>
<Style Selector="^.Large">

View File

@ -129,12 +129,6 @@
</Style>
</ControlTheme>
<ControlTheme x:Key="RadioButtonGroupBorder" TargetType="Border">
<Setter Property="Border.CornerRadius" Value="{DynamicResource RadioButtonGroupCornerRadius}" />
<Setter Property="Border.Background" Value="{DynamicResource RadioButtonGroupBackground}" />
</ControlTheme>
<ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton">
<Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
<Setter Property="RadioButton.Margin" Value="2" />

View File

@ -0,0 +1,10 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<SolidColorBrush x:Key="BorderCardBackground">White</SolidColorBrush>
<SolidColorBrush x:Key="BorderCardBorderBrush" Opacity="0.08" Color="#1C1F23" />
<CornerRadius x:Key="RadiusCardCornerRadius">4</CornerRadius>
<Thickness x:Key="ThicknessCardPadding">20</Thickness>
<Thickness x:Key="ThicknessCardMargin">4</Thickness>
<Thickness x:Key="ThicknessCardBorderThickness">1</Thickness>
</ResourceDictionary>

View File

@ -2,6 +2,7 @@
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Palette.axaml" />
<!-- Controls -->
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Border.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />