dan/NotificationFlyout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update readme with getting started guide

Browse Source
This commit is contained in:
Daniel Clark
2021-02-11 18:56:38 +00:00
committed by GitHub
parent 8b5427e8ca
commit 2e17bef68f
1 changed files with 50 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+50 -7
View File
@@ -7,10 +7,10 @@ A Notification Flyout that looks and feels exactly like the native Volume, Netwo
# Getting started # # 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. 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. 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). 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. 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
<xaml:XamlApplication <xaml:XamlApplication
x:Class="MyUWPApp.App" 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"> xmlns:local="using:MyUWPApp">
</xaml:XamlApplication> </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# ```c#
namespace MyUWPApp 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). 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 ```xaml
<controls:NotificationFlyout <controls:NotificationFlyout
x:Class="Test.MainPage" x:Class="MyUWPApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:NotificationFlyout.Uwp.UI.Controls" xmlns:controls="using:NotificationFlyout.Uwp.UI.Controls"
@@ -52,7 +52,50 @@ namespace MyUWPApp
</controls:NotificationFlyout> </controls:NotificationFlyout>
``` ```
5. In the UWP app project, add two icons (.ico) to the Assets folder. 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 # # 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 🎉! 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 🎉!