Create single NavigationView control

src/Wpf.Ui.Demo.Mvvm/ViewModels/ContainerViewModel.cs

@@ -8,7 +8,7 @@
 using CommunityToolkit.Mvvm.ComponentModel;
 using Wpf.Ui.Common;
 using Wpf.Ui.Controls;
-using Wpf.Ui.Controls.Interfaces;
+using Wpf.Ui.Controls.Navigation;
 using Wpf.Ui.Mvvm.Contracts;
 
 namespace Wpf.Ui.Demo.Mvvm.ViewModels;
@@ -21,10 +21,10 @@ public partial class ContainerViewModel : ObservableObject
     private string _applicationTitle = String.Empty;
 
     [ObservableProperty]
-    private ObservableCollection<INavigationControl> _navigationItems = new();
+    private ObservableCollection<object> _navigationItems = new();
 
     [ObservableProperty]
-    private ObservableCollection<INavigationControl> _navigationFooter = new();
+    private ObservableCollection<object> _navigationFooter = new();
 
     [ObservableProperty]
     private ObservableCollection<MenuItem> _trayMenuItems = new();
@@ -37,34 +37,31 @@ public ContainerViewModel(INavigationService navigationService)
 
     private void InitializeViewModel()
     {
-        ApplicationTitle = "WPF UI - Wpf.Ui.Demo.Mvvm";
+        ApplicationTitle = "WPF UI - MVVM Demo";
 
-        NavigationItems = new ObservableCollection<INavigationControl>
+        NavigationItems = new ObservableCollection<object>
             {
-                new NavigationItem()
+                new NavigationViewItem()
                 {
                     Content = "Home",
-                    PageTag = "dashboard",
                     Icon = SymbolRegular.Home24,
-                    PageType = typeof(Views.Pages.DashboardPage)
+                    TargetPageType = typeof(Views.Pages.DashboardPage)
                 },
-                new NavigationItem()
+                new NavigationViewItem()
                 {
                     Content = "Data",
-                    PageTag = "data",
                     Icon = SymbolRegular.DataHistogram24,
-                    PageType = typeof(Views.Pages.DataPage)
+                    TargetPageType = typeof(Views.Pages.DataPage)
                 }
             };
 
-        NavigationFooter = new ObservableCollection<INavigationControl>
+        NavigationFooter = new ObservableCollection<object>
             {
-                new NavigationItem()
+                new NavigationViewItem()
                 {
                     Content = "Settings",
-                    PageTag = "settings",
                     Icon = SymbolRegular.Settings24,
-                    PageType = typeof(Views.Pages.SettingsPage)
+                    TargetPageType = typeof(Views.Pages.SettingsPage)
                 }
             };
 

src/Wpf.Ui.Demo.Mvvm/Views/Container.xaml

@@ -18,58 +18,46 @@
     WindowStartupLocation="CenterScreen"
     mc:Ignorable="d">
     <Grid>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
 
-        <ui:NavigationCompact
+        <ui:NavigationView
             x:Name="RootNavigation"
-            Grid.Column="0"
-            Footer="{Binding ViewModel.NavigationFooter, Mode=TwoWay}"
-            Frame="{Binding ElementName=RootFrame, Mode=OneWay}"
-            Items="{Binding ViewModel.NavigationItems, Mode=TwoWay}" />
+            Grid.Row="1"
+            FooterMenuItemsSource="{Binding ViewModel.NavigationFooter, Mode=OneWay}"
+            MenuItemsSource="{Binding ViewModel.NavigationItems, Mode=OneWay}">
+            <ui:NavigationView.AutoSuggestBox>
+                <ui:AutoSuggestBox
+                    Margin="8,8,8,16"
+                    IconPlacement="Right"
+                    PlaceholderEnabled="True"
+                    PlaceholderText="Search" />
+            </ui:NavigationView.AutoSuggestBox>
+            <ui:NavigationView.Header>
+                <ui:NavigationViewBreadcrumb
+                    Margin="42,32,0,0"
+                    FontSize="28"
+                    FontWeight="DemiBold" />
+            </ui:NavigationView.Header>
+        </ui:NavigationView>
 
         <ui:TitleBar
             Title="{Binding ViewModel.ApplicationTitle, Mode=OneWay}"
             Grid.Row="0"
-            Grid.Column="0"
-            Grid.ColumnSpan="2"
-            Margin="42,0,0,0"
             Icon="pack://application:,,,/Assets/applicationIcon-256.png">
             <ui:TitleBar.Tray>
                 <ui:NotifyIcon
                     FocusOnLeftClick="True"
                     Icon="pack://application:,,,/Assets/applicationIcon-256.png"
                     MenuOnRightClick="True"
-                    TooltipText="Wpf.Ui.Demo.Mvvm">
+                    TooltipText="WPF UI - MVVM Demo">
                     <ui:NotifyIcon.Menu>
                         <ContextMenu ItemsSource="{Binding ViewModel.TrayMenuItems, Mode=OneWay}" />
                     </ui:NotifyIcon.Menu>
                 </ui:NotifyIcon>
             </ui:TitleBar.Tray>
         </ui:TitleBar>
-
-        <Grid Grid.Column="1">
-            <Border
-                Margin="0,46,0,0"
-                Background="{DynamicResource ControlFillColorDefaultBrush}"
-                CornerRadius="8,0,0,0">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="*" />
-                    </Grid.RowDefinitions>
-                    <Frame x:Name="RootFrame" Grid.Row="1" />
-                    <ui:Breadcrumb
-                        Grid.Row="0"
-                        Margin="56,32"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Top"
-                        FontSize="28"
-                        Navigation="{Binding ElementName=RootNavigation, Mode=OneWay}" />
-                </Grid>
-            </Border>
-        </Grid>
     </Grid>
 </ui:UiWindow>

src/Wpf.Ui.Demo.Mvvm/Views/Container.xaml.cs

@@ -5,7 +5,6 @@
 
 using System;
 using System.Windows;
-using System.Windows.Controls;
 using Wpf.Ui.Controls.Interfaces;
 using Wpf.Ui.Mvvm.Contracts;
 
@@ -36,17 +35,14 @@ public Container(ViewModels.ContainerViewModel viewModel, IPageService pageServi
 
     #region INavigationWindow methods
 
-    public Frame GetFrame()
-        => RootFrame;
-
-    public INavigation GetNavigation()
+    public INavigationView GetNavigation()
         => RootNavigation;
 
     public bool Navigate(Type pageType)
         => RootNavigation.Navigate(pageType);
 
     public void SetPageService(IPageService pageService)
-        => RootNavigation.PageService = pageService;
+        => RootNavigation.SetPageService(pageService);
 
     public void ShowWindow()
         => Show();
@@ -66,4 +62,14 @@ protected override void OnClosed(EventArgs e)
         // Make sure that closing this window will begin the process of closing the application.
         Application.Current.Shutdown();
     }
+
+    INavigationView INavigationWindow.GetNavigation()
+    {
+        throw new NotImplementedException();
+    }
+
+    public void SetServiceProvider(IServiceProvider serviceProvider)
+    {
+        throw new NotImplementedException();
+    }
 }

