chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: simple DualBadge.

Browse Source
This commit is contained in:
Zhang Dian
2023-07-26 23:46:34 +08:00
parent 82312e7477
commit 240c5a0490
5 changed files with 136 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
demo/Ursa.Demo/Pages/DualBadgeDemo.axaml
View File

@@ -8,16 +8,68 @@
d:DesignHeight="450" d:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left"> <StackPanel HorizontalAlignment="Left" Spacing="20">
<u:DualBadge <u:DualBadge>
Header="build"> 2.4k
<u:DualBadge.Icon>
<PathIcon
Width="16"
Height="16"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z"/>
</u:DualBadge.Icon>
passing
</u:DualBadge> </u:DualBadge>
<u:DualBadge>
<DockPanel>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
<TextBlock Text="2.4k" />
</DockPanel>
</u:DualBadge>
<u:DualBadge
Header="downloads">
2.4k
</u:DualBadge>
<u:DualBadge>
<u:DualBadge.Header>
<DockPanel>
<PathIcon
Width="14"
Height="14"
Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
<TextBlock Text="downloads" />
</DockPanel>
</u:DualBadge.Header>
2.4k
</u:DualBadge>
<!-- <u:DualBadge> -->
<!-- 2.4k -->
<!-- </u:DualBadge> -->
<!-- -->
<!-- <u:DualBadge> -->
<!-- <u:DualBadge.Icon> -->
<!-- <PathIcon -->
<!-- Width="14" -->
<!-- Height="14" -->
<!-- Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" /> -->
<!-- </u:DualBadge.Icon> -->
<!-- 2.4k -->
<!-- </u:DualBadge> -->
<!-- -->
<!-- <u:DualBadge -->
<!-- Header="downloads"> -->
<!-- 2.4k -->
<!-- </u:DualBadge> -->
<!-- -->
<!-- <u:DualBadge -->
<!-- Header="downloads"> -->
<!-- <u:DualBadge.Icon> -->
<!-- <PathIcon -->
<!-- Width="14" -->
<!-- Height="14" -->
<!-- Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" /> -->
<!-- </u:DualBadge.Icon> -->
<!-- 2.4k -->
<!-- </u:DualBadge> -->
</StackPanel> </StackPanel>
</UserControl> </UserControl>

82
src/Ursa.Themes.Semi/Controls/DualBadge.axaml
View File

