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

Merge pull request #544 from irihitech/avatar

Browse Source 
Enhance Avatar & Badge
This commit is contained in:
Dong Bin
2025-01-17 16:10:12 +08:00
committed by GitHub
parent ea4268ed11 a366ca6f0c
commit 2ab46bd77e
12 changed files with 391 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo/Ursa.Demo/Pages/AvatarDemo.axaml
View File

@@ -93,5 +93,11 @@
</u:Avatar.HoverMask>
</u:Avatar>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<u:Avatar Content="AS" />
<u:Avatar Content="Semi" Padding="4" />
<u:Avatar Content="Semi" Padding="10" />
</StackPanel>
</StackPanel>
</UserControl>

319
demo/Ursa.Demo/Pages/BadgeDemo.axaml
View File

@@ -16,341 +16,306 @@
<StackPanel.Styles>
<Style Selector="u|Badge">
<Setter Property="Margin" Value="14" />
<Style Selector="^ Border">
<Setter Property="Background" Value="{DynamicResource SemiOrange3}" />
<Setter Property="CornerRadius" Value="8" />
<Style Selector="^ TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style>
<Setter Property="Margin" Value="10" />
</Style>
</StackPanel.Styles>
<StackPanel Orientation="Horizontal">
<u:Badge
HorizontalAlignment="Center"
Header="500"
OverflowCount="100">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Header="5">
<u:Avatar Classes="Square Blue" Content="BM" />
</u:Badge>
<u:Badge Header="SUCCEED!">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Dot="True">
<u:Avatar Classes="Square Blue" Content="YL" />
</u:Badge>
<!-- <u:Badge> -->
<!-- <u:Badge.Header> -->
<!-- <PathIcon -->
<!-- Theme="{StaticResource PathIcon}" -->
<!-- Data="{StaticResource SemiIconLock}" /> -->
<!-- </u:Badge.Header> -->
<!-- <u:Avatar Classes="Square Blue" Content="YL" /> -->
<!-- </u:Badge> -->
<u:Badge Header="NEW">
<u:Avatar Classes="Square LightBlue" Content="WF" />
</u:Badge>
<u:Badge Header="Hello" />
<u:Badge Header="Hello" Dot="True" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5" CornerPosition="TopLeft">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Header="99">
<u:Avatar Classes="Square Teal" Content="ZH" />
</u:Badge>
<u:Badge Header="5" CornerPosition="TopRight">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Header="100">
<u:Avatar Classes="Square Teal" Content="HS" />
</u:Badge>
<u:Badge Header="5" CornerPosition="BottomLeft">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Header="99" OverflowCount="10">
<u:Avatar Classes="Square Green" Content="DY" />
</u:Badge>
<u:Badge Header="5" CornerPosition="BottomRight">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Header="1000" OverflowCount="999">
<u:Avatar Classes="Square Green" Content="TT" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
Header="VIP"
CornerPosition="TopLeft"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Classes="Danger" Header="VIP" CornerPosition="TopRight">
<u:Avatar Classes="Square Amber" Content="ZH" />
</u:Badge>
<u:Badge
Header="VIP"
CornerPosition="TopRight"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Classes="Danger" Header="VIP" CornerPosition="BottomRight">
<u:Avatar Classes="Square Amber" Content="HS" />
</u:Badge>
<u:Badge
Header="VIP"
CornerPosition="BottomLeft"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Classes="Danger" Header="VIP" CornerPosition="TopLeft">
<u:Avatar Classes="Square Orange" Content="DY" />
</u:Badge>
<u:Badge
Header="VIP"
CornerPosition="BottomRight"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="■■■"/>
</Border>
<u:Badge Classes="Danger" Header="VIP" CornerPosition="BottomLeft">
<u:Avatar Classes="Square Orange" Content="TT" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5">
<u:Avatar Classes="Square Indigo" Content="XZ" />
</u:Badge>
<u:Badge Header="5" Classes="Light">
<u:Avatar Classes="Square Indigo" Content="YB" />
</u:Badge>
<u:Badge Header="5" Classes="Inverted">
<u:Avatar Classes="Square LightGreen" Content="LX" />
</u:Badge>
<u:Badge Header="5" Dot="True">
<u:Avatar Classes="Square LightGreen" Content="YZ" />
</u:Badge>
<u:Badge Header="5" Classes="Light" Dot="True">
<u:Avatar Classes="Square Lime" Content="HW" />
</u:Badge>
<Border
Background="{DynamicResource SemiColorFill0}"
CornerRadius="4">
<u:Badge Header="5" Classes="Inverted" Dot="True">
<u:Avatar Classes="Square Lime" Content="XM" />
</u:Badge>
</Border>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5">
<u:Avatar Classes="Square Violet" Content="MR" />
</u:Badge>
<u:Badge Header="5" Classes="Secondary">
<u:Avatar Classes="Square Violet" Content="YL" />
</u:Badge>
<u:Badge Header="5" Classes="Tertiary">
<u:Avatar Classes="Square Red" Content="ZW" />
</u:Badge>
<u:Badge Header="5" Classes="Warning">
<u:Avatar Classes="Square Red" Content="JL" />
</u:Badge>
<u:Badge Header="5" Classes="Danger">
<u:Avatar Classes="Square Pink" Content="RT" />
</u:Badge>
<u:Badge Header="5" Classes="Primary" Dot="True">
<u:Avatar Classes="Square Pink" Content="YF" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="5" />
<u:Badge Classes="Light" Header="NEW" />
<u:Badge Classes="Danger" Header="99" OverflowCount="10" />
<u:Badge Classes="Primary" Dot="True" />
<u:Badge Classes="Secondary" Dot="True" />
<u:Badge Classes="Tertiary" Dot="True" />
<u:Badge Classes="Success" Dot="True" />
<u:Badge Classes="Warning" Dot="True" />
<u:Badge Classes="Danger" Dot="True" />
</StackPanel>
<u:Badge HorizontalAlignment="Stretch" Header="VIP">
<Border Height="50">
<TextBlock Text="■■■"/>
<Border Theme="{StaticResource CardBorder}" Margin="0">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Stretch Space"
FontWeight="600" />
</Border>
</u:Badge>
<StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Primary">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Solid" />
</u:Badge>
<u:Badge Header="URSA" Classes="Secondary">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Solid" />
</u:Badge>
<u:Badge Header="URSA" Classes="Tertiary">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Solid" />
</u:Badge>
<u:Badge Header="URSA" Classes="Success">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Solid" />
</u:Badge>
<u:Badge Header="URSA" Classes="Warning">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Solid" />
</u:Badge>
<u:Badge Header="URSA" Classes="Danger">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Solid" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Light Primary">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Light" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Secondary">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Light" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Tertiary">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Light" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Success">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Light" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Warning">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Light" />
</u:Badge>
<u:Badge Header="URSA" Classes="Light Danger">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Indigo" Content="Light" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge Header="URSA" Classes="Inverted Primary">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square LightGreen" Content="Inverted" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Secondary">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square LightGreen" Content="Inverted" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Tertiary">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square LightGreen" Content="Inverted" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Success">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square LightGreen" Content="Inverted" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Warning">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square LightGreen" Content="Inverted" />
</u:Badge>
<u:Badge Header="URSA" Classes="Inverted Danger">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square LightGreen" Content="Inverted" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
Header="URSA"
Classes="Primary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Lime" Content="Solid" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Secondary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Lime" Content="Solid" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Tertiary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Lime" Content="Solid" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Success"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Lime" Content="Solid" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Warning"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Lime" Content="Solid" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Danger"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Solid"/>
</Border>
<u:Avatar Classes="Square Lime" Content="Solid" />
</u:Badge>
</StackPanel>
<StackPanel Orientation="Horizontal">
<u:Badge
Header="URSA"
Classes="Light Primary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Violet" Content="Light" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Secondary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Violet" Content="Light" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Tertiary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Violet" Content="Light" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Success"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Violet" Content="Light" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Warning"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Violet" Content="Light" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Light Danger"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Light"/>
</Border>
<u:Avatar Classes="Square Violet" Content="Light" />
</u:Badge>
</StackPanel>
<Border Background="{DynamicResource SemiGrey2}" CornerRadius="4">
<Border Background="{DynamicResource SemiColorFill0}" CornerRadius="4">
<StackPanel Orientation="Horizontal">
<u:Badge
Header="URSA"
Classes="Inverted Primary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square Pink" Content="Inverted" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Secondary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square Pink" Content="Inverted" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Tertiary"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square Pink" Content="Inverted" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Success"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square Pink" Content="Inverted" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Warning"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square Pink" Content="Inverted" />
</u:Badge>
<u:Badge
Header="URSA"
Classes="Inverted Danger"
Dot="True">
<Border Width="100" Height="50">
<TextBlock Text="Inverted"/>
</Border>
<u:Avatar Classes="Square Pink" Content="Inverted" />
</u:Badge>
</StackPanel>
</Border>

