feat: square.

This commit is contained in:
Zhang Dian
2024-06-24 15:58:26 +08:00
parent 29dab32b92
commit e3c85d80ef
2 changed files with 52 additions and 31 deletions

View File

@@ -64,6 +64,15 @@
<u:Avatar Classes="Large" /> <u:Avatar Classes="Large" />
<u:Avatar Classes="ExtraLarge" /> <u:Avatar Classes="ExtraLarge" />
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal">
<u:Avatar Classes="Square ExtraExtraSmall Green" />
<u:Avatar Classes="Square ExtraSmall Green" />
<u:Avatar Classes="Square Small Green" />
<u:Avatar Classes="Square Default Green" />
<u:Avatar Classes="Square Medium Green" />
<u:Avatar Classes="Square Large Green" />
<u:Avatar Classes="Square ExtraLarge Green" />
</StackPanel>
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<u:AvatarGroup MaxCount="3"> <u:AvatarGroup MaxCount="3">
<u:Avatar Classes="Red" Content="LL" /> <u:Avatar Classes="Red" Content="LL" />

View File

@@ -12,39 +12,40 @@
<Setter Property="Width" Value="48" /> <Setter Property="Width" Value="48" />
<Setter Property="Height" Value="{Binding $self.Width}" /> <Setter Property="Height" Value="{Binding $self.Width}" />
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Setter Property="CornerRadius" Value="100" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="{x:Type u:Avatar}"> <ControlTemplate TargetType="{x:Type u:Avatar}">
<Panel> <Border
<Panel.Clip> CornerRadius="{TemplateBinding CornerRadius}"
<EllipseGeometry ClipToBounds="True">
Center="{Binding #PART_Ellipse.Bounds.Center}" <Panel>
RadiusX="{Binding #PART_Ellipse.Bounds.Width, Converter={StaticResource DivideByTwoConverter}}" <Border
RadiusY="{Binding #PART_Ellipse.Bounds.Height, Converter={StaticResource DivideByTwoConverter}}" /> IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
</Panel.Clip> BorderBrush="{TemplateBinding BorderBrush}"
<Ellipse Name="PART_Ellipse" /> BorderThickness="{TemplateBinding BorderThickness}"
<Ellipse CornerRadius="{TemplateBinding CornerRadius}"
Fill="{TemplateBinding Background}" Background="{TemplateBinding Background}" />
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}" /> <ContentPresenter
<ContentPresenter Name="PART_ContentPresenter"
Name="PART_ContentPresenter" IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}"
IsVisible="{TemplateBinding Source, Converter={x:Static ObjectConverters.IsNull}}" CornerRadius="{TemplateBinding CornerRadius}"
CornerRadius="{TemplateBinding CornerRadius}" Content="{TemplateBinding Content}"
Content="{TemplateBinding Content}" HorizontalContentAlignment="Center"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
VerticalContentAlignment="Center" /> <ContentPresenter
<ContentPresenter Name="{x:Static u:Avatar.PART_HoverMask}"
Name="{x:Static u:Avatar.PART_HoverMask}" IsVisible="False"
IsVisible="False" Content="{TemplateBinding HoverMask}"
Content="{TemplateBinding HoverMask}" CornerRadius="{TemplateBinding CornerRadius}"
CornerRadius="{TemplateBinding CornerRadius}" HorizontalContentAlignment="Center"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
VerticalContentAlignment="Center" /> <Image Source="{TemplateBinding Source}" />
<Image Source="{TemplateBinding Source}" /> <DockPanel>
<DockPanel> <ContentPresenter DockPanel.Dock="Top" />
<ContentPresenter DockPanel.Dock="Top" /> <ContentPresenter DockPanel.Dock="Bottom" />
<ContentPresenter DockPanel.Dock="Bottom" /> </DockPanel>
</DockPanel> </Panel>
</Panel> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_HoverMask"> <Style Selector="^:pointerover /template/ ContentPresenter#PART_HoverMask">
@@ -100,6 +101,11 @@
<Style Selector="^.Grey"> <Style Selector="^.Grey">
<Setter Property="Background" Value="{DynamicResource SemiGrey3}" /> <Setter Property="Background" Value="{DynamicResource SemiGrey3}" />
</Style> </Style>
<Style Selector="^.Square">
<Setter Property="CornerRadius" Value="3" />
</Style>
<Style Selector="^.ExtraExtraSmall"> <Style Selector="^.ExtraExtraSmall">
<Setter Property="Width" Value="20" /> <Setter Property="Width" Value="20" />
<Setter Property="FontSize" Value="10" /> <Setter Property="FontSize" Value="10" />
@@ -123,10 +129,16 @@
<Style Selector="^.Large"> <Style Selector="^.Large">
<Setter Property="Width" Value="72" /> <Setter Property="Width" Value="72" />
<Setter Property="FontSize" Value="32" /> <Setter Property="FontSize" Value="32" />
<Style Selector="^.Square">
<Setter Property="CornerRadius" Value="6" />
</Style>
</Style> </Style>
<Style Selector="^.ExtraLarge"> <Style Selector="^.ExtraLarge">
<Setter Property="Width" Value="128" /> <Setter Property="Width" Value="128" />
<Setter Property="FontSize" Value="64" /> <Setter Property="FontSize" Value="64" />
<Style Selector="^.Square">
<Setter Property="CornerRadius" Value="12" />
</Style>
</Style> </Style>
</ControlTheme> </ControlTheme>