zhusenlin/Semi.Avalonia
1
0
Fork 0
mirror of https://gitcode.com/gh_mirrors/se/Semi.Avalonia synced 2026-04-16 06:06:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: redesign GroupBox theme for HeaderedContentControl.

Browse Source 
Header & Content are now invisible when set to null.
SeparatorBorder is now influenced by BorderThickness.
Background is no longer transparent.
This commit is contained in:
Zhang Dian
2024-11-09 04:13:00 +08:00
parent d271b7e26c
commit 021ca97865
9 changed files with 200 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
View File

@@ -2,7 +2,7 @@
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"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="1450"
x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20">
@@ -27,12 +27,18 @@
</WrapPanel>
<TextBlock>GroupBox Theme</TextBlock>
<HeaderedContentControl
HorizontalAlignment="Left"
Theme="{DynamicResource GroupBox}"
Header="Semi Design"
Width="400"
Height="200">
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
HorizontalAlignment="Left"
MaxWidth="360">
<HeaderedContentControl.Header>
<Panel>
<SelectableTextBlock Text="Semi Design" />
<HyperlinkButton HorizontalAlignment="Right" Content="更多" />
</Panel>
</HeaderedContentControl.Header>
<HeaderedContentControl.Content>
<SelectableTextBlock Text="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。" />
</HeaderedContentControl.Content>
</HeaderedContentControl>
</StackPanel>
</ScrollViewer>

80
demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
View File

@@ -4,7 +4,7 @@
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:DesignHeight="800"
d:DesignWidth="800"
mc:Ignorable="d">
<ScrollViewer>
@@ -13,15 +13,13 @@
<Style Selector="Label">
<Setter Property="Margin" Value="4" />
</Style>
<Style Selector="Grid > TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
</Style>
</StackPanel.Styles>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel Orientation="Horizontal">
<StackPanel.Styles>
<Style Selector="Label, TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
</Style>
</StackPanel.Styles>
<HeaderedContentControl
Width="400"
Height="400"
@@ -32,62 +30,62 @@
<Grid
VerticalAlignment="Top"
ColumnDefinitions="Auto, *"
RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
<TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
<TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
<TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
<TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
<Label Grid.Row="2" Grid.Column="1">Text</Label>
RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
<TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
<TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
<TextBlock Grid.Row="9" Grid.Column="0">Code</TextBlock>
<Label Grid.Row="1" Grid.Column="1">Text</Label>
<Label
Grid.Row="3"
Grid.Row="2"
Grid.Column="1"
Classes="Secondary">
Secondary
</Label>
<Label
Grid.Row="4"
Grid.Row="3"
Grid.Column="1"
Classes="Tertiary">
Tertiary
</Label>
<Label
Grid.Row="5"
Grid.Row="4"
Grid.Column="1"
Classes="Quaternary">
Quaternary
</Label>
<Label
Grid.Row="6"
Grid.Row="5"
Grid.Column="1"
Classes="Success">
Success
</Label>
<Label
Grid.Row="7"
Grid.Row="6"
Grid.Column="1"
Classes="Warning">
Warning
</Label>
<Label
Grid.Row="8"
Grid.Row="7"
Grid.Column="1"
Classes="Danger">
Danger
</Label>
<Label
Grid.Row="9"
Grid.Row="8"
Grid.Column="1"
Classes="Mark">
Default Mark
</Label>
<Label
Grid.Row="10"
Grid.Row="9"
Grid.Column="1"
Classes="Code">
Code
@@ -104,51 +102,51 @@
<Grid
VerticalAlignment="Top"
ColumnDefinitions="Auto, *"
RowDefinitions="*,*,*,*,*,*,*,*">
<TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
RowDefinitions="*,*,*,*,*,*,*">
<TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
<Label
Grid.Row="2"
Grid.Row="1"
Grid.Column="1"
Classes="H1"
Theme="{StaticResource TitleLabel}">
Header 1
</Label>
<Label
Grid.Row="3"
Grid.Row="2"
Grid.Column="1"
Classes="H2"
Theme="{StaticResource TitleLabel}">
Header 2
</Label>
<Label
Grid.Row="4"
Grid.Row="3"
Grid.Column="1"
Classes="H3"
Theme="{StaticResource TitleLabel}">
Header 3
</Label>
<Label
Grid.Row="5"
Grid.Row="4"
Grid.Column="1"
Classes="H4"
Theme="{StaticResource TitleLabel}">
Header 4
</Label>
<Label
Grid.Row="6"
Grid.Row="5"
Grid.Column="1"
Classes="H5"
Theme="{StaticResource TitleLabel}">
Header 5
</Label>
<Label
Grid.Row="7"
Grid.Row="6"
Grid.Column="1"
Classes="H6"
Theme="{StaticResource TitleLabel}">

83
demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
View File

