add fluent style notification cards.

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml

@@ -339,12 +339,12 @@
     <!-- Resources for ProgressBar.xaml -->
     <x:Double x:Key="ProgressBarIndicatorPauseOpacity">0.6</x:Double>
     <x:Double x:Key="ProgressBarThemeMinHeight">4</x:Double>
-    <Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>        
+    <Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>
     <SolidColorBrush x:Key="ProgressBarBackgroundThemeBrush" Color="#59FFFFFF" />
     <SolidColorBrush x:Key="ProgressBarBorderThemeBrush" Color="Transparent" />
     <SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="#FF5B2EC5" />
     <SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="#FF8A57FF" />
-    
+
     <!-- Resources for TextBox.xaml -->
     <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" />
@@ -493,6 +493,15 @@
     <StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
     <StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
+
+    <!--Resources for NotificationCard.xaml -->
+    <SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="#1F1F1F" />
+    <SolidColorBrush x:Key="NotificationCardProgressBackgroundBrush" Color="#9A9A9A" />
+    <SolidColorBrush x:Key="NotificationCardInformationBackgroundBrush" Color="#0078D4" />
+    <SolidColorBrush x:Key="NotificationCardSuccessBackgroundBrush" Color="#128B44" />
+    <SolidColorBrush x:Key="NotificationCardWarningBackgroundBrush" Color="#FFC316" />
+    <SolidColorBrush x:Key="NotificationCardErrorBackgroundBrush" Color="#F03916" />
+
     <!-- Resources for RadioButton.xaml -->
     <x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
     <StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
@@ -700,7 +709,7 @@
     <StaticResource x:Key="DateTimePickerFlyoutButtonBorderBrushPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
     <StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPointerOver" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
     <StaticResource x:Key="DateTimePickerFlyoutButtonForegroundPressed" ResourceKey="SystemControlHighlightAltBaseHighBrush" />
-    
+
     <!-- Resources for TimePicker.xaml -->
     <StaticResource x:Key="TimePickerSpacerFill" ResourceKey="SystemControlForegroundBaseLowBrush" />
     <StaticResource x:Key="TimePickerSpacerFillDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
@@ -727,7 +736,7 @@
     <StaticResource x:Key="TimePickerLightDismissOverlayBackground" ResourceKey="SystemControlPageBackgroundMediumAltMediumBrush" />
     <SolidColorBrush x:Key="TimePickerHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="TimePickerForegroundThemeBrush" Color="#FF000000" />
-    
+
     <!-- Resources for Pivot.xaml -->
     <FontFamily x:Key="PivotHeaderItemFontFamily">XamlAutoFontFamily</FontFamily>
     <FontFamily x:Key="PivotTitleFontFamily">XamlAutoFontFamily</FontFamily>

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml

@@ -490,6 +490,14 @@
     <StaticResource x:Key="CalendarViewCalendarItemRevealBorderBrush" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="CalendarViewNavigationButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightTransparentBrush" />
     <StaticResource x:Key="CalendarViewNavigationButtonBorderBrush" ResourceKey="SystemControlTransparentBrush" />
+
+    <!--Resources for NotificationCard.xaml -->
+    <SolidColorBrush x:Key="NotificationCardBackgroundBrush" Color="#444444" Opacity="0.75"/>
+    <SolidColorBrush x:Key="NotificationCardInformationBackgroundBrush" Color="#007ACC" Opacity="0.75"/>
+    <SolidColorBrush x:Key="NotificationCardSuccessBackgroundBrush" Color="#1F9E45" Opacity="0.75"/>
+    <SolidColorBrush x:Key="NotificationCardWarningBackgroundBrush" Color="#FDB328" Opacity="0.75"/>
+    <SolidColorBrush x:Key="NotificationCardErrorBackgroundBrush" Color="#BD202C" Opacity="0.75"/>
+    
     <!-- Resources for RadioButton.xaml -->
     <x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
     <StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />

src/Avalonia.Themes.Fluent/NotificationCard.xaml

