zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #228 from irihitech/226-typography

Browse Source 
feat: improve TextBlock demo.
This commit is contained in:
Zhang Dian 2023-07-10 17:33:46 +08:00 committed by GitHub
commit e640089aab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 544 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,77 +7,218 @@
d:DesignHeight="450" d:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel <ScrollViewer>
Width="500" <StackPanel HorizontalAlignment="Left" Spacing="20">
HorizontalAlignment="Left" <StackPanel.Styles>
Spacing="20"> <Style Selector="Label">
<StackPanel.Styles> <Setter Property="Margin" Value="4" />
<Style Selector="Label"> </Style>
<Setter Property="Margin" Value="4" /> </StackPanel.Styles>
</Style> <ScrollViewer HorizontalScrollBarVisibility="Auto">
</StackPanel.Styles> <StackPanel Orientation="Horizontal">
<WrapPanel> <StackPanel.Styles>
<Label Theme="{StaticResource TagLabel}">Label</Label> <Style Selector="Label, TextBlock">
<Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label> <Setter Property="VerticalAlignment" Value="Center" />
<Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label> <Setter Property="Margin" Value="4" />
<Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label> </Style>
</WrapPanel> </StackPanel.Styles>
<WrapPanel> <HeaderedContentControl
<Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label> Height="400"
<Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label> Margin="16"
<Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label> VerticalAlignment="Top"
<Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label> Header="Default Theme"
<Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label> Theme="{DynamicResource GroupBox}">
<Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label> <Grid
<Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label> VerticalAlignment="Top"
<Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label> ColumnDefinitions="Auto, *"
<Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label> RowDefinitions="*,*,*,*,*,*,*,*,*,*,*,*">
<Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label> <TextBlock Grid.Row="1" Grid.Column="0">Classes</TextBlock>
<Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label> <TextBlock Grid.Row="2" Grid.Column="0">-</TextBlock>
<Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label> <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
<Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label> <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
<Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label> <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
<Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label> <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
<Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label> <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
<Label Classes="White" Theme="{StaticResource TagLabel}">White</Label> <TextBlock Grid.Row="8" Grid.Column="0">Success</TextBlock>
</WrapPanel> <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
<WrapPanel> <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
<Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label> <Label Grid.Row="2" Grid.Column="1">Text</Label>
<Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label> <Label
<Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label> Grid.Row="3"
<Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label> Grid.Column="1"
<Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label> Classes="Secondary">
<Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label> Secondary
<Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label> </Label>
<Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label> <Label
<Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label> Grid.Row="4"
<Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label> Grid.Column="1"
<Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label> Classes="Tertiary">
<Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label> Tertiary
<Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label> </Label>
<Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label> <Label
<Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label> Grid.Row="5"
<Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label> Grid.Column="1"
<Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label> Classes="Quaternary">
</WrapPanel> Quaternary
<WrapPanel> </Label>
<Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label> <Label
<Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label> Grid.Row="6"
<Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label> Grid.Column="1"
<Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label> Classes="Warning">
<Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label> Warning
<Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label> </Label>
<Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label> <Label
<Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label> Grid.Row="7"
<Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label> Grid.Column="1"
<Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label> Classes="Danger">
<Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label> Danger
<Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label> </Label>
<Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label> <Label
<Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label> Grid.Row="8"
<Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label> Grid.Column="1"
<Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label> Classes="Success">
<Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label> Success
</WrapPanel> </Label>
</StackPanel> <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"
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> </UserControl>

161
demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml Normal file
View File

@ -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>

18
demo/Semi.Avalonia.Demo/Pages/SelectableTextBlock.axaml.cs Normal file
View File

@ -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);
}
}

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

@ -7,82 +7,155 @@
d:DesignHeight="600" d:DesignHeight="600"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel Orientation="Horizontal"> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel <StackPanel Orientation="Horizontal">
Margin="20" <StackPanel.Styles>
HorizontalAlignment="Left" <Style Selector="TextBlock">
Spacing="5"> <Setter Property="VerticalAlignment" Value="Center" />
<TextBlock>Styles for TextBlock</TextBlock> <Setter Property="Margin" Value="4" />
<TextBlock Classes="H1" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock> </Style>
<TextBlock Classes="H2" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock> </StackPanel.Styles>
<TextBlock Classes="H3" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock> <HeaderedContentControl
<TextBlock Classes="H4" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock> Height="400"
<TextBlock Classes="H5" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock> Margin="16"
<TextBlock Classes="H6" Theme="{StaticResource TitleTextBlock}">Header 1</TextBlock> 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 Grid.Row="2" Grid.Column="1">Text</TextBlock>
<TextBlock Classes="Secondary">Secondary</TextBlock> <TextBlock
<TextBlock Classes="Tertiary">Tertiary</TextBlock> Grid.Row="3"
<TextBlock Classes="Quaternary">Quaternary</TextBlock> Grid.Column="1"
<TextBlock Classes="Warning">Warning</TextBlock> Classes="Secondary">
<TextBlock Classes="Warning" IsEnabled="False">Warning disabled</TextBlock> Secondary
<TextBlock Classes="Danger">Danger</TextBlock> </TextBlock>
<TextBlock Classes="Success">Success</TextBlock> <TextBlock
<TextBlock IsEnabled="False">Disabled</TextBlock> Grid.Row="4"
<TextBlock Classes="Mark">Default Mark</TextBlock> Grid.Column="1"
<TextBlock Classes="Underline">Underline</TextBlock> Classes="Tertiary">
<TextBlock Classes="Delete">Delete</TextBlock> Tertiary
<TextBlock Classes="Underline Delete">Underline and Delete</TextBlock> </TextBlock>
</StackPanel> <TextBlock
<StackPanel Grid.Row="5"
Margin="20" Grid.Column="1"
HorizontalAlignment="Left" Classes="Quaternary">
Spacing="5"> Quaternary
<TextBlock>Styles for SelectableTextBlock</TextBlock> </TextBlock>
<SelectableTextBlock Classes="H1" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock> <TextBlock
<SelectableTextBlock Classes="H2" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock> Grid.Row="6"
<SelectableTextBlock Classes="H3" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock> Grid.Column="1"
<SelectableTextBlock Classes="H4" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock> Classes="Warning">
<SelectableTextBlock Classes="H5" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock> Warning
<SelectableTextBlock Classes="H6" Theme="{StaticResource TitleSelectableTextBlock}">Header 1</SelectableTextBlock> </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"
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> </HeaderedContentControl>
<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>
</StackPanel> </StackPanel>
<StackPanel </ScrollViewer>
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>
</UserControl> </UserControl>

3
demo/Semi.Avalonia.Demo/Views/MainView.axaml
View File

@ -159,6 +159,9 @@
<TabItem Header="ScrollViewer"> <TabItem Header="ScrollViewer">
<pages:ScrollViewerDemo /> <pages:ScrollViewerDemo />
</TabItem> </TabItem>
<TabItem Header="SelectableTextBlock">
<pages:SelectableTextBlockDemo />
</TabItem>
<TabItem Header="Slider"> <TabItem Header="Slider">
<pages:SliderDemo /> <pages:SliderDemo />
</TabItem> </TabItem>