implement MVVM style notifications. (Managed only)

nukebuild/Numerge

@@ -1 +1 @@
-Subproject commit aef10ae67dc55c95f49b52a505a0be33bfa297a5
+Subproject commit 4464343aef5c8ab7a42fcb20a483a6058199f8b8

samples/ControlCatalog/MainWindow.xaml

@@ -3,7 +3,14 @@
         Icon="/Assets/test_icon.ico"
         xmlns:local="clr-namespace:ControlCatalog"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:vm="clr-namespace:ControlCatalog.ViewModels"
+        xmlns:v="clr-namespace:ControlCatalog.Views"
         x:Class="ControlCatalog.MainWindow">
+    <Window.DataTemplates>
+        <DataTemplate DataType="vm:NotificationViewModel">
+            <v:NotificationView />
+        </DataTemplate>
+    </Window.DataTemplates>
     <Panel>
         <local:MainView/>
         <NotificationArea Name="Main" Position="TopRight" MaxItems="5" />

samples/ControlCatalog/MainWindow.xaml.cs

@@ -3,6 +3,7 @@ using Avalonia.Controls;
 using Avalonia.Controls.Notifications;
 using Avalonia.Markup.Xaml;
 using Avalonia.Threading;
+using ControlCatalog.ViewModels;
 using System;
 using System.Threading.Tasks;
 