@@ -1,92 +1,100 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Style Selector="NotificationCard">
-        <Setter Property="UseLayoutRounding" Value="True"/>
-        <Setter Property="Width" Value="350"/>
-        <Setter Property="FontSize" Value="14"/>
-        <Setter Property="Foreground" Value="White"/>
-        <Setter Property="RenderTransformOrigin" Value="50%,75%"/>
-        <Setter Property="Template">
-            <ControlTemplate>
-                <LayoutTransformControl Name="PART_LayoutTransformControl" UseRenderTransform="True">
-                    <Border Background="{TemplateBinding Background}" 
-                            BorderBrush="{TemplateBinding BorderBrush}" 
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            Margin="8,8,0,0">
-                        <ContentControl Name="PART_Content" Content="{TemplateBinding Content}" />
-                    </Border>
-                </LayoutTransformControl>
-            </ControlTemplate>
-        </Setter>
+  <Design.PreviewWith>
+    <Border Padding="20" Background="#2a2a2a">
+      <NotificationCard Content="Test" />
+    </Border>
+  </Design.PreviewWith>
+  <Style Selector="NotificationCard">
+    <Setter Property="UseLayoutRounding" Value="True"/>
+    <Setter Property="Width" Value="350"/>
+    <Setter Property="FontSize" Value="14"/>
+    <Setter Property="Foreground" Value="White"/>
+    <Setter Property="RenderTransformOrigin" Value="50%,75%"/>
+    <Setter Property="BorderThickness" Value="0 4 0 0" />
+    <Setter Property="Background" Value="{DynamicResource NotificationCardBackgroundBrush}" />
+    <Setter Property="BorderBrush" Value="#F03916" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <LayoutTransformControl Name="PART_LayoutTransformControl" UseRenderTransform="True">
+          <Border CornerRadius="{DynamicResource ControlCornerRadius}" BoxShadow="0 5 10 4 #2F000000" Margin="10 0 20 30">
+            <Border Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"                                        
+                    ClipToBounds="True">
+              <ContentControl Name="PART_Content" Content="{TemplateBinding Content}" />
+            </Border>
+          </Border>
+        </LayoutTransformControl>
+      </ControlTemplate>
+    </Setter>
 
-        <Style.Animations>
-            <Animation Duration="0:0:0.45" Easing="QuadraticEaseIn" FillMode="Forward">
-                <KeyFrame Cue="0%">
-                    <Setter Property="Opacity" Value="0"/>
-                    <Setter Property="TranslateTransform.Y" Value="20"/>
-                    <Setter Property="ScaleTransform.ScaleX" Value="0.85"/>
-                    <Setter Property="ScaleTransform.ScaleY" Value="0.85"/>
-                </KeyFrame>
-                <KeyFrame Cue="30%">
-                    <Setter Property="TranslateTransform.Y" Value="-20"/>
-                </KeyFrame>
-                <KeyFrame Cue="100%">
-                    <Setter Property="Opacity" Value="1"/>
-                    <Setter Property="TranslateTransform.Y" Value="0"/>
-                    <Setter Property="ScaleTransform.ScaleX" Value="1"/>
-                    <Setter Property="ScaleTransform.ScaleY" Value="1"/>
-                </KeyFrame>
-            </Animation>
-        </Style.Animations>
-    </Style>
+    <Style.Animations>
+      <Animation Duration="0:0:0.45" Easing="QuadraticEaseIn" FillMode="Forward">
+        <KeyFrame Cue="0%">
+          <Setter Property="Opacity" Value="0"/>
+          <Setter Property="TranslateTransform.Y" Value="20"/>
+          <Setter Property="ScaleTransform.ScaleX" Value="0.85"/>
+          <Setter Property="ScaleTransform.ScaleY" Value="0.85"/>
+        </KeyFrame>
+        <KeyFrame Cue="30%">
+          <Setter Property="TranslateTransform.Y" Value="-20"/>
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="Opacity" Value="1"/>
+          <Setter Property="TranslateTransform.Y" Value="0"/>
+          <Setter Property="ScaleTransform.ScaleX" Value="1"/>
+          <Setter Property="ScaleTransform.ScaleY" Value="1"/>
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
 
