ShrlAlgo/Shrlalgo.RvKits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f209e7d3ad9c9f9805ce678d0d60dcb306d1c33f
Shrlalgo.RvKits/AntdWpfDemo/Views/BadgeView.xaml
GG Z f209e7d3ad 月更
2025-07-31 20:12:24 +08:00

266 lines
16 KiB
XML
Raw Blame History

<UserControl
d:DesignHeight="600"
d:DesignWidth="930"
mc:Ignorable="d"
x:Class="AntDesignWPFDemo.Views.BadgeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ScrollViewer>
<Grid Margin="16,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Label Content="Badge" Style="{StaticResource Ant.H1}" />
<TextBlock Style="{StaticResource Ant.P}" Text="Small numerical value or status descriptor for UI elements." />
<Label Content="When To Use" Style="{StaticResource Ant.H2}" />
<TextBlock Style="{StaticResource Ant.P}" Text="Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count." />
<Label Content="Examples" Style="{StaticResource Ant.H2}" />
</StackPanel>
<Grid Grid.Row="1">
<Grid.Resources>
<Style TargetType="antd:Badge" x:Key="Badge">
<Setter Property="Margin" Value="0,20,20,0" />
</Style>
<Style TargetType="Rectangle" x:Key="HeadExample">
<Setter Property="Width" Value="42" />
<Setter Property="Height" Value="42" />
<Setter Property="RadiusX" Value="4" />
<Setter Property="RadiusY" Value="4" />
<Setter Property="Fill" Value="#EEEEEE" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Margin="8,0">
<antd:CodeBox Title="Basic">
<antd:CodeBox.Description>
Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Badge Count="5" Style="{StaticResource Badge}">
<Rectangle Style="{StaticResource HeadExample}" />
</antd:Badge>
<antd:Badge
Count="0"
ShowZero="True"
Style="{StaticResource Badge}">
<Rectangle Style="{StaticResource HeadExample}" />
</antd:Badge>
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;Style x:Key="Badge" TargetType="antd:Badge"&gt;\n
\t&lt;Setter Property="Margin" Value="0 20 20 0" /&gt;\n
&lt;/Style&gt;\n
&lt;Style x:Key="HeadExample" TargetType="Rectangle"&gt;\n
\t&lt;Setter Property="Width" Value="42" /&gt;\n
\t&lt;Setter Property="Height" Value="42" /&gt;\n
\t&lt;Setter Property="RadiusX" Value="4" /&gt;\n
\t&lt;Setter Property="RadiusY" Value="4" /&gt;\n
\t&lt;Setter Property="Fill" Value="#EEEEEE" /&gt;\n
&lt;/Style&gt;\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Badge Style="{StaticResource Badge}" Count="5"&gt;\n
\t\t&lt;Rectangle Style="{StaticResource HeadExample}" /&gt;\n
\t&lt;/antd:Badge&gt;\n
\t&lt;antd:Badge Style="{StaticResource Badge}" Count="0" ShowZero="True"&gt;\n
\t\t&lt;Rectangle Style="{StaticResource HeadExample}" /&gt;\n
\t&lt;/antd:Badge&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Overflow Count">
<antd:CodeBox.Description>
`${OverflowCount}+` is displayed when count is larger than `OverflowCount`. The default value of `OverflowCount` is 99.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Badge Count="99" Style="{StaticResource Badge}">
<Rectangle Style="{StaticResource HeadExample}" />
</antd:Badge>
<antd:Badge Count="100" Style="{StaticResource Badge}">
<Rectangle Style="{StaticResource HeadExample}" />
</antd:Badge>
<antd:Badge
Count="99"
OverflowCount="10"
Style="{StaticResource Badge}">
<Rectangle Style="{StaticResource HeadExample}" />
</antd:Badge>
<antd:Badge
Count="1000"
OverflowCount="999"
Style="{StaticResource Badge}">
<Rectangle Style="{StaticResource HeadExample}" />
</antd:Badge>
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;Style x:Key="Badge" TargetType="antd:Badge"&gt;\n
\t&lt;Setter Property="Margin" Value="0 20 20 0" /&gt;\n
&lt;/Style&gt;\n
&lt;Style x:Key="HeadExample" TargetType="Rectangle"&gt;\n
\t&lt;Setter Property="Width" Value="42" /&gt;\n
\t&lt;Setter Property="Height" Value="42" /&gt;\n
\t&lt;Setter Property="RadiusX" Value="4" /&gt;\n
\t&lt;Setter Property="RadiusY" Value="4" /&gt;\n
\t&lt;Setter Property="Fill" Value="#EEEEEE" /&gt;\n
&lt;/Style&gt;\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Badge Style="{StaticResource Badge}" Count="99"&gt;\n
\t\t&lt;Rectangle Style="{StaticResource HeadExample}" /&gt;\n
\t&lt;/antd:Badge&gt;\n
\t&lt;antd:Badge Style="{StaticResource Badge}" Count="100"&gt;\n
\t\t&lt;Rectangle Style="{StaticResource HeadExample}" /&gt;\n
\t&lt;/antd:Badge&gt;\n
\t&lt;antd:Badge Style="{StaticResource Badge}" Count="99" OverflowCount="10"&gt;\n
\t\t&lt;Rectangle Style="{StaticResource HeadExample}" /&gt;\n
\t&lt;/antd:Badge&gt;\n
\t&lt;antd:Badge Style="{StaticResource Badge}" Count="1000" OverflowCount="999"&gt;\n
\t\t&lt;Rectangle Style="{StaticResource HeadExample}" /&gt;\n
\t&lt;/antd:Badge&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Status">
<antd:CodeBox.Description>
Standalone badge with status.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<StackPanel>
<StackPanel Margin="0,0,0,16" Orientation="Horizontal">
<antd:Badge Status="Success" />
<antd:Badge Status="Error" />
<antd:Badge Status="Default" />
<antd:Badge Status="Processing" />
<antd:Badge Status="Warning" />
</StackPanel>
<StackPanel>
<antd:Badge Status="Success" Text="Success" />
<antd:Badge Status="Error" Text="Error" />
<antd:Badge Status="Default" Text="Default" />
<antd:Badge Status="Processing" Text="Processing" />
<antd:Badge Status="Warning" Text="Warning" />
</StackPanel>
</StackPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;StackPanel&gt;\n
\t&lt;StackPanel Orientation="Horizontal" Margin="0 0 0 16"&gt;\n
\t\t&lt;antd:Badge Status="Success" /&gt;\n
\t\t&lt;antd:Badge Status="Error" /&gt;\n
\t\t&lt;antd:Badge Status="Default" /&gt;\n
\t\t&lt;antd:Badge Status="Processing" /&gt;\n
\t\t&lt;antd:Badge Status="Warning" /&gt;\n
\t&lt;/StackPanel&gt;\n
\t&lt;StackPanel&gt;\n
\t\t&lt;antd:Badge Status="Success" Text="Success" /&gt;\n
\t\t&lt;antd:Badge Status="Error" Text="Error" /&gt;\n
\t\t&lt;antd:Badge Status="Default" Text="Default" /&gt;\n
\t\t&lt;antd:Badge Status="Processing" Text="Processing" /&gt;\n
\t\t&lt;antd:Badge Status="Warning" Text="Warning" /&gt;\n
\t&lt;/StackPanel&gt;\n
&lt;/StackPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
<StackPanel Grid.Column="1" Margin="8,0">
<antd:CodeBox Title="Standalone">
<antd:CodeBox.Description>
Used in standalone when children is empty.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Badge Count="25" />
<antd:Badge
BadgeBackground="White"
BadgeForeground="#999"
Count="4" />
<antd:Badge BadgeBackground="#52c41a" Count="109" />
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel Orientation="Horizontal"&gt;\n
\t&lt;antd:Button Type="Primary" Content="Primary" /&gt;\n
\t&lt;antd:Button Content="Default" /&gt;\n
\t&lt;antd:Button Type="Dashed" Content="Dashed" /&gt;\n
\t&lt;antd:Button Type="Danger" Content="Danger" /&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Red badge">
<antd:CodeBox.Description>
This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Badge Dot="True">
<antd:Icon Foreground="Black" Type="notification" />
</antd:Badge>
<antd:Badge Count="0" Dot="True">
<antd:Icon Type="notification" />
</antd:Badge>
<antd:Badge Dot="True">
<Hyperlink>Link something</Hyperlink>
</antd:Badge>
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel Orientation="Horizontal"&gt;\n
\t&lt;antd:Button Type="Primary" Content="Primary" /&gt;\n
\t&lt;antd:Button Content="Default" /&gt;\n
\t&lt;antd:Button Type="Dashed" Content="Dashed" /&gt;\n
\t&lt;antd:Button Type="Danger" Content="Danger" /&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="ToolTip">
<antd:CodeBox.Description>
The badge will display `ToolTip` when hovered over, instead of `Count`.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Badge Count="5" ToolTip="Badge ToolTip">
<Rectangle Style="{StaticResource HeadExample}" ToolTip="Content ToolTip" />
</antd:Badge>
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel Orientation="Horizontal"&gt;\n
\t&lt;antd:Button Type="Primary" Content="Primary" /&gt;\n
\t&lt;antd:Button Content="Default" /&gt;\n
\t&lt;antd:Button Type="Dashed" Content="Dashed" /&gt;\n
\t&lt;antd:Button Type="Danger" Content="Danger" /&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
</Grid>
</Grid>
</ScrollViewer>
</UserControl>
Reference in New Issue View Git Blame Copy Permalink