feat: Toast Alignment.

This commit is contained in:
Zhang Dian
2024-09-11 21:07:36 +08:00
parent b730d3abbe
commit 62a277cc16
2 changed files with 14 additions and 21 deletions

View File

@@ -3,9 +3,9 @@
xmlns:u="https://irihi.tech/ursa"> xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith> <Design.PreviewWith>
<ThemeVariantScope RequestedThemeVariant="Dark"> <ThemeVariantScope RequestedThemeVariant="Dark">
<StackPanel Orientation="Vertical"> <ReversibleStackPanel Orientation="Vertical">
<u:NotificationCard ShowClose="False" /> <u:NotificationCard ShowIcon="False" ShowClose="False" />
<u:NotificationCard /> <u:NotificationCard ShowIcon="False" />
<u:NotificationCard NotificationType="Information"> <u:NotificationCard NotificationType="Information">
Hello, Ursa! Hello, Ursa!
</u:NotificationCard> </u:NotificationCard>
@@ -15,10 +15,10 @@
<u:NotificationCard NotificationType="Warning"> <u:NotificationCard NotificationType="Warning">
<u:Notification Content="Hello, Ursa!" /> <u:Notification Content="Hello, Ursa!" />
</u:NotificationCard> </u:NotificationCard>
<u:NotificationCard NotificationType="Error"> <u:NotificationCard NotificationType="Error" Classes="Light">
<u:Notification Title="Welcome" Content="Hello, Ursa!" /> <u:Notification Title="Welcome" Content="Hello, Ursa!" />
</u:NotificationCard> </u:NotificationCard>
</StackPanel> </ReversibleStackPanel>
</ThemeVariantScope> </ThemeVariantScope>
</Design.PreviewWith> </Design.PreviewWith>
@@ -26,41 +26,35 @@
<Setter Property="Margin" Value="0" /> <Setter Property="Margin" Value="0" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<ReversibleStackPanel Name="PART_Items" /> <ReversibleStackPanel Name="PART_Items" ReverseOrder="True" />
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
</Style> </Style>
<Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Right" /> <Setter Property="HorizontalAlignment" Value="Right" />
</Style> </Style>
<Style Selector="^:topcenter /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:topcenter /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Center" />
</Style> </Style>
<Style Selector="^:bottomleft /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:bottomleft /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Bottom" /> <Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
</Style> </Style>
<Style Selector="^:bottomright /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:bottomright /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Bottom" /> <Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Right" /> <Setter Property="HorizontalAlignment" Value="Right" />
</Style> </Style>
<Style Selector="^:bottomcenter /template/ ReversibleStackPanel#PART_Items"> <Style Selector="^:bottomcenter /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Bottom" /> <Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Center" />
</Style> </Style>

View File

@@ -3,15 +3,16 @@
xmlns:u="https://irihi.tech/ursa"> xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith> <Design.PreviewWith>
<ThemeVariantScope RequestedThemeVariant="Dark"> <ThemeVariantScope RequestedThemeVariant="Dark">
<StackPanel Orientation="Horizontal"> <ReversibleStackPanel>
<u:ToastCard ShowClose="False" /> <u:ToastCard ShowIcon="False" ShowClose="False" />
<u:ToastCard />
<u:ToastCard> <u:ToastCard>
Hello, Ursa! Hello, Ursa!
</u:ToastCard> </u:ToastCard>
<u:ToastCard NotificationType="Success" ShowClose="False"> <u:ToastCard NotificationType="Success" Classes="Light">
<u:Toast Content="Hello, Ursa!" /> <u:Toast Content="Hello, Ursa!" />
</u:ToastCard> </u:ToastCard>
</StackPanel> </ReversibleStackPanel>
</ThemeVariantScope> </ThemeVariantScope>
</Design.PreviewWith> </Design.PreviewWith>
@@ -30,6 +31,7 @@
<ControlTheme x:Key="{x:Type u:ToastCard}" TargetType="u:ToastCard"> <ControlTheme x:Key="{x:Type u:ToastCard}" TargetType="u:ToastCard">
<Setter Property="UseLayoutRounding" Value="True" /> <Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" /> <Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" />
<Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" /> <Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" />
<Setter Property="CornerRadius" Value="{DynamicResource NotificationCardCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource NotificationCardCornerRadius}" />
@@ -49,10 +51,9 @@
VerticalAlignment="Top" VerticalAlignment="Top"
BoxShadow="{DynamicResource NotificationCardBoxShadows}" BoxShadow="{DynamicResource NotificationCardBoxShadows}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid ColumnDefinitions="Auto,*,Auto"> <DockPanel>
<PathIcon <PathIcon
x:Name="ToastIcon" x:Name="ToastIcon"
Grid.Column="0"
Width="{DynamicResource NotificationCardIconWidth}" Width="{DynamicResource NotificationCardIconWidth}"
Height="{DynamicResource NotificationCardIconHeight}" Height="{DynamicResource NotificationCardIconHeight}"
Margin="{DynamicResource ToastCardIconMargin}" Margin="{DynamicResource ToastCardIconMargin}"
@@ -61,7 +62,6 @@
Data="{DynamicResource NotificationCardInformationIconPathData}" /> Data="{DynamicResource NotificationCardInformationIconPathData}" />
<ContentControl <ContentControl
x:Name="PART_Content" x:Name="PART_Content"
Grid.Column="1"
Margin="{DynamicResource ToastCardContentMargin}" Margin="{DynamicResource ToastCardContentMargin}"
VerticalContentAlignment="Center" VerticalContentAlignment="Center"
MaxWidth="{DynamicResource ToastCardContentMaxWidth}" MaxWidth="{DynamicResource ToastCardContentMaxWidth}"
@@ -85,12 +85,11 @@
</ContentControl> </ContentControl>
<Button <Button
x:Name="PART_CloseButton" x:Name="PART_CloseButton"
Grid.Column="2"
Theme="{StaticResource ToastCloseButton}" Theme="{StaticResource ToastCloseButton}"
VerticalAlignment="Top" VerticalAlignment="Top"
IsVisible="{TemplateBinding ShowClose}" IsVisible="{TemplateBinding ShowClose}"
u:MessageCard.CloseOnClick="True" /> u:MessageCard.CloseOnClick="True" />
</Grid> </DockPanel>
</Border> </Border>
</Border> </Border>
</LayoutTransformControl> </LayoutTransformControl>