src/Wpf.Ui.Demo.Mvvm/Views/Pages/DashboardPage.xaml

@@ -14,7 +14,7 @@
     Foreground="{DynamicResource TextFillColorPrimaryBrush}"
     mc:Ignorable="d">
 
-    <Grid Margin="56,0" VerticalAlignment="Top">
+    <Grid Margin="42" VerticalAlignment="Top">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="Auto" />

src/Wpf.Ui.Demo.Mvvm/Views/Pages/DataPage.xaml

@@ -14,7 +14,7 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
 
-    <Grid Margin="56,0">
+    <Grid Margin="42">
         <ui:VirtualizingItemsControl
             Foreground="{DynamicResource TextFillColorSecondaryBrush}"
             ItemsSource="{Binding ViewModel.Colors, Mode=OneWay}"

src/Wpf.Ui.Demo.Mvvm/Views/Pages/SettingsPage.xaml

@@ -18,7 +18,7 @@
         <helpers:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
     </ui:UiPage.Resources>
 
-    <StackPanel Margin="56,0">
+    <StackPanel Margin="42">
         <TextBlock
             FontSize="20"
             FontWeight="Medium"

src/Wpf.Ui.Demo.Simple/MainWindow.xaml

@@ -16,39 +16,46 @@
     WindowStartupLocation="CenterScreen"
     mc:Ignorable="d">
     <Grid>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="Auto" />
-            <ColumnDefinition Width="*" />
-        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
 
-        <ui:NavigationCompact
-            x:Name="RootNavigation"
-            Grid.Column="0"
-            Frame="{Binding ElementName=RootFrame, Mode=OneWay}">
-            <ui:NavigationCompact.Items>
-                <ui:NavigationItem
+        <ui:NavigationView x:Name="RootNavigation" Grid.Row="1">
+            <ui:NavigationView.AutoSuggestBox>
+                <ui:AutoSuggestBox
+                    Margin="8,8,8,16"
+                    IconPlacement="Right"
+                    PlaceholderEnabled="True"
+                    PlaceholderText="Search" />
+            </ui:NavigationView.AutoSuggestBox>
+            <ui:NavigationView.Header>
+                <ui:NavigationViewBreadcrumb
+                    Margin="42,32,0,0"
+                    FontSize="28"
+                    FontWeight="DemiBold" />
+            </ui:NavigationView.Header>
+            <ui:NavigationView.MenuItems>
+                <ui:NavigationViewItem
                     Content="Dashboard"
                     Icon="Home24"
