From 2e17bef68f9fdaa5da055f0e78f537635a5b53e7 Mon Sep 17 00:00:00 2001
From: Daniel Clark <dan@thexamlguy.com>
Date: Thu, 11 Feb 2021 18:56:38 +0000
Subject: [PATCH] Update readme with getting started guide

---
 README.md | 57 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 0144434..7086ac9 100644
--- a/README.md
+++ b/README.md
@@ -7,10 +7,10 @@ A Notification Flyout that looks and feels exactly like the native Volume, Netwo
 # Getting started #
 The majority of this guide refers to the [Host a custom WinRT XAML control in a WPF app using XAML Islands](https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/host-custom-control-with-xaml-islands) article. 
 
-## Create a WPF project ##
+## Create a UWP project ##
 1. In Visual Studio 2019, create a new UWP app project project. Make sure the target version and minimum version are both set to Windows 10, version 1903 (Build 18362) or a later release.
-2. In the UWP app project, install the Microsoft.Toolkit.Win32.UI.XamlApplication NuGet package (latest stable version).
-3. Open the App.xaml file and replace the contents of this file with the following XAML. Replace MyUWPApp with the namespace of your UWP app project.
+2. In the UWP app project, install the [Microsoft.Toolkit.Win32.UI.XamlApplication NuGet package](https://www.nuget.org/packages/Microsoft.Toolkit.Win32.UI.XamlApplication) (latest stable version).
+3. Open the `App.xaml` file and replace the contents of this file with the following XAML. Replace `MyUWPApp` with the namespace of your UWP app project.
 ```xaml
 <xaml:XamlApplication
     x:Class="MyUWPApp.App"
@@ -20,7 +20,7 @@ The majority of this guide refers to the [Host a custom WinRT XAML control in a
     xmlns:local="using:MyUWPApp">
 </xaml:XamlApplication>
 ```
-4. Open the App.xaml.cs file and replace the contents of this file with the following code. Replace MyUWPApp with the namespace of your UWP app project.
+4. Open the `App.xaml.cs` file and replace the contents of this file with the following code. Replace `MyUWPApp` with the namespace of your UWP app project.
 ```c#
 namespace MyUWPApp
 {
@@ -34,10 +34,10 @@ namespace MyUWPApp
 }
 ```
 5. In the UWP app project, install the [NotificationFlyout.Uwp.UI.Controls](https://www.nuget.org/packages/NotificationFlyout.Uwp.UI.Controls/) NuGet package (latest stable version).
-3. Open the MainPage.xaml file and replace the contents of this file with the following XAML. Replace MyUWPApp with the namespace of your UWP app project.
+3. Open the `MainPage.xaml` file and replace the contents of this file with the following XAML. Replace `MyUWPApp` with the namespace of your UWP app project.
 ```xaml
 <controls:NotificationFlyout
-    x:Class="Test.MainPage"
+    x:Class="MyUWPApp.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:NotificationFlyout.Uwp.UI.Controls"
@@ -52,7 +52,50 @@ namespace MyUWPApp
 </controls:NotificationFlyout>
 ```
 5. In the UWP app project, add two icons (.ico) to the Assets folder.
-6. Place the icon names of `IconSource` and `LightIconSource` with the names of the icons that you have added to your Assets folder.
+6. Replace the values of `IconSource` and `LightIconSource` with the paths of the icons that you have added to your Assets folder.
+7. Clean the UWP app project and then build it.
+
+## Create a WPF project ##
+1. In Visual Studio 2019, create a new WPF App (.NET Core) project.
+2. In the WPF app project, install the [Microsoft.Toolkit.Wpf.UI.XamlHost](https://www.nuget.org/packages/Microsoft.Toolkit.Wpf.UI.XamlHost) and [NotificationFlyout.Wpf.UI.Controls](https://www.nuget.org/packages/NotificationFlyout.Wpf.UI.Controls/) NuGet packages (latest stable version).
+3. Open the `App.xaml` file and replace the contents of this file with the following XAML. Replace `MyWPFApp` with the namespace of your WPF app project.
+```xaml
+<Application
+    x:Class="MyWPFApp.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Application.Resources />
+</Application>
+```
+4. Delete the MainWindow.xaml file from the WPF app project.
+5. In your WPF project, right-click the project node, select Add -> New Item, and then select Class. Name the class Program and click Add.
+6. Replace the generated `Program` class with the following code and then save the file. Replace `MyUWPApp` with the namespace of your UWP app project, and replace `MyWPFApp` with the namespace of your WPF app project.
+```c#
+using NotificationFlyout.Wpf.UI.Controls;
+using System;
+
+namespace MyWPFApp
+{
+    public class Program
+    {
+        [STAThread()]
+        public static void Main()
+        {
+            using (new MyUWPApp.App())
+            {
+                MyWPFApp.App app = new MyWPFApp.App();
+                new NotificationFlyoutApplication
+                {
+                    Flyout = new MainPage()
+                };
+                app.Run();
+            }
+        }
+    }
+}
+```
+7. Clean the WPF app project and then build it.
+8. Run the WPF app.
 
 # Limitations and workarounds #
 All limitions found in this [article](https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/xaml-islands#limitations-and-workarounds) will affect how you build an app using this control. We have of course have added a work around for when the Windows theme is changed by the user 🎉!