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

feat: HeaderedContentControl default style.

Browse Source
This commit is contained in:
Zhang Dian 2023-10-09 14:34:39 +08:00
parent e563f860ad
commit 6d09d9f5ca
3 changed files with 67 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo/Semi.Avalonia.Demo/Assets/WORLD.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

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

@ -6,7 +6,32 @@
x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20">
<HeaderedContentControl Theme="{DynamicResource GroupBox}" Header="Semi Design" Width="400" Height="200">
<TextBlock>Default Theme</TextBlock>
<WrapPanel ItemWidth="400">
<HeaderedContentControl
Header="This is the text header!"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="4">
<TextBlock Text="Some content" />
</HeaderedContentControl>
<HeaderedContentControl Header="This is the image header!">
<Image Source="/Assets/WORLD.png" />
</HeaderedContentControl>
<HeaderedContentControl>
<HeaderedContentControl.Header>
<Image Source="/Assets/WORLD.png" />
</HeaderedContentControl.Header>
<TextBlock Text="This is the content. But the header can also be non textual" />
</HeaderedContentControl>
</WrapPanel>
<TextBlock>GroupBox Theme</TextBlock>
<HeaderedContentControl
HorizontalAlignment="Left"
Theme="{DynamicResource GroupBox}"
Header="Semi Design"
Width="400"
Height="200">
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
</HeaderedContentControl>
</StackPanel>

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

@ -2,6 +2,47 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True">
<ControlTheme x:Key="{x:Type HeaderedContentControl}" TargetType="HeaderedContentControl">
<Setter Property="Padding" Value="3" />
<Setter Property="Template">
<ControlTemplate>
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<Grid RowDefinitions="auto *">
<ContentPresenter
Name="PART_HeaderPresenter"
Content="{TemplateBinding Header}"
RecognizesAccessKey="True"
ContentTemplate="{TemplateBinding HeaderTemplate}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
FontFamily="{TemplateBinding FontFamily}"
FontStyle="{TemplateBinding FontStyle}"
Grid.Row="0" />
<ContentPresenter
Name="PART_ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
RecognizesAccessKey="True"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
FontFamily="{TemplateBinding FontFamily}"
FontStyle="{TemplateBinding FontStyle}"
Grid.Row="1" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
<Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" />
<Setter Property="BorderThickness" Value="1" />