@@ -2,44 +2,86 @@
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:u="https://irihi.tech/ursa"> xmlns:u="https://irihi.tech/ursa">
<ControlTheme x:Key="{x:Type u:DualBadge}" TargetType="{x:Type u:DualBadge}"> <ControlTheme x:Key="{x:Type u:DualBadge}" TargetType="u:DualBadge">
<Setter Property="u:DualBadge.CornerRadius" Value="{DynamicResource DualBadgeDefaultCornerRadius}" />
<Setter Property="u:DualBadge.FontSize" Value="{DynamicResource DualBadgeDefaultFontSize}" />
<Setter Property="u:DualBadge.Foreground" Value="{DynamicResource DualBadgeDefaultForeground}" />
<Setter Property="u:DualBadge.Background" Value="{DynamicResource DualBadgeDefaultBackground}" />
<Setter Property="u:DualBadge.ClipToBounds" Value="False" />
<Setter Property="u:DualBadge.HorizontalAlignment" Value="Center" /> <Setter Property="u:DualBadge.HorizontalAlignment" Value="Center" />
<Setter Property="u:DualBadge.VerticalAlignment" Value="Top" /> <Setter Property="u:DualBadge.VerticalAlignment" Value="Center" />
<Setter Property="u:DualBadge.CornerRadius" Value="16" /> <Setter Property="u:DualBadge.UseLayoutRounding" Value="False" />
<Setter Property="u:DualBadge.HeaderBackground" Value="{DynamicResource DualBadgeDefaultHeaderBackground}" /> <Setter Property="u:DualBadge.HeaderBackground" Value="{DynamicResource DualBadgeDefaultHeaderBackground}" />
<Setter Property="u:DualBadge.Margin" Value="0 4" /> <Setter Property="u:DualBadge.Padding" Value="{DynamicResource DualBadgeDefaultPadding}" />
<Setter Property="u:DualBadge.Template"> <Setter Property="u:DualBadge.Template">
<ControlTemplate TargetType="{x:Type u:DualBadge}"> <ControlTemplate TargetType="{x:Type u:DualBadge}">
<Border <Border
HorizontalAlignment="{TemplateBinding u:DualBadge.HorizontalAlignment}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding u:DualBadge.VerticalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
BorderThickness="{TemplateBinding u:DualBadge.BorderThickness}" <Grid ColumnDefinitions="*,*">
CornerRadius="{TemplateBinding u:DualBadge.CornerRadius}">
<Grid ColumnDefinitions="*,*,*">
<ContentPresenter
Name="{x:Static u:DualBadge.PART_Icon}"
Grid.Column="0"
Margin="{TemplateBinding Padding}"
Background="{TemplateBinding HeaderBackground}"
Content="{TemplateBinding Icon}"
ContentTemplate="{TemplateBinding IconTemplate}"/>
<ContentPresenter <ContentPresenter
Name="{x:Static u:DualBadge.PART_HeaderPresenter}" Name="{x:Static u:DualBadge.PART_HeaderPresenter}"
Grid.Column="1" Grid.Column="0"
Margin="{TemplateBinding Padding}" TextElement.FontSize="{TemplateBinding FontSize}"
IsVisible="{TemplateBinding Header,Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding HeaderBackground}" Background="{TemplateBinding HeaderBackground}"
CornerRadius="{DynamicResource DualBadgeDefaultHeaderCornerRadius}"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Header}" Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" /> ContentTemplate="{TemplateBinding HeaderTemplate}" />
<ContentPresenter <ContentPresenter
Name="{x:Static u:DualBadge.PART_ContentPresenter}" Name="{x:Static u:DualBadge.PART_ContentPresenter}"
Grid.Column="2" Grid.Column="1"
Margin="{TemplateBinding Padding}" TextElement.FontSize="{TemplateBinding FontSize}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" /> ContentTemplate="{TemplateBinding ContentTemplate}" />
</Grid> </Grid>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<!-- <Setter Property="u:DualBadge.Template"> -->
<!-- <ControlTemplate TargetType="{x:Type u:DualBadge}"> -->
<!-- <Border -->
<!-- Padding="{TemplateBinding Padding}" -->
<!-- HorizontalAlignment="{TemplateBinding HorizontalAlignment}" -->
<!-- VerticalAlignment="{TemplateBinding VerticalAlignment}" -->
<!-- CornerRadius="{TemplateBinding CornerRadius}"> -->
<!-- <Grid ColumnDefinitions="*,*"> -->
<!-- <Border -->
<!-- Grid.Column="0" -->
<!-- Background="{TemplateBinding HeaderBackground}" -->
<!-- Padding="{TemplateBinding Padding}"> -->
<!-- <DockPanel> -->
<!-- <ContentPresenter -->
<!-- Name="{x:Static u:DualBadge.PART_Icon}" -->
<!-- TextElement.FontSize="{TemplateBinding FontSize}" -->
<!-- Margin="0 0 2 0" -->
<!-- Content="{TemplateBinding Icon}" -->
<!-- ContentTemplate="{TemplateBinding IconTemplate}" /> -->
<!-- <ContentPresenter -->
<!-- Name="{x:Static u:DualBadge.PART_HeaderPresenter}" -->
<!-- TextElement.FontSize="{TemplateBinding FontSize}" -->
<!-- IsVisible="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" -->
<!-- Content="{TemplateBinding Header}" -->
<!-- ContentTemplate="{TemplateBinding HeaderTemplate}" /> -->
<!-- </DockPanel> -->
<!-- </Border> -->
<!-- <ContentPresenter -->
<!-- Name="{x:Static u:DualBadge.PART_ContentPresenter}" -->
<!-- Grid.Column="1" -->
<!-- TextElement.FontSize="{TemplateBinding FontSize}" -->
<!-- Padding="{TemplateBinding Padding}" -->
<!-- Background="{TemplateBinding Background}" -->
<!-- Content="{TemplateBinding Content}" -->
<!-- ContentTemplate="{TemplateBinding ContentTemplate}" /> -->
<!-- </Grid> -->
<!-- </Border> -->
<!-- </ControlTemplate> -->
<!-- </Setter> -->
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

4
src/Ursa.Themes.Semi/Themes/Dark/DualBadge.axaml
View File

@@ -1,3 +1,5 @@
<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="DualBadgeDefaultHeaderBackground">LightGray</SolidColorBrush> <SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultBackground">#FF5DC264</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF888D92</SolidColorBrush>
</ResourceDictionary> </ResourceDictionary>

4
src/Ursa.Themes.Semi/Themes/Light/DualBadge.axaml
View File

@@ -1,3 +1,5 @@
<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="DualBadgeDefaultHeaderBackground">LightGray</SolidColorBrush> <SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultBackground">#FF3BB346</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF6B7075</SolidColorBrush>
</ResourceDictionary> </ResourceDictionary>

5
src/Ursa.Themes.Semi/Themes/Shared/DualBadge.axaml
View File

@@ -1,2 +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="DualBadgeDefaultHeaderCornerRadius">4 0 0 4</CornerRadius>
<CornerRadius x:Key="DualBadgeDefaultCornerRadius">0 4 4 0</CornerRadius>
<x:Double x:Key="DualBadgeDefaultFontSize">12</x:Double>
<Thickness x:Key="DualBadgeDefaultThickness">1</Thickness>
<Thickness x:Key="DualBadgeDefaultPadding">4 2</Thickness>
</ResourceDictionary> </ResourceDictionary>