Notification Flyout

A Notification Flyout that looks and feels exactly like the native Volume, Network, and Battery flyouts. Built with WPF and UWP with XamlIslands using the UWP Flyout control for the displaying of the flyout content.

Demo

Show case

NotificationFlyout.NowPlaying

Getting started

Many parts of this guide refers to the Host a custom WinRT XAML control in a WPF app using XAML Islands article. If in doubt, refer to the article, or post an issue on this repro.

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.

<xaml:XamlApplication
    x:Class="MyUWPApp.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:xaml="using:Microsoft.Toolkit.Win32.UI.XamlHost"
    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.

namespace MyUWPApp
{
    public sealed partial class App : Microsoft.Toolkit.Win32.UI.XamlHost.XamlApplication
    {
        public App()
        {
            this.Initialize();
        }
    }
}

5. In the UWP app project, install the TheXamlGuy.NotificationFlyout.Uwp.UI.Controls NuGet package (latest stable version).
6. 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.

<controls:NotificationFlyout
    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">
    <Grid Width="400" Height="500">
        <Button
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Hello World!" />
    </Grid>
</controls:NotificationFlyout>

7. Clean the UWP app project and then build it.

Create a WPF project

1. In Solution Explorer, right-click the solution node and select Add -> New Project.
2. Add a new WPF App (.NET Core) project.
3. In Solution Explorer, double-click the WPF project node to open the project file in the editor.
4. Replace the contents of this file with the following xml.

<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <UseWPF>true</UseWPF>
    <AssetTargetFallback>uap10.0.19041</AssetTargetFallback>
    <Platforms>AnyCPU;x64</Platforms>
  </PropertyGroup>
</Project>

5. In Solution Explorer, right-click the Dependencies node under the WPF project and add a reference to your UWP app project.
6. In the WPF app project, install the Microsoft.Toolkit.Wpf.UI.XamlHost and TheXamlGuy.NotificationFlyout.Wpf.UI.Controls NuGet packages (latest stable version).
7. 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.

<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>

8. Delete the MainWindow.xaml file from the WPF app project.
9. In your WPF project, right-click the project node, select Add -> New Item, and then select Class. Name the class Program and click Add.
10. 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.

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();
            }
        }
    }
}

11. Right-click the project node and choose Properties.
12. On the Application tab of the properties, click the Startup object drop-down and choose the fully qualified name of the Program class you added in the previous step.
13. Clean the WPF app project and then build it.
14. Run the WPF app.

Limitations and workarounds

All limitions found in this article 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 🎉!

Credits

Attributions to and inspiration for the ta)skbar API from the Ear Trumpet project!