-                    PageType="{x:Type pages:DashboardPage}" />
-                <ui:NavigationItem
+                    TargetPageType="{x:Type pages:DashboardPage}" />
+                <ui:NavigationViewItem
                     Content="Data"
                     Icon="DataHistogram24"
-                    PageType="{x:Type pages:DataPage}" />
-            </ui:NavigationCompact.Items>
-            <ui:NavigationCompact.Footer>
-                <ui:NavigationItem
+                    TargetPageType="{x:Type pages:DataPage}" />
+            </ui:NavigationView.MenuItems>
+            <ui:NavigationView.FooterMenuItems>
+                <ui:NavigationViewItem
                     Content="Settings"
                     Icon="Settings24"
-                    PageType="{x:Type pages:SettingsPage}" />
-            </ui:NavigationCompact.Footer>
-        </ui:NavigationCompact>
+                    TargetPageType="{x:Type pages:SettingsPage}" />
+            </ui:NavigationView.FooterMenuItems>
+        </ui:NavigationView>
 
         <ui:TitleBar
             Title="WPF UI - Simple Demo"
             Grid.Row="0"
-            Grid.Column="0"
-            Grid.ColumnSpan="2"
-            Margin="42,0,0,0"
             Icon="pack://application:,,,/Assets/applicationIcon-256.png">
             <ui:TitleBar.Tray>
                 <ui:NotifyIcon
@@ -62,27 +69,5 @@
                 </ui:NotifyIcon>
             </ui:TitleBar.Tray>
         </ui:TitleBar>
-
-        <Grid Grid.Column="1">
-            <Border
-                Margin="0,46,0,0"
-                Background="{DynamicResource ControlFillColorDefaultBrush}"
-                CornerRadius="8,0,0,0">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="*" />
-                    </Grid.RowDefinitions>
-                    <Frame x:Name="RootFrame" Grid.Row="1" />
-                    <ui:Breadcrumb
-                        Grid.Row="0"
-                        Margin="56,32"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Top"
-                        FontSize="28"
-                        Navigation="{Binding ElementName=RootNavigation, Mode=OneWay}" />
-                </Grid>
-            </Border>
-        </Grid>
     </Grid>
 </ui:UiWindow>

src/Wpf.Ui.Demo.Simple/Views/Pages/DashboardPage.xaml

@@ -12,7 +12,7 @@
     Foreground="{DynamicResource TextFillColorPrimaryBrush}"
     mc:Ignorable="d">
 
-    <Grid Margin="56,0" VerticalAlignment="Top">
+    <Grid Margin="42" VerticalAlignment="Top">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="Auto" />

src/Wpf.Ui.Demo.Simple/Views/Pages/DataPage.xaml

@@ -12,7 +12,7 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
 
-    <Grid Margin="56,0">
+    <Grid Margin="42">
         <ui:VirtualizingItemsControl
             x:Name="ColorsItemsControl"
             Foreground="{DynamicResource TextFillColorSecondaryBrush}"

src/Wpf.Ui.Demo.Simple/Views/Pages/SettingsPage.xaml

@@ -12,7 +12,7 @@
     Foreground="{DynamicResource TextFillColorPrimaryBrush}"
     mc:Ignorable="d">
 
-    <StackPanel Margin="56,0">
+    <StackPanel Margin="42">
         <TextBlock
             FontSize="20"
             FontWeight="Medium"

src/Wpf.Ui/Animations/Transitions.cs

@@ -16,7 +16,7 @@ namespace Wpf.Ui.Animations;
 /// </summary>
 public static class Transitions
 {
-    private const double DecelerationRatio = 0.7;
+    private const double DecelerationRatio = 0.7D;
 
     /// <summary>
     /// Attempts to apply an animation effect while adding content to the frame.

src/Wpf.Ui/Common/Interfaces/INavigableView.cs

@@ -8,13 +8,13 @@
 namespace Wpf.Ui.Common.Interfaces;
 
 /// <summary>
-/// A view whose ViewModel is separate from the DataContext and can be navigated by <see cref="INavigation"/>.
+/// A component whose ViewModel is separate from the DataContext and can be navigated by <see cref="INavigationView"/>.
 /// </summary>
 public interface INavigableView<out T>
 {
     /// <summary>
     /// ViewModel used by the view.
-    /// Optionally, it may implement <see cref="INavigationAware"/> and be navigated by <see cref="INavigation"/>.
+    /// Optionally, it may implement <see cref="INavigationAware"/> and be navigated by <see cref="INavigationView"/>.
     /// </summary>
     T ViewModel { get; }
 }