🎨 Refactor UI navigation.

hexawyz · May 3, 2024 · 7ecb503 · 7ecb503
1 parent 1983c03
commit 7ecb503
Show file tree

Hide file tree

Showing 23 changed files with 635 additions and 173 deletions.
diff --git a/Exo.Settings.Ui/App.xaml b/Exo.Settings.Ui/App.xaml
@@ -53,6 +53,7 @@
             <local:StringFormatConverter x:Key="StringFormatConverter" />
             <local:BatteryStateToGlyphConverter x:Key="BatteryStateToGlyphConverter" />
             <local:ByteToDoubleConverter x:Key="ByteToDoubleConverter" />
+            <local:StringResourceConverter x:Key="StringResourceConverter" />
 
             <local:RgbLightingDefaultPalette x:Key="RgbLightingDefaultPalette" />
 

diff --git a/Exo.Settings.Ui/ChangedProperty.cs b/Exo.Settings.Ui/ChangedProperty.cs
@@ -30,4 +30,7 @@ internal static class ChangedProperty
 	public static readonly PropertyChangedEventArgs LiveDetails = new(nameof(LiveDetails));
 	public static readonly PropertyChangedEventArgs CurrentValue = new(nameof(CurrentValue));
 	public static readonly PropertyChangedEventArgs History = new(nameof(History));
+	public static readonly PropertyChangedEventArgs SelectedNavigationPage = new(nameof(SelectedNavigationPage));
+	public static readonly PropertyChangedEventArgs CurrentPage = new(nameof(CurrentPage));
+	public static readonly PropertyChangedEventArgs CanNavigateBack = new(nameof(CanNavigateBack));
 }
diff --git a/Exo.Settings.Ui/CustomMenuPage.xaml.cs b/Exo.Settings.Ui/CustomMenuPage.xaml.cs
@@ -14,12 +14,6 @@ public CustomMenuPage()
 	private SettingsViewModel SettingsViewModel => (SettingsViewModel)DataContext;
 	private CustomMenuViewModel CustomMenuViewModel => SettingsViewModel.CustomMenu;
 
-	protected override void OnNavigatedTo(NavigationEventArgs e)
-	{
-		SettingsViewModel.Icon = "\uEDE3";
-		SettingsViewModel.Title = "Custom Menu";
-	}
-
 	private void OnBreadcrumbBarItemClicked(BreadcrumbBar sender, BreadcrumbBarItemClickedEventArgs args)
 		=> CustomMenuViewModel.NavigateToSubMenuCommand.Execute(args.Item);
 }
diff --git a/Exo.Settings.Ui/DevicePage.xaml.cs b/Exo.Settings.Ui/DevicePage.xaml.cs
@@ -1,4 +1,3 @@
-using System;
 using Exo.Settings.Ui.ViewModels;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Navigation;
@@ -33,17 +32,6 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
 
 			devicesViewModel.SelectedDevice = selectedDevice;
 		}
-
-		if (selectedDevice is not null)
-		{
-			ViewModel.Icon = DeviceCategoryToGlyphConverter.GetGlyph(selectedDevice.Category);
-			ViewModel.Title = selectedDevice.FriendlyName;
-		}
-		else
-		{
-			ViewModel.Icon = null;
-			ViewModel.Title = "<Unknown Device>";
-		}
 	}
 
 	protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

diff --git a/Exo.Settings.Ui/DevicesPage.xaml b/Exo.Settings.Ui/DevicesPage.xaml
@@ -11,9 +11,19 @@
     d:DataContext="{d:DesignInstance vm:SettingsViewModel, IsDesignTimeCreatable=False}">
 
     <ItemsControl ItemsSource="{Binding Devices.Devices}" HorizontalContentAlignment="Stretch">
+        <ItemsControl.Resources>
+            <XamlUICommand x:Key="NavigateCommand" Command="{Binding Devices.NavigateToDeviceCommand}" />
+        </ItemsControl.Resources>
         <ItemsControl.ItemTemplate>
             <DataTemplate>
-                <Button Margin="{StaticResource VerticalItemSpacing}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Padding="12" Click="OnDeviceButtonClick" IsEnabled="{Binding IsAvailable}">
+                <Button
+                    Margin="{StaticResource VerticalItemSpacing}"
+                    HorizontalAlignment="Stretch"
+                    HorizontalContentAlignment="Stretch"
+                    Padding="12"
+                    Command="{StaticResource NavigateCommand}"
+                    CommandParameter="{Binding}"
+                    IsEnabled="{Binding IsAvailable}">
                     <Grid HorizontalAlignment="Stretch">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="Auto" />

diff --git a/Exo.Settings.Ui/DevicesPage.xaml.cs b/Exo.Settings.Ui/DevicesPage.xaml.cs
@@ -1,18 +1,5 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
 using Exo.Settings.Ui.ViewModels;