80
demo/Ursa.Demo/Pages/IntroductionDemo.axaml
View File

@@ -103,24 +103,24 @@
Content="Step 1"
Header="ToDo"
Type="Default"
Time="2023-01-14 09:24:05"/>
Time="2023-01-14 09:24:05" />
<u:TimelineItem
Content="Step 2"
Header="Start"
Position="Right"
Type="Ongoing"
Time="2024-01-04 22:32:58"/>
Time="2024-01-04 22:32:58" />
<u:TimelineItem
Content="Step 3"
Header="In Between"
Type="Warning"
Time="2024-01-05 00:08:29"/>
Time="2024-01-05 00:08:29" />
<u:TimelineItem
Content="Step 4"
Header="Finished"
Position="Right"
Type="Success"
Time="2024-01-05 00:27:44"/>
Type="Success"
Time="2024-01-05 00:27:44" />
</u:Timeline>
<StackPanel Grid.Column="2" Spacing="20">
<u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />
@@ -133,58 +133,38 @@
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Spacing="20" Margin="8">
<u:Divider HorizontalContentAlignment="Right">Badge</u:Divider>
<u:Divider HorizontalContentAlignment="Right">
<u:Badge Header="Badge" />
</u:Divider>
<WrapPanel Orientation="Horizontal">
<u:Badge Header="Ursa" CornerPosition="TopRight">
<Border Classes="Hover">
<TextBlock Text="Pyro"/>
</Border>
<u:Badge Classes="Light" Header="Pyro">
<u:Avatar Classes="Red" Content="火" />
</u:Badge>
<u:Badge
HorizontalAlignment="Center"
CornerPosition="TopRight"
Header="500"
OverflowCount="99">
<Border Classes="Hover">
<TextBlock Text="Hydro"/>
</Border>
<u:Badge Classes="Inverted" Header="500" OverflowCount="99">
<u:Avatar Classes="Square Blue" Content="水" />
</u:Badge>
<u:Badge
Header="Ursa"
CornerPosition="TopRight"
Dot="True">
<Border Classes="Hover">
<TextBlock Text="Ameno"/>
</Border>
<u:Badge Classes="Secondary" Dot="True">
<u:Avatar Classes="Square Green" Content="风" />
</u:Badge>
<u:Badge Classes="Tertiary" Header="Electro">
<u:Avatar Classes="Square Violet" Content="雷" />
</u:Badge>
<u:Badge Classes="Success" Header="Dendro" CornerPosition="BottomLeft">
<u:Avatar Classes="Square Lime" Content="草" />
</u:Badge>
<u:Badge Classes="Warning" Header="Cryo" CornerPosition="BottomRight">
<u:Avatar Classes="Square LightBlue" Content="冰" />
</u:Badge>
<u:Badge Classes="Danger" Header="Geo" CornerPosition="TopRight">
<u:Avatar Classes="Square Amber" Content="岩" />
</u:Badge>
<u:Badge Header="Ursa" />
<u:Badge Header="Ursa" Dot="True" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<u:Badge Header="Ursa" Classes="Secondary">
<Border Classes="Hover">
<TextBlock Text="Electro"/>
</Border>
</u:Badge>
<u:Badge Header="Ursa" Classes="Tertiary" CornerPosition="BottomLeft">
<Border Classes="Hover">
<TextBlock Text="Dendro"/>
</Border>
</u:Badge>
<u:Badge Header="Ursa" Classes="Warning" CornerPosition="BottomRight">
<Border Classes="Hover">
<TextBlock Text="Cryo"/>
</Border>
</u:Badge>
<u:Badge Header="Ursa" Classes="Danger" CornerPosition="TopRight">
<Border Classes="Hover">
<TextBlock Text="Geo"/>
</Border>
</u:Badge>
<u:Badge Dot="True" />
</WrapPanel>
<u:Divider>DualBadge</u:Divider>
<u:Divider>
<u:DualBadge Content="DualBadge" />
</u:Divider>
<WrapPanel Orientation="Horizontal">
<u:DualBadge Header="downloads">
<u:DualBadge.Icon>