-    <Style Selector="NotificationCard/template/ ContentControl#PART_Content">
-        <Setter Property="MinHeight" Value="150" />
-    </Style>
+  <Style Selector="NotificationCard/template/ ContentControl#PART_Content">
+    <Setter Property="MinHeight" Value="64" />
+  </Style>
 
-    <Style Selector="NotificationCard[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
-        <Setter Property="RenderTransformOrigin" Value="50%,0%"/>
-        <Style.Animations>
-            <Animation Duration="0:0:0.75" Easing="QuadraticEaseOut" FillMode="Forward">
-                <KeyFrame Cue="0%">
-                    <Setter Property="TranslateTransform.X" Value="0"/>
-                    <Setter Property="ScaleTransform.ScaleY" Value="1"/>
-                </KeyFrame>
-                <KeyFrame Cue="70%">
-                    <Setter Property="TranslateTransform.X" Value="800"/>
-                    <Setter Property="ScaleTransform.ScaleY" Value="1"/>
-                </KeyFrame>
-                <KeyFrame Cue="100%">
-                    <Setter Property="ScaleTransform.ScaleY" Value="0"/>
-                    <Setter Property="TranslateTransform.X" Value="800"/>
-                </KeyFrame>
-            </Animation>
-        </Style.Animations>
-    </Style>
+  <Style Selector="NotificationCard[IsClosing=true] /template/ LayoutTransformControl#PART_LayoutTransformControl">
+    <Setter Property="RenderTransformOrigin" Value="50%,0%"/>
+    <Style.Animations>
+      <Animation Duration="0:0:0.75" Easing="QuadraticEaseOut" FillMode="Forward">
+        <KeyFrame Cue="0%">
+          <Setter Property="TranslateTransform.X" Value="0"/>
+          <Setter Property="ScaleTransform.ScaleY" Value="1"/>
+        </KeyFrame>
+        <KeyFrame Cue="70%">
+          <Setter Property="TranslateTransform.X" Value="800"/>
+          <Setter Property="ScaleTransform.ScaleY" Value="1"/>
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="ScaleTransform.ScaleY" Value="0"/>
+          <Setter Property="TranslateTransform.X" Value="800"/>
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
 
-    <Style Selector="NotificationCard[IsClosing=true]">
-        <Style.Animations>
-            <Animation Duration="0:0:1.25" Easing="QuadraticEaseOut" FillMode="Forward">
-                <KeyFrame Cue="100%">
-                    <Setter Property="IsClosed" Value="True"/>
-                </KeyFrame>
-            </Animation>
-        </Style.Animations>
-    </Style>
+  <Style Selector="NotificationCard[IsClosing=true]">
+    <Style.Animations>
+      <Animation Duration="0:0:1.25" Easing="QuadraticEaseOut" FillMode="Forward">
+        <KeyFrame Cue="100%">
+          <Setter Property="IsClosed" Value="True"/>
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
 
-    <Style Selector="NotificationCard">
-        <Setter Property="Background" Value="{DynamicResource NotificationCardBackgroundBrush}"/>
-    </Style>
-    <Style Selector="NotificationCard:information">
-        <Setter Property="Background" Value="{DynamicResource NotificationCardInformationBackgroundBrush}"/>
-    </Style>
-    <Style Selector="NotificationCard:success">
-        <Setter Property="Background" Value="{DynamicResource NotificationCardSuccessBackgroundBrush}"/>
-    </Style>
-    <Style Selector="NotificationCard:warning">
-        <Setter Property="Background" Value="{DynamicResource NotificationCardWarningBackgroundBrush}"/>
-    </Style>
-    <Style Selector="NotificationCard:error">
-        <Setter Property="Background" Value="{DynamicResource NotificationCardErrorBackgroundBrush}"/>
-    </Style>
+  <Style Selector="NotificationCard:information">
+    <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardInformationBackgroundBrush}"/>
+  </Style>
+  <Style Selector="NotificationCard:success">
+    <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardSuccessBackgroundBrush}"/>
+  </Style>
+  <Style Selector="NotificationCard:warning">
+    <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardWarningBackgroundBrush}"/>
+  </Style>
+  <Style Selector="NotificationCard:error">
+    <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardErrorBackgroundBrush}"/>
+  </Style>
 </Styles>