From b9a16e89d6490e978aff7878be764a31fdf01aef Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 10 Jul 2023 00:22:02 +0800
Subject: [PATCH] feat: improve TextBlock demo.

---
 demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml | 288 +++++++++++++-----
 .../Pages/SelectableTextBlock.axaml           | 161 ++++++++++
 .../Pages/SelectableTextBlock.axaml.cs        |  18 ++
 .../Pages/TextBlockDemo.axaml                 | 224 +++++++++-----
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   3 +
 5 files changed, 546 insertions(+), 148 deletions(-)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml.cs

diff --git a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
index d5adc3d..86dd7d1 100644
--- a/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/LabelDemo.axaml
@@ -7,77 +7,219 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel
-        Width="500"
-        HorizontalAlignment="Left"
-        Spacing="20">
-        <StackPanel.Styles>
-            <Style Selector="Label">
-                <Setter Property="Margin" Value="4" />
-            </Style>
-        </StackPanel.Styles>
-        <WrapPanel>
-            <Label Theme="{StaticResource TagLabel}">Label</Label>
-            <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-            <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-            <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-        <WrapPanel>
-            <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
-            <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
-            <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
-            <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
-            <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
-            <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
-            <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
-            <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
-            <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
-            <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
-            <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
-            <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
-            <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
-            <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
-            <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
-            <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
-            <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
-        </WrapPanel>
-    </StackPanel>
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <StackPanel.Styles>
+                <Style Selector="Label">
+                    <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
+                        Height="400"
+                        Margin="16"
+                        VerticalAlignment="Top"
+                        Header="Default Theme"
+                        Theme="{DynamicResource GroupBox}">
+                        <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">Warning</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Success</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>
+                            <Label
+                                Grid.Row="3"
+                                Grid.Column="1"
+                                Classes="Secondary">
+                                Secondary
+                            </Label>
+                            <Label
+                                Grid.Row="4"
+                                Grid.Column="1"
+                                Classes="Tertiary">
+                                Tertiary
+                            </Label>
+                            <Label
+                                Grid.Row="5"
+                                Grid.Column="1"
+                                Classes="Quaternary">
+                                Quaternary
+                            </Label>
+                            <Label
+                                Grid.Row="6"
+                                Grid.Column="1"
+                                Classes="Warning">
+                                Warning
+                            </Label>
+                            <Label
+                                Grid.Row="7"
+                                Grid.Column="1"
+                                Classes="Danger">
+                                Danger
+                            </Label>
+                            <Label
+                                Grid.Row="8"
+                                Grid.Column="1"
+                                Classes="Success">
+                                Success
+                            </Label>
+                            <Label
+                                Grid.Row="9"
+                                Grid.Column="1"
+                                Classes="Mark">
+                                Default Mark
+                            </Label>
+                            <Label
+                                Grid.Row="10"
+                                Grid.Column="1"
+                                Classes="Code">
+                                Code
+                            </Label>
+                        </Grid>
+                    </HeaderedContentControl>
+                    <HeaderedContentControl
+                        Height="400"
+                        Margin="16"
+                        VerticalAlignment="Top"
+                        Header="Theme: TitleLabel"
+                        Theme="{DynamicResource GroupBox}">
+                        <Grid
+                            VerticalAlignment="Top"
+                            Background="{Binding}"
+                            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>
+                            <Label
+                                Grid.Row="2"
+                                Grid.Column="1"
+                                Classes="H1"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 1
+                            </Label>
+                            <Label
+                                Grid.Row="3"
+                                Grid.Column="1"
+                                Classes="H2"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 2
+                            </Label>
+                            <Label
+                                Grid.Row="4"
+                                Grid.Column="1"
+                                Classes="H3"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 3
+                            </Label>
+                            <Label
+                                Grid.Row="5"
+                                Grid.Column="1"
+                                Classes="H4"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 4
+                            </Label>
+                            <Label
+                                Grid.Row="6"
+                                Grid.Column="1"
+                                Classes="H5"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 5
+                            </Label>
+                            <Label
+                                Grid.Row="7"
+                                Grid.Column="1"
+                                Classes="H6"
+                                Theme="{StaticResource TitleLabel}">
+                                Header 6
+                            </Label>
+                        </Grid>
+                    </HeaderedContentControl>
+                </StackPanel>
+            </ScrollViewer>
+            <WrapPanel>
+                <Label Theme="{StaticResource TagLabel}">Label</Label>
+                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
+                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
+                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+            <WrapPanel>
+                <Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                <Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                <Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
+                <Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                <Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                <Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                <Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                <Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                <Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                <Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                <Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                <Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
+                <Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                <Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                <Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                <Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
+            </WrapPanel>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
new file mode 100644
index 0000000..0de5617
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml
@@ -0,0 +1,161 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.SelectableTextBlockDemo"
+    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">
+    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+        <StackPanel Orientation="Horizontal">
+            <StackPanel.Styles>
+                <Style Selector="SelectableTextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <HeaderedContentControl
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Default Theme"
+                Theme="{DynamicResource GroupBox}">
+                <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">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Success</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>
+
+                    <SelectableTextBlock Grid.Row="2" Grid.Column="1">Text</SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="Secondary">
+                        Secondary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="Tertiary">
+                        Tertiary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="Quaternary">
+                        Quaternary
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="Warning">
+                        Warning
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="Danger">
+                        Danger
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="8"
+                        Grid.Column="1"
+                        Classes="Success">
+                        Success
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="9"
+                        Grid.Column="1"
+                        Classes="Mark">
+                        Default Mark
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="10"
+                        Grid.Column="1"
+                        Classes="Underline">
+                        Underline
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="11"
+                        Grid.Column="1"
+                        Classes="Delete">
+                        Delete
+                    </SelectableTextBlock>
+                </Grid>
+            </HeaderedContentControl>
+            <HeaderedContentControl
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Theme: TitleSelectableTextBlock"
+                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>
+                    <SelectableTextBlock
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        Classes="H1"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 1
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="H2"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 2
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="H3"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 3
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="H4"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 4
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="H5"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 5
+                    </SelectableTextBlock>
+                    <SelectableTextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="H6"
+                        Theme="{StaticResource TitleSelectableTextBlock}">
+                        Header 6
+                    </SelectableTextBlock>
+                </Grid>
+            </HeaderedContentControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml.cs
new file mode 100644
index 0000000..b4cc6d7
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class SelectableTextBlockDemo : UserControl
+{
+    public SelectableTextBlockDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
index 7aca219..019faf5 100644
--- a/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/TextBlockDemo.axaml
@@ -7,82 +7,156 @@
     d:DesignHeight="600"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Orientation="Horizontal">
-        <StackPanel
-            Margin="20"
-            HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for TextBlock</TextBlock>
-            <TextBlock Classes="H1" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H2" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H3" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H4" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H5" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
-            <TextBlock Classes="H6" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock>
+    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+        <StackPanel Orientation="Horizontal">
+            <StackPanel.Styles>
+                <Style Selector="TextBlock">
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Margin" Value="4" />
+                </Style>
+            </StackPanel.Styles>
+            <HeaderedContentControl
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Default Theme"
+                Theme="{DynamicResource GroupBox}">
+                <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">Warning</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Success</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>
 
-            <TextBlock>Text</TextBlock>
-            <TextBlock Classes="Secondary">Secondary</TextBlock>
-            <TextBlock Classes="Tertiary">Tertiary</TextBlock>
-            <TextBlock Classes="Quaternary">Quaternary</TextBlock>
-            <TextBlock Classes="Warning">Warning</TextBlock>
-            <TextBlock Classes="Warning" IsEnabled="False">Warning disabled</TextBlock>
-            <TextBlock Classes="Danger">Danger</TextBlock>
-            <TextBlock Classes="Success">Success</TextBlock>
-            <TextBlock IsEnabled="False">Disabled</TextBlock>
-            <TextBlock Classes="Mark">Default Mark</TextBlock>
-            <TextBlock Classes="Underline">Underline</TextBlock>
-            <TextBlock Classes="Delete">Delete</TextBlock>
-            <TextBlock Classes="Underline Delete">Underline and Delete</TextBlock>
-        </StackPanel>
-        <StackPanel
-            Margin="20"
-            HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for SelectableTextBlock</TextBlock>
-            <SelectableTextBlock Classes="H1" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H2" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H3" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H4" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H5" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
-            <SelectableTextBlock Classes="H6" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock>
+                    <TextBlock Grid.Row="2" Grid.Column="1">Text</TextBlock>
+                    <TextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="Secondary">
+                        Secondary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="Tertiary">
+                        Tertiary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="Quaternary">
+                        Quaternary
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="Warning">
+                        Warning
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="Danger">
+                        Danger
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="8"
+                        Grid.Column="1"
+                        Classes="Success">
+                        Success
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="9"
+                        Grid.Column="1"
+                        Classes="Mark">
+                        Default Mark
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="10"
+                        Grid.Column="1"
+                        Classes="Underline">
+                        Underline
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="11"
+                        Grid.Column="1"
+                        Classes="Delete">
+                        Delete
+                    </TextBlock>
+                </Grid>
+            </HeaderedContentControl>
+            <HeaderedContentControl
+                Height="400"
+                Margin="16"
+                VerticalAlignment="Top"
+                Header="Theme: TitleTextBlock"
+                Theme="{DynamicResource GroupBox}">
+                <Grid
+                    VerticalAlignment="Top"
+                    Background="{Binding}"
+                    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>
+                    <TextBlock
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        Classes="H1"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 1
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        Classes="H2"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 2
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        Classes="H3"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 3
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Classes="H4"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 4
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="6"
+                        Grid.Column="1"
+                        Classes="H5"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 5
+                    </TextBlock>
+                    <TextBlock
+                        Grid.Row="7"
+                        Grid.Column="1"
+                        Classes="H6"
+                        Theme="{StaticResource TitleTextBlock}">
+                        Header 6
+                    </TextBlock>
+                </Grid>
 
-            <SelectableTextBlock>Text</SelectableTextBlock>
-            <SelectableTextBlock Classes="Secondary">Secondary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Tertiary">Tertiary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Quaternary">Quaternary</SelectableTextBlock>
-            <SelectableTextBlock Classes="Warning">Warning</SelectableTextBlock>
-            <SelectableTextBlock Classes="Warning" IsEnabled="False">Warning disabled</SelectableTextBlock>
-            <SelectableTextBlock Classes="Danger">Danger</SelectableTextBlock>
-            <SelectableTextBlock Classes="Success">Success</SelectableTextBlock>
-            <SelectableTextBlock IsEnabled="False">Disabled</SelectableTextBlock>
-            <SelectableTextBlock Classes="Mark">Default Mark</SelectableTextBlock>
-            <SelectableTextBlock Classes="Underline">Underline</SelectableTextBlock>
-            <SelectableTextBlock Classes="Delete">Delete</SelectableTextBlock>
-            <SelectableTextBlock Classes="Underline Delete">Underline and Delete</SelectableTextBlock>
+            </HeaderedContentControl>
         </StackPanel>
-        <StackPanel
-            Margin="20"
-            HorizontalAlignment="Left"
-            Spacing="5">
-            <TextBlock>Styles for Label</TextBlock>
-            <Label Classes="H1" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H2" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H3" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H4" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H5" Theme="{StaticResource TitleLabel}">Header 1</Label>
-            <Label Classes="H6" Theme="{StaticResource TitleLabel}">Header 1</Label>
-
-            <Label>Text</Label>
-            <Label Classes="Secondary">Secondary</Label>
-            <Label Classes="Tertiary">Tertiary</Label>
-            <Label Classes="Quaternary">Quaternary</Label>
-            <Label Classes="Warning">Warning</Label>
-            <Label Classes="Warning" IsEnabled="False">Warning disabled</Label>
-            <Label Classes="Danger">Danger</Label>
-            <Label Classes="Success">Success</Label>
-            <Label IsEnabled="False">Disabled</Label>
-            <Label Classes="Mark">Default Mark</Label>
-            <Label Classes="Code">Example Code</Label>
-        </StackPanel>
-    </StackPanel>
+    </ScrollViewer>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 13b37f7..a87d488 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -159,6 +159,9 @@
             <TabItem Header="ScrollViewer">
                 <pages:ScrollViewerDemo />
             </TabItem>
+            <TabItem Header="SelectableTextBlock">
+                <pages:SelectableTextBlockDemo />
+            </TabItem>
             <TabItem Header="Slider">
                 <pages:SliderDemo />
             </TabItem>