@@ -4,13 +4,13 @@
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:DesignHeight="600"
d:DesignWidth="800"
mc:Ignorable="d">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Horizontal">
<StackPanel.Styles>
<Style Selector="SelectableTextBlock">
<Style Selector="Grid > SelectableTextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
</Style>
@@ -25,70 +25,76 @@
<Grid
VerticalAlignment="Top"
ColumnDefinitions="Auto, *"
RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
<SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
<SelectableTextBlock Grid.Row="2" Grid.Column="0">-</SelectableTextBlock>
<SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
<SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
<SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
<SelectableTextBlock Grid.Row="6" Grid.Column="0">Success</SelectableTextBlock>
<SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</SelectableTextBlock>
<SelectableTextBlock Grid.Row="8" Grid.Column="0">Danger</SelectableTextBlock>
<SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
<SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
<SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
<Grid.Styles>
<Style Selector="SelectableTextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
</Style>
</Grid.Styles>
<SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
<SelectableTextBlock Grid.Row="1" Grid.Column="0">-</SelectableTextBlock>
<SelectableTextBlock Grid.Row="2" Grid.Column="0">Secondary</SelectableTextBlock>
<SelectableTextBlock Grid.Row="3" Grid.Column="0">Tertiary</SelectableTextBlock>
<SelectableTextBlock Grid.Row="4" Grid.Column="0">Quaternary</SelectableTextBlock>
<SelectableTextBlock Grid.Row="5" Grid.Column="0">Success</SelectableTextBlock>
<SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
<SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
<SelectableTextBlock Grid.Row="8" Grid.Column="0">Mark</SelectableTextBlock>
<SelectableTextBlock Grid.Row="9" Grid.Column="0">Underline</SelectableTextBlock>
<SelectableTextBlock Grid.Row="10" Grid.Column="0">Delete</SelectableTextBlock>
<SelectableTextBlock Grid.Row="2" Grid.Column="1">Text</SelectableTextBlock>
<SelectableTextBlock Grid.Row="1" Grid.Column="1">Text</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="3"
Grid.Row="2"
Grid.Column="1"
Classes="Secondary">
Secondary
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="4"
Grid.Row="3"
Grid.Column="1"
Classes="Tertiary">
Tertiary
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="5"
Grid.Row="4"
Grid.Column="1"
Classes="Quaternary">
Quaternary
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="6"
Grid.Row="5"
Grid.Column="1"
Classes="Success">
Success
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="7"
Grid.Row="6"
Grid.Column="1"
Classes="Warning">
Warning
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="8"
Grid.Row="7"
Grid.Column="1"
Classes="Danger">
Danger
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="9"
Grid.Row="8"
Grid.Column="1"
Classes="Mark">
Default Mark
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="10"
Grid.Row="9"
Grid.Column="1"
Classes="Underline">
Underline
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="11"
Grid.Row="10"
Grid.Column="1"
Classes="Delete">
Delete
@@ -104,53 +110,52 @@
Theme="{DynamicResource GroupBox}">
<Grid
VerticalAlignment="Top"
Background="{Binding}"
ColumnDefinitions="Auto, *"
RowDefinitions="*,*,*,*,*,*,*,*">
<SelectableTextBlock Grid.Row="1" Grid.Column="0">Classes</SelectableTextBlock>
<SelectableTextBlock Grid.Row="2" Grid.Column="0">H1</SelectableTextBlock>
<SelectableTextBlock Grid.Row="3" Grid.Column="0">H2</SelectableTextBlock>
<SelectableTextBlock Grid.Row="4" Grid.Column="0">H3</SelectableTextBlock>
<SelectableTextBlock Grid.Row="5" Grid.Column="0">H4</SelectableTextBlock>
<SelectableTextBlock Grid.Row="6" Grid.Column="0">H5</SelectableTextBlock>
<SelectableTextBlock Grid.Row="7" Grid.Column="0">H6</SelectableTextBlock>
RowDefinitions="*,*,*,*,*,*,*">
<SelectableTextBlock Grid.Row="0" Grid.Column="0">Classes</SelectableTextBlock>
<SelectableTextBlock Grid.Row="1" Grid.Column="0">H1</SelectableTextBlock>
<SelectableTextBlock Grid.Row="2" Grid.Column="0">H2</SelectableTextBlock>
<SelectableTextBlock Grid.Row="3" Grid.Column="0">H3</SelectableTextBlock>
<SelectableTextBlock Grid.Row="4" Grid.Column="0">H4</SelectableTextBlock>
<SelectableTextBlock Grid.Row="5" Grid.Column="0">H5</SelectableTextBlock>
<SelectableTextBlock Grid.Row="6" Grid.Column="0">H6</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="2"
Grid.Row="1"
Grid.Column="1"
Classes="H1"
Theme="{StaticResource TitleSelectableTextBlock}">
Header 1
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="3"
Grid.Row="2"
Grid.Column="1"
Classes="H2"
Theme="{StaticResource TitleSelectableTextBlock}">
Header 2
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="4"
Grid.Row="3"
Grid.Column="1"
Classes="H3"
Theme="{StaticResource TitleSelectableTextBlock}">
Header 3
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="5"
Grid.Row="4"
Grid.Column="1"
Classes="H4"
Theme="{StaticResource TitleSelectableTextBlock}">
Header 4
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="6"
Grid.Row="5"
Grid.Column="1"
Classes="H5"
Theme="{StaticResource TitleSelectableTextBlock}">
Header 5
</SelectableTextBlock>
<SelectableTextBlock
Grid.Row="7"
Grid.Row="6"
Grid.Column="1"
Classes="H6"
Theme="{StaticResource TitleSelectableTextBlock}">