-using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Controls.Primitives;
-using Microsoft.UI.Xaml.Data;
-using Microsoft.UI.Xaml.Input;
-using Microsoft.UI.Xaml.Media;
-using Microsoft.UI.Xaml.Navigation;
-using Windows.Foundation;
-using Windows.Foundation.Collections;
 
 namespace Exo.Settings.Ui;
 
@@ -27,16 +14,4 @@ public DevicesPage()
 	}
 
 	private SettingsViewModel ViewModel => (SettingsViewModel)DataContext;
-
-	private void OnDeviceButtonClick(object sender, RoutedEventArgs e)
-	{
-		var device = (DeviceViewModel)((FrameworkElement)sender).DataContext;
-		Frame.Navigate(typeof(DevicePage), device.Id);
-	}
-
-	protected override void OnNavigatedTo(NavigationEventArgs e)
-	{
-		ViewModel.Icon = "\uE772";
-		ViewModel.Title = "Devices";
-	}
 }
diff --git a/Exo.Settings.Ui/Exo.Settings.Ui.csproj b/Exo.Settings.Ui/Exo.Settings.Ui.csproj
@@ -5,13 +5,14 @@
     <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<RootNamespace>Exo.Settings.Ui</RootNamespace>
-    <ApplicationManifest>app.manifest</ApplicationManifest>
-    <Platforms>x86;x64;ARM64</Platforms>
-    <RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
+		<Nullable>enable</Nullable>
+		<ApplicationManifest>app.manifest</ApplicationManifest>
+		<Platforms>x86;x64;ARM64</Platforms>
+		<RuntimeIdentifiers Condition="$([MSBuild]::GetTargetFrameworkVersion('$(TargetFramework)')) &gt;= 8">win-x86;win-x64;win-arm64</RuntimeIdentifiers>
+		<RuntimeIdentifiers Condition="$([MSBuild]::GetTargetFrameworkVersion('$(TargetFramework)')) &lt; 8">win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
     <PublishProfile>win10-$(Platform).pubxml</PublishProfile>
     <UseWinUI>true</UseWinUI>
     <EnableMsixTooling>true</EnableMsixTooling>
-		<UseRidGraph>true</UseRidGraph>
 		<WindowsPackageType>None</WindowsPackageType>
 		<PublishSingleFile>false</PublishSingleFile>
 		<ApplicationIcon>..\exo-icon.ico</ApplicationIcon>
@@ -25,6 +26,7 @@
     <None Remove="DevicePage.xaml" />
     <None Remove="DevicesPage.xaml" />
     <None Remove="EditionToolbar.xaml" />
+    <None Remove="HomePage.xaml" />
     <None Remove="LightingPage.xaml" />
     <None Remove="LightingZoneControl.xaml" />
     <None Remove="MonitorSettingControl.xaml" />
@@ -69,6 +71,11 @@
     <ProjectReference Include="..\Exo.Contracts.Ui.Settings\Exo.Contracts.Ui.Settings.csproj" />
     <ProjectReference Include="..\Exo.Ui.Core\Exo.Ui.Core.csproj" />
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="HomePage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
   <ItemGroup>
     <Page Update="Controls\LineChart.xaml">
       <Generator>MSBuild:Compile</Generator>

diff --git a/Exo.Settings.Ui/HomePage.xaml b/Exo.Settings.Ui/HomePage.xaml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page
+    x:Class="Exo.Settings.Ui.HomePage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Exo.Settings.Ui"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <TextBlock x:Uid="Welcome" />
+    </Grid>
+</Page>
diff --git a/Exo.Settings.Ui/HomePage.xaml.cs b/Exo.Settings.Ui/HomePage.xaml.cs
@@ -0,0 +1,11 @@
+using Microsoft.UI.Xaml.Controls;
+
+namespace Exo.Settings.Ui;
+
+public sealed partial class HomePage : Page
+{
+	public HomePage()
+	{
+		this.InitializeComponent();
+	}
+}
diff --git a/Exo.Settings.Ui/LightingPage.xaml.cs b/Exo.Settings.Ui/LightingPage.xaml.cs
@@ -17,14 +17,11 @@ public LightingPage()
 
 	protected override void OnNavigatedTo(NavigationEventArgs e)
 	{
-		ViewModel.Icon = "\uE781";
-		ViewModel.Title = "Lighting";
 		App.Current.Services.GetRequiredService<IEditionService>().ShowToolbar = true;
 	}
 
 	protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
 	{
 		App.Current.Services.GetRequiredService<IEditionService>().ShowToolbar = false;
-		base.OnNavigatingFrom(e);
 	}
 }
