feat: add Icon style.

This commit is contained in:
Zhang Dian
2023-07-27 00:35:05 +08:00
parent 240c5a0490
commit f429d8219c
6 changed files with 54 additions and 97 deletions

View File

@@ -14,13 +14,13 @@
</u:DualBadge>
<u:DualBadge>
<DockPanel>
<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" />
<TextBlock Text="2.4k" />
</DockPanel>
</u:DualBadge.Icon>
2.4k
</u:DualBadge>
<u:DualBadge
@@ -28,48 +28,16 @@
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>
<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>
<!-- <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>
</UserControl>

View File

@@ -5,13 +5,15 @@
<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.IconForeground" Value="{DynamicResource DualBadgeDefaultIconForeground}" />
<Setter Property="u:DualBadge.HeaderForeground" Value="{DynamicResource DualBadgeDefaultHeaderForeground}" />
<Setter Property="u:DualBadge.HeaderBackground" Value="{DynamicResource DualBadgeDefaultHeaderBackground}" />
<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.VerticalAlignment" Value="Center" />
<Setter Property="u:DualBadge.UseLayoutRounding" Value="False" />
<Setter Property="u:DualBadge.HeaderBackground" Value="{DynamicResource DualBadgeDefaultHeaderBackground}" />
<Setter Property="u:DualBadge.Padding" Value="{DynamicResource DualBadgeDefaultPadding}" />
<Setter Property="u:DualBadge.Template">
<ControlTemplate TargetType="{x:Type u:DualBadge}">
@@ -19,17 +21,31 @@
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid ColumnDefinitions="*,*">
<ContentPresenter
Name="{x:Static u:DualBadge.PART_HeaderPresenter}"
<Border
Grid.Column="0"
TextElement.FontSize="{TemplateBinding FontSize}"
IsVisible="{TemplateBinding Header,Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding HeaderBackground}"
CornerRadius="{DynamicResource DualBadgeDefaultHeaderCornerRadius}"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" />
CornerRadius="{DynamicResource DualBadgeDefaultLeftCornerRadius}">
<DockPanel>
<ContentPresenter
Name="{x:Static u:DualBadge.PART_Icon}"
Width="14"
Height="14"
Margin="2 0 0 0"
IsVisible="{TemplateBinding Icon,Converter={x:Static ObjectConverters.IsNotNull}}"
Foreground="{TemplateBinding IconForeground}"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Icon}"
ContentTemplate="{TemplateBinding IconTemplate}" />
<ContentPresenter
Name="{x:Static u:DualBadge.PART_HeaderPresenter}"
TextElement.FontSize="{TemplateBinding FontSize}"
IsVisible="{TemplateBinding Header,Converter={x:Static ObjectConverters.IsNotNull}}"
Foreground="{TemplateBinding HeaderForeground}"
Padding="{TemplateBinding Padding}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}" />
</DockPanel>
</Border>
<ContentPresenter
Name="{x:Static u:DualBadge.PART_ContentPresenter}"
Grid.Column="1"
@@ -44,44 +60,5 @@
</Border>
</ControlTemplate>
</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>
</ResourceDictionary>

View File

@@ -1,5 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="DualBadgeDefaultIconForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF888D92</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultBackground">#FF5DC264</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF888D92</SolidColorBrush>
</ResourceDictionary>
</ResourceDictionary>

View File

@@ -1,5 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="DualBadgeDefaultIconForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF6B7075</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultBackground">#FF3BB346</SolidColorBrush>
<SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF6B7075</SolidColorBrush>
</ResourceDictionary>
</ResourceDictionary>

View File

@@ -1,5 +1,5 @@
<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="DualBadgeDefaultLeftCornerRadius">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>

View File

@@ -32,6 +32,14 @@ public class DualBadge : HeaderedContentControl
set => SetValue(IconTemplateProperty, value);
}
public static readonly StyledProperty<IBrush?> IconForegroundProperty =
AvaloniaProperty.Register<DualBadge, IBrush?>(nameof(IconForeground));
public IBrush? IconForeground
{
get => GetValue(IconForegroundProperty);
set => SetValue(IconForegroundProperty, value);
}
public static readonly StyledProperty<IBrush?> HeaderForegroundProperty =
AvaloniaProperty.Register<DualBadge, IBrush?>(nameof(HeaderForeground));