75
demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
View File

@@ -10,7 +10,7 @@
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Horizontal">
<StackPanel.Styles>
<Style Selector="TextBlock">
<Style Selector="Grid > TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
</Style>
@@ -25,70 +25,70 @@
<Grid
VerticalAlignment="Top"
ColumnDefinitions="Auto, *"
RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
<TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
<TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
<TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
<TextBlock Grid.Row="10" Grid.Column="0">Underline</TextBlock>
<TextBlock Grid.Row="11" Grid.Column="0">Delete</TextBlock>
RowDefinitions="*,*,*,*,*,*,*,*,*,*,*">
<TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">-</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Secondary</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">Tertiary</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">Quaternary</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">Success</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
<TextBlock Grid.Row="8" Grid.Column="0">Mark</TextBlock>
<TextBlock Grid.Row="9" Grid.Column="0">Underline</TextBlock>
<TextBlock Grid.Row="10" Grid.Column="0">Delete</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">Text</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1">Text</TextBlock>
<TextBlock
Grid.Row="3"
Grid.Row="2"
Grid.Column="1"
Classes="Secondary">
Secondary
</TextBlock>
<TextBlock
Grid.Row="4"
Grid.Row="3"
Grid.Column="1"
Classes="Tertiary">
Tertiary
</TextBlock>
<TextBlock
Grid.Row="5"
Grid.Row="4"
Grid.Column="1"
Classes="Quaternary">
Quaternary
</TextBlock>
<TextBlock
Grid.Row="6"
Grid.Row="5"
Grid.Column="1"
Classes="Success">
Success
</TextBlock>
<TextBlock
Grid.Row="7"
Grid.Row="6"
Grid.Column="1"
Classes="Warning">
Warning
</TextBlock>
<TextBlock
Grid.Row="8"
Grid.Row="7"
Grid.Column="1"
Classes="Danger">
Danger
</TextBlock>
<TextBlock
Grid.Row="9"
Grid.Row="8"
Grid.Column="1"
Classes="Mark">
Default Mark
</TextBlock>
<TextBlock
Grid.Row="10"
Grid.Row="9"
Grid.Column="1"
Classes="Underline">
Underline
</TextBlock>
<TextBlock
Grid.Row="11"
Grid.Row="10"
Grid.Column="1"
Classes="Delete">
Delete
@@ -105,58 +105,57 @@
<Grid
VerticalAlignment="Top"
ColumnDefinitions="Auto, *"
RowDefinitions="*,*,*,*,*,*,*,*">
<TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">H1</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">H2</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">H3</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">H4</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">H5</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="0">H6</TextBlock>
RowDefinitions="*,*,*,*,*,*,*">
<TextBlock Grid.Row="0" Grid.Column="0">Classes</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0">H1</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">H2</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0">H3</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="0">H4</TextBlock>
<TextBlock Grid.Row="5" Grid.Column="0">H5</TextBlock>
<TextBlock Grid.Row="6" Grid.Column="0">H6</TextBlock>
<TextBlock
Grid.Row="2"
Grid.Row="1"
Grid.Column="1"
Classes="H1"
Theme="{StaticResource TitleTextBlock}">
Header 1
</TextBlock>
<TextBlock
Grid.Row="3"
Grid.Row="2"
Grid.Column="1"
Classes="H2"
Theme="{StaticResource TitleTextBlock}">
Header 2
</TextBlock>
<TextBlock
Grid.Row="4"
Grid.Row="3"
Grid.Column="1"
Classes="H3"
Theme="{StaticResource TitleTextBlock}">
Header 3
</TextBlock>
<TextBlock
Grid.Row="5"
Grid.Row="4"
Grid.Column="1"
Classes="H4"
Theme="{StaticResource TitleTextBlock}">
Header 4
</TextBlock>
<TextBlock
Grid.Row="6"
Grid.Row="5"
Grid.Column="1"
Classes="H5"
Theme="{StaticResource TitleTextBlock}">
Header 5
</TextBlock>
<TextBlock
Grid.Row="7"
Grid.Row="6"
Grid.Column="1"
Classes="H6"
Theme="{StaticResource TitleTextBlock}">
Header 6
</TextBlock>
</Grid>
</HeaderedContentControl>
</StackPanel>
</ScrollViewer>