diff --git a/Exo.Settings.Ui/ProgrammingPage.xaml.cs b/Exo.Settings.Ui/ProgrammingPage.xaml.cs
@@ -29,10 +29,4 @@ public ProgrammingPage()
 	}
 
 	private SettingsViewModel ViewModel => (SettingsViewModel)DataContext;
-
-	protected override void OnNavigatedTo(NavigationEventArgs e)
-	{
-		ViewModel.Icon = "\uE943";
-		ViewModel.Title = "Programming";
-	}
 }
diff --git a/Exo.Settings.Ui/RootPage.xaml b/Exo.Settings.Ui/RootPage.xaml
@@ -4,11 +4,12 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Exo.Settings.Ui"
+    xmlns:vm="using:Exo.Settings.Ui.ViewModels"
     xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    DataContext="{x:Bind ViewModel}"
-    mc:Ignorable="d">
+    mc:Ignorable="d"
+    d:DataContext="{d:DesignInstance vm:SettingsViewModel, IsDesignTimeCreatable=False}">
 
     <Grid>
         <Grid.ColumnDefinitions>
@@ -92,7 +93,9 @@
             IsTabStop="False"
             IsSettingsVisible="False"
             IsTitleBarAutoPaddingEnabled="True"
-            IsBackEnabled="{x:Bind ContentFrame.CanGoBack, Mode=OneWay}"
+            IsBackEnabled="{Binding CanNavigateBack}"
+            MenuItemsSource="{Binding NavigationPages}"
+            SelectedItem="{Binding SelectedNavigationPage, Mode=TwoWay}"
             DisplayModeChanged="OnPaneDisplayModeChanged"
             ItemInvoked="OnNavigationItemInvoked"
             BackRequested="OnNavigationBackRequested">
@@ -102,33 +105,15 @@
                 <Thickness x:Key="NavigationViewContentGridBorderThickness">1,1,0,0</Thickness>
                 <CornerRadius x:Key="NavigationViewContentGridCornerRadius">8,0,0,0</CornerRadius>
             </NavigationView.Resources>
-            <NavigationView.MenuItems>
-                <NavigationViewItem x:Uid="NavigationDevices" Tag="Devices">
-                    <NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE772;" />
-                    </NavigationViewItem.Icon>
-                </NavigationViewItem>
-                <NavigationViewItem x:Uid="NavigationLighting" Tag="Lighting">
-                    <NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE781;" />
-                    </NavigationViewItem.Icon>
-                </NavigationViewItem>
-                <NavigationViewItem x:Uid="NavigationSensors" Tag="Sensors">
-                    <NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE9D9;" />
-                    </NavigationViewItem.Icon>
-                </NavigationViewItem>
-                <NavigationViewItem x:Uid="NavigationCustomMenu" Tag="CustomMenu">
-                    <NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xEDE3;" />
-                    </NavigationViewItem.Icon>
-                </NavigationViewItem>
-                <NavigationViewItem x:Uid="NavigationProgramming" Tag="Programming">
-                    <NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE943;" />
-                    </NavigationViewItem.Icon>
-                </NavigationViewItem>
-            </NavigationView.MenuItems>
+            <NavigationView.MenuItemTemplate>
+                <DataTemplate x:DataType="vm:PageViewModel">
+                    <NavigationViewItem Content="{Binding DisplayName}" Tag="{Binding}">
+                        <NavigationViewItem.Icon>
+                            <FontIcon Glyph="{Binding Icon}" />
+                        </NavigationViewItem.Icon>
+                    </NavigationViewItem>
+                </DataTemplate>
+            </NavigationView.MenuItemTemplate>
 
             <Grid Padding="{StaticResource NavigationContentPadding}">
                 <Grid.RowDefinitions>
@@ -145,11 +130,11 @@
                         <ColumnDefinition Width="*" />
                         <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
-                    <FontIcon Glyph="{Binding Icon}" Margin="6,4,6,0" />
+                    <FontIcon Glyph="{Binding CurrentPage.Icon}" Margin="6,4,6,0" />
                     <TextBlock
                         Grid.Column="1"
                         Margin="6,0,6,0"
-                        Text="{Binding Title}"
+                        Text="{Binding CurrentPage.DisplayName}"
                         Style="{StaticResource TitleTextBlockStyle}"
                         TextTrimming="CharacterEllipsis"
                         TextWrapping="NoWrap" />
@@ -183,7 +168,12 @@
                     VerticalScrollMode="Auto">
                     <Frame
                         x:Name="ContentFrame"
-                        Padding="{StaticResource NavigationContentScrollViewerPadding}" />
+                        IsNavigationStackEnabled="False"
+                        Padding="{StaticResource NavigationContentScrollViewerPadding}">
+                        <Frame.ContentTransitions>
+                            <NavigationThemeTransition />
+                        </Frame.ContentTransitions>
+                    </Frame>
                 </ScrollViewer>
             </Grid>
         </NavigationView>