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

183 lines
10 KiB
XML
Raw Blame History

<UserControl
d:DesignHeight="600"
d:DesignWidth="930"
mc:Ignorable="d"
x:Class="AntDesignWPFDemo.Views.AvatarView"
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="Avatar" Style="{StaticResource Ant.H1}" />
<TextBlock Style="{StaticResource Ant.P}" Text="Avatars can be used to represent people or objects. It supports images, Icons, or letters." />
<Label Content="Examples" Style="{StaticResource Ant.H2}" />
</StackPanel>
<Grid Grid.Row="1">
<Grid.Resources>
<Style TargetType="antd:Avatar">
<Setter Property="Margin" Value="0,16,16,0" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Margin="8,0">
<antd:CodeBox Title="Basic">
<antd:CodeBox.Description>
Three sizes and two shapes are available.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<StackPanel>
<WrapPanel>
<antd:Avatar Icon="user" Size="64" />
<antd:Avatar Icon="user" Size="Large" />
<antd:Avatar Icon="user" />
<antd:Avatar Icon="user" Size="Small" />
</WrapPanel>
<WrapPanel>
<antd:Avatar
Icon="user"
Shape="Square"
Size="64" />
<antd:Avatar
Icon="user"
Shape="Square"
Size="Large" />
<antd:Avatar Icon="user" Shape="Square" />
<antd:Avatar
Icon="user"
Shape="Square"
Size="Small" />
</WrapPanel>
</StackPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;StackPanel&gt;\n
\t&lt;WrapPanel&gt;\n
\t\t&lt;antd:Avatar Size="64" Icon="user" /&gt;\n
\t\t&lt;antd:Avatar Size="Large" Icon="user" /&gt;\n
\t\t&lt;antd:Avatar Icon="user" /&gt;\n
\t\t&lt;antd:Avatar Size="Small" Icon="user" /&gt;\n
\t&lt;/WrapPanel&gt;\n
\t&lt;WrapPanel&gt;\n
\t\t&lt;antd:Avatar Shape="Square" Size="64" Icon="user" /&gt;\n
\t\t&lt;antd:Avatar Shape="Square" Size="Large" Icon="user" /&gt;\n
\t\t&lt;antd:Avatar Shape="Square" Icon="user" /&gt;\n
\t\t&lt;antd:Avatar Shape="Square" Size="Small" Icon="user" /&gt;\n
\t&lt;/WrapPanel&gt;
&lt;/StackPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Autoset Font Size">
<antd:CodeBox.Description>
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Avatar
Background="{Binding Background}"
Margin="0,0,16,0"
Text="{Binding Text}" />
<antd:AntButton
Content="Change"
Size="Small"
x:Name="Change" />
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Avatar Background="{Binding Background}" Margin="0 0 16 0" Text="{Binding Text}" /&gt;\n
\t&lt;antd:Button x:Name="Change" Size="Small" Content="Change" /&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
<StackPanel Grid.Column="1" Margin="8,0">
<antd:CodeBox Title="Type">
<antd:CodeBox.Description>
Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Avatar Icon="user" />
<antd:Avatar Text="U" />
<antd:Avatar>USER</antd:Avatar>
<antd:Avatar Source="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<antd:Avatar
Background="#FDE3CF"
Foreground="#F56A00"
Text="U" />
<antd:Avatar Background="#87D068" Icon="user" />
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Avatar Icon="user" /&gt;\n
\t&lt;antd:Avatar Text="U" /&gt;\n
\t&lt;antd:Avatar&gt;USER&lt;/antd:Avatar&gt;\n
\t&lt;antd:Avatar Source="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /&gt;\n
\t&lt;antd:Avatar Text="U" Background="#FDE3CF" Foreground="#F56A00" /&gt;\n
\t&lt;antd:Avatar Icon="user" Background="#87D068" /&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="With Badge">
<antd:CodeBox.Description>
Usually used for messages remind.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<antd:Badge Count="1" Margin="0,0,24,0">
<antd:Avatar
Icon="user"
Margin="0"
Shape="Square" />
</antd:Badge>
<antd:Badge Dot="True">
<antd:Avatar
Icon="user"
Margin="0"
Shape="Square" />
</antd:Badge>
</WrapPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Badge Count="1" Margin="0 0 24 0"&gt;\n
\t\t&lt;antd:Avatar Shape="Square" Icon="user" Margin="0" /&gt;\n
\t&lt;/antd:Badge&gt;\n
\t&lt;antd:Badge Dot="True"&gt;\n
\t\t&lt;antd:Avatar Shape="Square" Icon="user" Margin="0" /&gt;\n
\t&lt;/antd:Badge&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
</Grid>
</Grid>
</ScrollViewer>
</UserControl>
Reference in New Issue View Git Blame Copy Permalink