XAML Islands - UWP NavigationView Control In WPF Using .NET Core😍

private void NavView_ItemInvoked(XamlIslands.NavigationView sender, XamlIslands.NavigationViewItemInvokedEventArgs args)  
{  
    if (args.IsSettingsInvoked)  
    {  

    }  
    else if (args.InvokedItemContainer != null)  
    {  
        var navItemTag = args.InvokedItemContainer.Tag.ToString();  
        MessageBox.Show(navItemTag);  
    }  
}  

private static XamlIslands.NavigationViewItem CreateMenu(string menuName)  
{  
    XamlIslands.NavigationViewItem item = new XamlIslands.NavigationViewItem  
    {  
        Name = menuName, Content = menuName,Tag = menuName  
    };  
    return item;  
}

Compile and run the application.

AppSettings

Create a user-defined class and define the ElementTheme. This class is used to set the value from WPF control to UWP control and vice versa. \

using Windows.UI.Xaml;  
  
namespace WPFXamlTemplate  
{  
    public delegate void OnThemeUpdate();  
    public static class AppSettings  
    {  
        public static ElementTheme CurrentTheme = ElementTheme.Default;  
  
        public static event OnThemeUpdate ThemeEvent;  
  
        public static void ThemeUpdate()  
        {  
            ThemeEvent?.Invoke();  
        }
    }  
}

WPF User control

Create WPF user control; In XAML define the Radio buttons and add the event handler based on the Radio button event set the ElementTheme value in App settings class

User-defined XAML file

<UserControl x:Class="WPFXamlTemplate.SettingsCtrl"  
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
             xmlns:local="clr-namespace:WPFXamlTemplate"  
             mc:Ignorable="d"   
             d:DesignHeight="450" d:DesignWidth="800">  
    <Grid>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="Auto" />  
            <RowDefinition Height="Auto" />  
            <RowDefinition Height="Auto" />  
        </Grid.RowDefinitions>
        <StackPanel>  
            <Label FontWeight="Bold" FontSize="30">WPF Window</Label>  
        </StackPanel>
        <StackPanel Margin="10" Grid.Row="1">  
            <Label FontWeight="Bold" FontSize="25">Theme Settings</Label>  
            <RadioButton x:Name="RdDark" Tag="Dark" Margin="10"  FontSize="25"  Checked="RadioButtonChecked">Dark</RadioButton>  
            <RadioButton x:Name="RdLight" Tag="light" Margin="10"  FontSize="25"  Checked="RadioButtonChecked">Light</RadioButton>  
        </StackPanel>
    </Grid>  
</UserControl>

User defined control code behind file,

using System;  
using System.Collections.Generic;  
using System.Text;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Data;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Imaging;  
using System.Windows.Navigation;  
using System.Windows.Shapes;  
using Windows.UI.Xaml;  
using RoutedEventArgs = System.Windows.RoutedEventArgs;  
  
namespace WPFXamlTemplate  
{  
    /// <summary>  
    /// Interaction logic for SettingsCtrl.xaml  
    /// </summary>  
    public partial class SettingsCtrl : UserControl  
    {  
        public SettingsCtrl()  
        {  
            InitializeComponent();  
        }  
  
        private void RadioButtonChecked(object sender, RoutedEventArgs e)  
        {  
            if (sender is RadioButton rdButton)  
            {  
                switch (rdButton.Tag.ToString())  
                {  
                    case "Dark":  
                        AppSettings.CurrentTheme = ElementTheme.Dark;  
                        break;  
                    case "light":  
                        AppSettings.CurrentTheme = ElementTheme.Light;  
                        break;  
                }  
  
                AppSettings.ThemeUpdate();  
            }  
        }  
    }  
}

Main application Changes

Add the user-defined control in the Main application XAML page.

Left side loads the NavigationView, Right side loads the WPF user defined control

<Window x:Class="WPFXamlTemplate.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:local="clr-namespace:WPFXamlTemplate"  
        xmlns:xamlHost="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"  
        mc:Ignorable="d"  
        Title="MainWindow" Height="450" Width="800">  
    <Grid>  
  
        <Grid.ColumnDefinitions>  
            <ColumnDefinition Width="Auto" />  
            <ColumnDefinition Width="Auto" />  
        </Grid.ColumnDefinitions>  
  
       <xamlHost:WindowsXamlHost Grid.Column="0" x:Name="MyNavView" InitialTypeName="Windows.UI.Xaml.Controls.NavigationView"/>  
        <StackPanel Grid.Column="1">  
           <local:SettingsCtrl x:Name="UserCtrlSetting" Margin="0"  Width="200" Height="200"/>  
        </StackPanel>  
    </Grid>  
</Window>

Main application Changes

In the main application code behind the page, implement the AppSettings callback event handler whenever the user clicks the theme radio button. This callback gets a trigger, and updates the Navigationview control theme.

AppSettings.ThemeEvent += AppSettings_ThemeEvent;  
  
private void AppSettings_ThemeEvent()  
{  
    _navView.RequestedTheme = AppSettings.CurrentTheme;  
} 

Find the complete source code here.(https://github.com/rvinothrajendran/XAML-Islands/tree/master/NavigationViewInWPF/WPFXamlTemplate)

Output

Conclusion

I hope you understand how to implement the UWP Control in WPF application.

Happy Reading. Happy coding.