@@ -10,8 +11,6 @@ namespace ControlCatalog
 {
     public class MainWindow : Window
     {
-        private readonly NotificationManager _notificationManager = new NotificationManager();
-
         public MainWindow()
         {
             this.InitializeComponent();
@@ -19,25 +18,7 @@ namespace ControlCatalog
             //Renderer.DrawFps = true;
             //Renderer.DrawDirtyRects = Renderer.DrawFps = true;
 
-            Dispatcher.UIThread.InvokeAsync(async () =>
-            {
-                await Task.Delay(5000);
-
-                _notificationManager.Show(new NotificationContent { Message = "Test1", Type = NotificationType.Information }, "Main");
-
-                await Task.Delay(500);
-                _notificationManager.Show(new NotificationContent { Message = "Test2", Type = NotificationType.Error }, "Main");
-
-                await Task.Delay(500);
-                _notificationManager.Show(new NotificationContent { Message = "Test3", Type = NotificationType.Warning }, "Main");
-
-                await Task.Delay(500);
-                _notificationManager.Show(new NotificationContent { Message = "Test4", Type = NotificationType.Success }, "Main");
-
-                await Task.Delay(500);
-                _notificationManager.Show("Test5", "Main");
-
-            });
+            DataContext = new MainWindowViewModel();
         }
 
         private void InitializeComponent()

samples/ControlCatalog/ViewModels/MainWindowViewModel.cs

@@ -0,0 +1,35 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Threading.Tasks;
+using Avalonia.Controls.Notifications;
+using Avalonia.Threading;
+
+namespace ControlCatalog.ViewModels
+{
+    class MainWindowViewModel
+    {
+        public MainWindowViewModel()
+        {
+            Dispatcher.UIThread.InvokeAsync(async () =>
+            {
+                await Task.Delay(5000);
+
+                NotificationManager.Instance.Show(new NotificationViewModel { Title = "Warning", Message = "Please save your work before closing." }, "Main");
+
+                await Task.Delay(1500);
+                NotificationManager.Instance.Show(new NotificationContent { Message = "Test2", Type = NotificationType.Error }, "Main");
+
+                await Task.Delay(2000);
+                NotificationManager.Instance.Show(new NotificationContent { Message = "Test3", Type = NotificationType.Warning }, "Main");
+
+                await Task.Delay(2500);
+                NotificationManager.Instance.Show(new NotificationContent { Message = "Test4", Type = NotificationType.Success }, "Main");
+
+                await Task.Delay(500);
+                NotificationManager.Instance.Show("Test5", "Main");
+
+            });
+        }
+    }
+}

samples/ControlCatalog/ViewModels/NotificationViewModel.cs

@@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace ControlCatalog.ViewModels
+{
+    public class NotificationViewModel
+    {
+        public string Title { get; set; }
+        public string Message { get; set; }
+    }
+}

samples/ControlCatalog/Views/NotificationView.xaml

@@ -0,0 +1,23 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="ControlCatalog.Views.NotificationView">
+    <Border Padding="12" MinHeight="20" Background="#FF444444">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="*"/>
+            </Grid.ColumnDefinitions>
+            <ContentControl Margin="0,0,12,0" Width="25" Height="25" VerticalAlignment="Top">
+                <TextBlock Text="&#xE115;" FontFamily="Segoe UI Symbol" FontSize="20" TextAlignment="Center" VerticalAlignment="Center"/>
+            </ContentControl>
+            <DockPanel Grid.Column="1">
+                <TextBlock DockPanel.Dock="Top" Text="{Binding Title}" FontWeight="Medium" />
+                <DockPanel LastChildFill="False" DockPanel.Dock="Bottom" Margin="0,8,0,0">
+                    <Button x:Name="Ok" Content="Ok" DockPanel.Dock="Right"  />
+                    <Button x:Name="Cancel" Content="Cancel" DockPanel.Dock="Right" Margin="0,0,8,0" />
+                </DockPanel>
+                <TextBlock Text="{Binding Message}" TextWrapping="Wrap" Opacity=".8" Margin="0,8,0,0"/>
+            </DockPanel>
+        </Grid>
+    </Border>
+</UserControl>

samples/ControlCatalog/Views/NotificationView.xaml.cs

@@ -0,0 +1,19 @@
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Markup.Xaml;
+
+namespace ControlCatalog.Views
+{
+    public class NotificationView : UserControl
+    {
+        public NotificationView()
+        {
+            this.InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Avalonia.Controls/Notifications/NotificationManager.cs

@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -11,9 +11,7 @@ namespace Avalonia.Controls.Notifications
         private static readonly List<NotificationArea> Areas = new List<NotificationArea>();
         private static Window _window;
 
-        public NotificationManager()
-        {
-        }
+        public static NotificationManager Instance = new NotificationManager();
 
         public void Show(object content, string areaName = "", TimeSpan? expirationTime = null, Action onClick = null,
             Action onClose = null)

src/Avalonia.Themes.Default/NotificationArea.xaml

@@ -14,24 +14,20 @@
         <Setter Property="FontSize" Value="14"/>
         <Setter Property="Foreground" Value="White"/>
         <Setter Property="RenderTransformOrigin" Value="50%,75%"/>
-        <Setter Property="Height" Value="100"/>
-        <!-- <Setter Property="ContentTemplateSelector" Value="{StaticResource NotificationTemplateSelector}"/> -->
+        <Setter Property="MinHeight" Value="100"/>
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Background="{TemplateBinding Background}" 
                         BorderBrush="{TemplateBinding BorderBrush}" 
                         BorderThickness="{TemplateBinding BorderThickness}" 
                         Margin="8,8,0,0">
-                    <Grid>
-                        <ContentPresenter Content="{TemplateBinding Content}" />
-                        <Button Name="PART_CloseButton" Margin="12" Foreground="{TemplateBinding Foreground}" Opacity="0.8"/>
-                    </Grid>
+                    <ContentControl Content="{TemplateBinding Content}" />
                 </Border>
             </ControlTemplate>
         </Setter>
 
         <Style.Animations>
-            <Animation Duration="0:0:0.25" Easing="QuadraticEaseIn" FillMode="Forward">
+            <Animation Duration="0:0:0.45" Easing="QuadraticEaseIn" FillMode="Forward">
                 <KeyFrame Cue="0%">
                     <Setter Property="Opacity" Value="0"/>
                     <Setter Property="TranslateTransform.Y" Value="-20"/>
@@ -53,7 +49,7 @@
 
     <Style Selector="Notification[IsClosing=true]">
         <Style.Animations>
-            <Animation Duration="0:0:0.2" Easing="QuadraticEaseOut" FillMode="Forward">
+            <Animation Duration="0:0:0.7" Easing="QuadraticEaseOut" FillMode="Forward">
                 <KeyFrame Cue="0%">
                     <Setter Property="Opacity" Value="1"/>
                     <Setter Property="TranslateTransform.X" Value="0"/>