Files
Ursa.Avalonia/src/Ursa.Themes.Semi/Controls/Notification.axaml
2024-09-11 14:25:37 +08:00

437 lines
22 KiB
XML

<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith>
<ThemeVariantScope RequestedThemeVariant="Dark">
<StackPanel Orientation="Vertical">
<u:NotificationCard ShowClose="False" />
<u:NotificationCard />
<u:NotificationCard NotificationType="Information">
Hello, Ursa!
</u:NotificationCard>
<u:NotificationCard NotificationType="Success">
<u:Notification Title="Welcome" />
</u:NotificationCard>
<u:NotificationCard NotificationType="Warning">
<u:Notification Content="Hello, Ursa!" />
</u:NotificationCard>
<u:NotificationCard NotificationType="Error">
<u:Notification Title="Welcome" Content="Hello, Ursa!" />
</u:NotificationCard>
</StackPanel>
</ThemeVariantScope>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type u:WindowNotificationManager}" TargetType="u:WindowNotificationManager">
<Setter Property="Margin" Value="0" />
<Setter Property="Template">
<ControlTemplate>
<ReversibleStackPanel Name="PART_Items" />
</ControlTemplate>
</Setter>
<Style Selector="^:topleft /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style Selector="^:topright /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
<Style Selector="^:topcenter /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style Selector="^:bottomleft /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style Selector="^:bottomright /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
<Style Selector="^:bottomcenter /template/ ReversibleStackPanel#PART_Items">
<Setter Property="ReverseOrder" Value="True" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type u:NotificationCard}" TargetType="u:NotificationCard">
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="BorderThickness" Value="{DynamicResource NotificationCardBorderThickness}" />
<Setter Property="Background" Value="{DynamicResource NotificationCardBackground}" />
<Setter Property="CornerRadius" Value="{DynamicResource NotificationCardCornerRadius}" />
<Setter Property="Template">
<ControlTemplate TargetType="u:NotificationCard">
<LayoutTransformControl x:Name="PART_LayoutTransformControl" UseRenderTransform="True">
<Border
Margin="{DynamicResource NotificationCardMargin}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<Border
x:Name="PART_RootBorder"
Padding="{DynamicResource NotificationCardPadding}"
BoxShadow="{DynamicResource NotificationCardBoxShadows}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<DockPanel MinWidth="{DynamicResource NotificationCardMinWidth}">
<PathIcon
x:Name="NotificationIcon"
Width="{DynamicResource NotificationCardIconWidth}"
Height="{DynamicResource NotificationCardIconHeight}"
Margin="{DynamicResource NotificationCardIconMargin}"
VerticalAlignment="Top"
IsVisible="False"
Data="{DynamicResource NotificationCardInformationIconPathData}" />
<ContentControl
x:Name="PART_Content"
VerticalContentAlignment="Center"
Content="{TemplateBinding Content}">
<ContentControl.DataTemplates>
<DataTemplate DataType="u:INotification">
<StackPanel Spacing="{DynamicResource NotificationCardTitleSpacing}">
<SelectableTextBlock
Foreground="{DynamicResource NotificationCardTitleForeground}"
FontSize="{DynamicResource NotificationCardTitleFontSize}"
FontWeight="{DynamicResource NotificationCardTitleFontWeight}"
IsVisible="{Binding Title, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
Text="{Binding Title}" />
<SelectableTextBlock
Foreground="{DynamicResource NotificationCardMessageForeground}"
FontSize="{DynamicResource NotificationCardMessageFontSize}"
FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
IsVisible="{Binding Content, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
Text="{Binding Content}"
TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
<DataTemplate DataType="x:String">
<SelectableTextBlock
Foreground="{DynamicResource NotificationCardMessageForeground}"
FontSize="{DynamicResource NotificationCardMessageFontSize}"
FontWeight="{DynamicResource NotificationCardMessageFontWeight}"
Text="{Binding}"
TextWrapping="Wrap" />
</DataTemplate>
</ContentControl.DataTemplates>
</ContentControl>
<Button
x:Name="PART_CloseButton"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Theme="{StaticResource NotificationCloseButton}"
IsVisible="{TemplateBinding ShowClose}"
u:MessageCard.CloseOnClick="True" />
</DockPanel>
</Border>
</Border>
</LayoutTransformControl>
</ControlTemplate>
</Setter>
<ControlTheme.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="0" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="1" />
</KeyFrame>
</Animation>
</ControlTheme.Animations>
<Style Selector="^:topleft">
<Style.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:topright">
<Style.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomleft">
<Style.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomright">
<Style.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:topcenter">
<Style.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomcenter">
<Style.Animations>
<Animation
Easing="QuadraticEaseIn"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="100" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^[IsClosing=true]">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame Cue="0%">
<Setter Property="Opacity" Value="1" />
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Opacity" Value="0" />
</KeyFrame>
</Animation>
</Style.Animations>
<Style Selector="^:topleft">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:topright">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomleft">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="-500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomright">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.X" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.X" Value="500" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:topcenter">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="-100" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:bottomcenter">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="0%">
<Setter Property="TranslateTransform.Y" Value="0" />
</KeyFrame>
<KeyFrame KeySpline="0.62,0.63,0,1.13" Cue="100%">
<Setter Property="TranslateTransform.Y" Value="100" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</Style>
<Style Selector="^[IsClosing=true]">
<Style.Animations>
<Animation
Easing="QuadraticEaseOut"
FillMode="Forward"
Duration="0:0:0.3">
<KeyFrame Cue="100%">
<Setter Property="IsClosed" Value="True" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="^:information /template/ PathIcon#NotificationIcon">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Foreground" Value="{DynamicResource NotificationCardInformationIconForeground}" />
<Setter Property="Data" Value="{DynamicResource NotificationCardInformationIconPathData}" />
</Style>
<Style Selector="^:success /template/ PathIcon#NotificationIcon">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Foreground" Value="{DynamicResource NotificationCardSuccessIconForeground}" />
<Setter Property="Data" Value="{DynamicResource NotificationCardSuccessIconPathData}" />
</Style>
<Style Selector="^:warning /template/ PathIcon#NotificationIcon">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Foreground" Value="{DynamicResource NotificationCardWarningIconForeground}" />
<Setter Property="Data" Value="{DynamicResource NotificationCardWarningIconPathData}" />
</Style>
<Style Selector="^:error /template/ PathIcon#NotificationIcon">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Foreground" Value="{DynamicResource NotificationCardErrorIconForeground}" />
<Setter Property="Data" Value="{DynamicResource NotificationCardErrorIconPathData}" />
</Style>
<Style Selector="^.Light">
<Setter Property="Background" Value="{DynamicResource SemiColorBackground0}" />
<Style Selector="^:information /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorInformation}" />
<Setter Property="Background" Value="{DynamicResource SemiColorInformationLight}" />
</Style>
<Style Selector="^:success /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorSuccess}" />
<Setter Property="Background" Value="{DynamicResource SemiColorSuccessLight}" />
</Style>
<Style Selector="^:warning /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorWarning}" />
<Setter Property="Background" Value="{DynamicResource SemiColorWarningLight}" />
</Style>
<Style Selector="^:error /template/ Border#PART_RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource SemiColorDanger}" />
<Setter Property="Background" Value="{DynamicResource SemiColorDangerLight}" />
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="NotificationCloseButton" TargetType="Button">
<Setter Property="CornerRadius" Value="6" />
<Setter Property="Height" Value="24" />
<Setter Property="Width" Value="24" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
<Setter Property="Template">
<ControlTemplate TargetType="Button">
<Border
Name="PART_Border"
Padding="{TemplateBinding Padding}"
Background="Transparent"
CornerRadius="{TemplateBinding CornerRadius}">
<PathIcon
Width="10"
Height="10"
Data="{DynamicResource WindowCloseIconGlyph}" />
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ Border">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
</Style>
<Style Selector="^:pressed /template/ Border">
<Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
</Style>
</ControlTheme>
</ResourceDictionary>