From 021ca978659bbb83fac8e4fb719473237f8a6b62 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sat, 9 Nov 2024 04:13:00 +0800
Subject: [PATCH] feat: redesign GroupBox theme for HeaderedContentControl.

Header & Content are now invisible when set to null.
SeparatorBorder is now influenced by BorderThickness.
Background is no longer transparent.
---
 .../Pages/HeaderedContentControlDemo.axaml    | 18 ++--
 demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml | 80 +++++++++--------
 .../Pages/SelectableTextBlock.axaml           | 83 +++++++++---------
 .../Pages/TextBlockDemo.axaml                 | 75 ++++++++--------
 .../Controls/HeaderedContentControl.axaml     | 86 ++++++++++++-------
 .../Themes/Dark/HeaderedContentControl.axaml  |  4 +-
 .../HighContrast/HeaderedContentControl.axaml |  4 +-
 .../Themes/Light/HeaderedContentControl.axaml |  4 +-
 .../Shared/HeaderedContentControl.axaml       |  6 +-
 9 files changed, 200 insertions(+), 160 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
index af62a80..b778b13 100644
--- a/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/HeaderedContentControlDemo.axaml
@@ -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>
diff --git a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
index 5b17250..250c794 100644
--- a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
@@ -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}">
diff --git a/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
index abeb7f3..c353ef3 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
@@ -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}">
diff --git a/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
index 5702698..04f0fe3 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
@@ -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>
diff --git a/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml b/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
index e70aeee..c568f0c 100644
--- a/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
@@ -1,7 +1,31 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel Spacing="20">
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                Header="Header" />
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                Content="Content" />
+            <HeaderedContentControl
+                Theme="{DynamicResource GroupBox}"
+                MaxWidth="360"
+                Content="Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。">
+                <HeaderedContentControl.Header>
+                    <Panel>
+                        <SelectableTextBlock Text="Semi Design" />
+                        <HyperlinkButton HorizontalAlignment="Right" Content="更多" />
+                    </Panel>
+                </HeaderedContentControl.Header>
+            </HeaderedContentControl>
+        </StackPanel>
+    </Design.PreviewWith>
+    <converters:MarginMultiplierConverter x:Key="SeparatorBorderMultiplier" Top="True" Indent="1" />
+
     <ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
         <Setter Property="Padding" Value="3" />
         <Setter Property="Template">
@@ -12,31 +36,31 @@
                     CornerRadius="{TemplateBinding CornerRadius}"
                     Background="{TemplateBinding Background}"
                     Padding="{TemplateBinding Padding}">
-                    <Grid RowDefinitions="auto *">
+                    <Grid RowDefinitions="Auto,*">
                         <ContentPresenter
                             Name="PART_HeaderPresenter"
+                            Grid.Row="0"
                             Content="{TemplateBinding Header}"
-                            RecognizesAccessKey="True"
                             ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            RecognizesAccessKey="True"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
                             FontFamily="{TemplateBinding FontFamily}"
-                            FontStyle="{TemplateBinding FontStyle}"
-                            Grid.Row="0" />
+                            FontStyle="{TemplateBinding FontStyle}" />
                         <ContentPresenter
                             Name="PART_ContentPresenter"
+                            Grid.Row="1"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             Content="{TemplateBinding Content}"
                             RecognizesAccessKey="True"
-                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
                             FontFamily="{TemplateBinding FontFamily}"
-                            FontStyle="{TemplateBinding FontStyle}"
-                            Grid.Row="1" />
+                            FontStyle="{TemplateBinding FontStyle}" />
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -44,42 +68,46 @@
     </ControlTheme>
 
     <ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
-        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" />
-        <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" />
+        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource HeaderedContentControlBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
-        <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Template">
             <ControlTemplate TargetType="HeaderedContentControl">
                 <Border
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    Width="{TemplateBinding Width}"
-                    Height="{TemplateBinding Height}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    BorderThickness="{TemplateBinding BorderThickness}">
-                    <Grid RowDefinitions="Auto,Auto,Auto">
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid RowDefinitions="Auto,*,Auto">
                         <ContentPresenter
+                            Name="PART_HeaderPresenter"
                             Grid.Row="0"
-                            FontWeight="Bold"
-                            HorizontalAlignment="Left"
-                            VerticalAlignment="Stretch"
+                            Padding="{DynamicResource HeaderedContentControlHeaderPadding}"
+                            FontWeight="{DynamicResource HeaderedContentControlHeaderFontWeight}"
+                            IsVisible="{TemplateBinding Header,Converter={x:Static ObjectConverters.IsNotNull}}"
                             Content="{TemplateBinding Header}"
-                            ContentTemplate="{TemplateBinding HeaderTemplate}"
-                            Margin="16" />
-                        <Rectangle
+                            ContentTemplate="{TemplateBinding HeaderTemplate}" />
+                        <Border
+                            Name="SeparatorBorder"
                             Grid.Row="1"
-                            Fill="{TemplateBinding BorderBrush}"
-                            Height="1" />
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness, Converter={StaticResource SeparatorBorderMultiplier}}">
+                            <Border.IsVisible>
+                                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                    <TemplateBinding Property="Header" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                    <TemplateBinding Property="Content" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                </MultiBinding>
+                            </Border.IsVisible>
+                        </Border>
                         <ContentPresenter
+                            Name="PART_ContentPresenter"
                             Grid.Row="2"
+                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Padding="{DynamicResource HeaderedContentControlContentPadding}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
-                            Margin="16" />
+                            TextWrapping="Wrap" />
                     </Grid>
                 </Border>
             </ControlTemplate>
diff --git a/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml b/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
index c5804df..56bc792 100644
--- a/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
@@ -1,4 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="HeaderedContentControlBackground" Color="#16161A" />
+    <SolidColorBrush x:Key="HeaderedContentControlBorderBrush" Opacity="0.08" Color="White" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/HighContrast/HeaderedContentControl.axaml b/src/Semi.Avalonia/Themes/HighContrast/HeaderedContentControl.axaml
index 2d0c943..de0dd5e 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/HeaderedContentControl.axaml
@@ -1,4 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="{StaticResource WindowColor}" />
-    <SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Color="{StaticResource WindowTextColor}" />
+    <SolidColorBrush x:Key="HeaderedContentControlBackground" Color="{StaticResource WindowColor}" />
+    <SolidColorBrush x:Key="HeaderedContentControlBorderBrush" Color="{StaticResource WindowTextColor}" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml b/src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml
index ce87252..501435b 100644
--- a/src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml
@@ -1,4 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="HeaderedContentControlBackground" Color="White" />
+    <SolidColorBrush x:Key="HeaderedContentControlBorderBrush" Opacity="0.08" Color="#1C1F23" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/HeaderedContentControl.axaml b/src/Semi.Avalonia/Themes/Shared/HeaderedContentControl.axaml
index c6e24ac..24289d5 100644
--- a/src/Semi.Avalonia/Themes/Shared/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/HeaderedContentControl.axaml
@@ -1,3 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <CornerRadius x:Key="HeaderedContentControlCornerRadius">4</CornerRadius>
+    <CornerRadius x:Key="HeaderedContentControlCornerRadius">6</CornerRadius>
+    <Thickness x:Key="HeaderedContentControlBorderThickness">1</Thickness>
+    <FontWeight x:Key="HeaderedContentControlHeaderFontWeight">600</FontWeight>
+    <Thickness x:Key="HeaderedContentControlHeaderPadding">20</Thickness>
+    <Thickness x:Key="HeaderedContentControlContentPadding">20</Thickness>
 </ResourceDictionary>
\ No newline at end of file