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.
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.
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>
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();
}
}
}
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>
<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>
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>
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](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 🎉!
# Credits #
Attributions to and inspiration for the ta)skbar API from the [Ear Trumpet project!](https://github.com/File-New-Project/EarTrumpet)