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

feat: redesign GroupBox theme for HeaderedContentControl.

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

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

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

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

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

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

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

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

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

86
src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
View File

@ -1,7 +1,31 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Avalonia.Controls.Converters;assembly=Avalonia.Controls"
x:CompileBindings="True"> 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"> <ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
<Setter Property="Padding" Value="3" /> <Setter Property="Padding" Value="3" />
<Setter Property="Template"> <Setter Property="Template">
@ -12,31 +36,31 @@
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"> Padding="{TemplateBinding Padding}">
<Grid RowDefinitions="auto *"> <Grid RowDefinitions="Auto,*">
<ContentPresenter <ContentPresenter
Name="PART_HeaderPresenter" Name="PART_HeaderPresenter"
Grid.Row="0"
Content="{TemplateBinding Header}" Content="{TemplateBinding Header}"
RecognizesAccessKey="True"
ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplate="{TemplateBinding HeaderTemplate}"
RecognizesAccessKey="True"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
FontSize="{TemplateBinding FontSize}" FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}" FontWeight="{TemplateBinding FontWeight}"
FontFamily="{TemplateBinding FontFamily}" FontFamily="{TemplateBinding FontFamily}"
FontStyle="{TemplateBinding FontStyle}" FontStyle="{TemplateBinding FontStyle}" />
Grid.Row="0" />
<ContentPresenter <ContentPresenter
Name="PART_ContentPresenter" Name="PART_ContentPresenter"
Grid.Row="1"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
RecognizesAccessKey="True" RecognizesAccessKey="True"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
FontSize="{TemplateBinding FontSize}" FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}" FontWeight="{TemplateBinding FontWeight}"
FontFamily="{TemplateBinding FontFamily}" FontFamily="{TemplateBinding FontFamily}"
FontStyle="{TemplateBinding FontStyle}" FontStyle="{TemplateBinding FontStyle}" />
Grid.Row="1" />
</Grid> </Grid>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
@ -44,42 +68,46 @@
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl"> <ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
<Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" /> <Setter Property="Background" Value="{DynamicResource HeaderedContentControlBackground}" />
<Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlBorderBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" /> <Setter Property="BorderThickness" Value="{DynamicResource HeaderedContentControlBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="HeaderedContentControl"> <ControlTemplate TargetType="HeaderedContentControl">
<Border <Border
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="{TemplateBinding CornerRadius}" BorderThickness="{TemplateBinding BorderThickness}"
BorderThickness="{TemplateBinding BorderThickness}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid RowDefinitions="Auto,Auto,Auto"> <Grid RowDefinitions="Auto,*,Auto">
<ContentPresenter <ContentPresenter
Name="PART_HeaderPresenter"
Grid.Row="0" Grid.Row="0"
FontWeight="Bold" Padding="{DynamicResource HeaderedContentControlHeaderPadding}"
HorizontalAlignment="Left" FontWeight="{DynamicResource HeaderedContentControlHeaderFontWeight}"
VerticalAlignment="Stretch" IsVisible="{TemplateBinding Header,Converter={x:Static ObjectConverters.IsNotNull}}"
Content="{TemplateBinding Header}" Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
Margin="16" /> <Border
<Rectangle Name="SeparatorBorder"
Grid.Row="1" Grid.Row="1"
Fill="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
Height="1" /> 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 <ContentPresenter
Name="PART_ContentPresenter"
Grid.Row="2" Grid.Row="2"
IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
Padding="{DynamicResource HeaderedContentControlContentPadding}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="16" /> TextWrapping="Wrap" />
</Grid> </Grid>
</Border> </Border>
</ControlTemplate> </ControlTemplate>

4
src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml
View File

@ -1,4 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" /> <SolidColorBrush x:Key="HeaderedContentControlBackground" Color="#16161A" />
<SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="White" /> <SolidColorBrush x:Key="HeaderedContentControlBorderBrush" Opacity="0.08" Color="White" />
</ResourceDictionary> </ResourceDictionary>

4
src/Semi.Avalonia/Themes/HighContrast/HeaderedContentControl.axaml
View File

@ -1,4 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <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="HeaderedContentControlBackground" Color="{StaticResource WindowColor}" />
<SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Color="{StaticResource WindowTextColor}" /> <SolidColorBrush x:Key="HeaderedContentControlBorderBrush" Color="{StaticResource WindowTextColor}" />
</ResourceDictionary> </ResourceDictionary>

4
src/Semi.Avalonia/Themes/Light/HeaderedContentControl.axaml
View File

@ -1,4 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" /> <SolidColorBrush x:Key="HeaderedContentControlBackground" Color="White" />
<SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="#1C1F23" /> <SolidColorBrush x:Key="HeaderedContentControlBorderBrush" Opacity="0.08" Color="#1C1F23" />
</ResourceDictionary> </ResourceDictionary>

6
src/Semi.Avalonia/Themes/Shared/HeaderedContentControl.axaml
View File

@ -1,3 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <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> </ResourceDictionary>