254 lines
16 KiB
XML
254 lines
16 KiB
XML
<UserControl x:Class="AntdWpfDemo.Views.BadgeView"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"
|
|
|
|
mc:Ignorable="d"
|
|
d:DesignHeight="600"
|
|
d:DesignWidth="930">
|
|
|
|
<ScrollViewer>
|
|
<Grid Margin="16 0">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
<StackPanel>
|
|
<Label Style="{StaticResource Ant.H1}" Content="Badge" />
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="Small numerical value or status descriptor for UI elements." />
|
|
|
|
<Label Style="{StaticResource Ant.H2}" Content="When To Use" />
|
|
<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 Style="{StaticResource Ant.H2}" Content="Examples" />
|
|
</StackPanel>
|
|
<Grid Grid.Row="1">
|
|
<Grid.Resources>
|
|
<Style x:Key="Badge" TargetType="antd:Badge">
|
|
<Setter Property="Margin" Value="0 20 20 0" />
|
|
</Style>
|
|
<Style x:Key="HeadExample" TargetType="Rectangle">
|
|
<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 Style="{StaticResource Badge}" Count="5">
|
|
<Rectangle Style="{StaticResource HeadExample}" />
|
|
</antd:Badge>
|
|
<antd:Badge Style="{StaticResource Badge}" Count="0" ShowZero="True">
|
|
<Rectangle Style="{StaticResource HeadExample}" />
|
|
</antd:Badge>
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
|
<Style x:Key="Badge" TargetType="antd:Badge">\n
|
|
\t<Setter Property="Margin" Value="0 20 20 0" />\n
|
|
</Style>\n
|
|
<Style x:Key="HeadExample" TargetType="Rectangle">\n
|
|
\t<Setter Property="Width" Value="42" />\n
|
|
\t<Setter Property="Height" Value="42" />\n
|
|
\t<Setter Property="RadiusX" Value="4" />\n
|
|
\t<Setter Property="RadiusY" Value="4" />\n
|
|
\t<Setter Property="Fill" Value="#EEEEEE" />\n
|
|
</Style>\n\n
|
|
<WrapPanel>\n
|
|
\t<antd:Badge Style="{StaticResource Badge}" Count="5">\n
|
|
\t\t<Rectangle Style="{StaticResource HeadExample}" />\n
|
|
\t</antd:Badge>\n
|
|
\t<antd:Badge Style="{StaticResource Badge}" Count="0" ShowZero="True">\n
|
|
\t\t<Rectangle Style="{StaticResource HeadExample}" />\n
|
|
\t</antd:Badge>\n
|
|
</WrapPanel>
|
|
</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 Style="{StaticResource Badge}" Count="99">
|
|
<Rectangle Style="{StaticResource HeadExample}" />
|
|
</antd:Badge>
|
|
<antd:Badge Style="{StaticResource Badge}" Count="100">
|
|
<Rectangle Style="{StaticResource HeadExample}" />
|
|
</antd:Badge>
|
|
<antd:Badge Style="{StaticResource Badge}" Count="99" OverflowCount="10">
|
|
<Rectangle Style="{StaticResource HeadExample}" />
|
|
</antd:Badge>
|
|
<antd:Badge Style="{StaticResource Badge}" Count="1000" OverflowCount="999">
|
|
<Rectangle Style="{StaticResource HeadExample}" />
|
|
</antd:Badge>
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
|
<Style x:Key="Badge" TargetType="antd:Badge">\n
|
|
\t<Setter Property="Margin" Value="0 20 20 0" />\n
|
|
</Style>\n
|
|
<Style x:Key="HeadExample" TargetType="Rectangle">\n
|
|
\t<Setter Property="Width" Value="42" />\n
|
|
\t<Setter Property="Height" Value="42" />\n
|
|
\t<Setter Property="RadiusX" Value="4" />\n
|
|
\t<Setter Property="RadiusY" Value="4" />\n
|
|
\t<Setter Property="Fill" Value="#EEEEEE" />\n
|
|
</Style>\n\n
|
|
<WrapPanel>\n
|
|
\t<antd:Badge Style="{StaticResource Badge}" Count="99">\n
|
|
\t\t<Rectangle Style="{StaticResource HeadExample}" />\n
|
|
\t</antd:Badge>\n
|
|
\t<antd:Badge Style="{StaticResource Badge}" Count="100">\n
|
|
\t\t<Rectangle Style="{StaticResource HeadExample}" />\n
|
|
\t</antd:Badge>\n
|
|
\t<antd:Badge Style="{StaticResource Badge}" Count="99" OverflowCount="10">\n
|
|
\t\t<Rectangle Style="{StaticResource HeadExample}" />\n
|
|
\t</antd:Badge>\n
|
|
\t<antd:Badge Style="{StaticResource Badge}" Count="1000" OverflowCount="999">\n
|
|
\t\t<Rectangle Style="{StaticResource HeadExample}" />\n
|
|
\t</antd:Badge>\n
|
|
</WrapPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Status">
|
|
<antd:CodeBox.Description>
|
|
Standalone badge with status.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<StackPanel Orientation="Horizontal" Margin="0 0 0 16">
|
|
<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>
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
|
<StackPanel>\n
|
|
\t<StackPanel Orientation="Horizontal" Margin="0 0 0 16">\n
|
|
\t\t<antd:Badge Status="Success" />\n
|
|
\t\t<antd:Badge Status="Error" />\n
|
|
\t\t<antd:Badge Status="Default" />\n
|
|
\t\t<antd:Badge Status="Processing" />\n
|
|
\t\t<antd:Badge Status="Warning" />\n
|
|
\t</StackPanel>\n
|
|
\t<StackPanel>\n
|
|
\t\t<antd:Badge Status="Success" Text="Success" />\n
|
|
\t\t<antd:Badge Status="Error" Text="Error" />\n
|
|
\t\t<antd:Badge Status="Default" Text="Default" />\n
|
|
\t\t<antd:Badge Status="Processing" Text="Processing" />\n
|
|
\t\t<antd:Badge Status="Warning" Text="Warning" />\n
|
|
\t</StackPanel>\n
|
|
</StackPanel>
|
|
</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 Count="4" BadgeBackground="White" BadgeForeground="#999" />
|
|
<antd:Badge Count="109" BadgeBackground="#52c41a" />
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Content="Primary" />\n
|
|
\t<antd:Button Content="Default" />\n
|
|
\t<antd:Button Type="Dashed" Content="Dashed" />\n
|
|
\t<antd:Button Type="Danger" Content="Danger" />\n
|
|
</WrapPanel>
|
|
</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 Type="notification" Foreground="Black" />
|
|
</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>
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Content="Primary" />\n
|
|
\t<antd:Button Content="Default" />\n
|
|
\t<antd:Button Type="Dashed" Content="Dashed" />\n
|
|
\t<antd:Button Type="Danger" Content="Danger" />\n
|
|
</WrapPanel>
|
|
</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 ToolTip="Content ToolTip" Style="{StaticResource HeadExample}" />
|
|
</antd:Badge>
|
|
</WrapPanel>
|
|
</antd:CodeBox.Content>
|
|
<antd:CodeBox.Code>
|
|
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
|
<WrapPanel Orientation="Horizontal">\n
|
|
\t<antd:Button Type="Primary" Content="Primary" />\n
|
|
\t<antd:Button Content="Default" />\n
|
|
\t<antd:Button Type="Dashed" Content="Dashed" />\n
|
|
\t<antd:Button Type="Danger" Content="Danger" />\n
|
|
</WrapPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Grid>
|
|
</ScrollViewer>
|
|
</UserControl>
|