fix(sample): broken uwp nav-view

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.Navigation.cs

@@ -15,11 +15,15 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Automation;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Markup;
+using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Navigation;
 #else
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Automation;
 using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;
+using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
 #endif
 
@@ -161,8 +165,9 @@ private void AddNavigationItems(MUXC.NavigationView nv)
 					parentItem = new MUXC.NavigationViewItem
 					{
 						Content = category.Key.GetDescription() ?? category.Key.ToString(),
+						Icon = CreateIconElement(GetCategoryIconSource(category.Key)),
 						SelectsOnInvoked = false,
-					}.Apply(NavViewItemVisualStateFix);
+					};
 					AutomationProperties.SetAutomationId(parentItem, "Section_" + parentItem.Content);
 
 					nv.MenuItems.Add(parentItem);
@@ -173,27 +178,57 @@ private void AddNavigationItems(MUXC.NavigationView nv)
 					var item = new MUXC.NavigationViewItem
 					{
 						Content = sample.Title,
+						Icon = CreateIconElement(sample.IconSource ?? GetCategoryItemIconSource(category.Key)),
 						DataContext = sample,
-					}.Apply(NavViewItemVisualStateFix);
+					};
 					AutomationProperties.SetAutomationId(item, "Section_" + item.Content);
 
 					(parentItem?.MenuItems ?? nv.MenuItems).Add(item);
 				}
 			}
 
-			void NavViewItemVisualStateFix(MUXC.NavigationViewItem nvi)
+			object GetCategoryIconSource(SampleCategory category)
 			{
-				// gallery#107: on uwp and uno, deselecting a NVI by selecting another NVI will leave the former in the "Selected" state
-				// to workaround this, we force reset the visual state when IsSelected becomes false
-				nvi.RegisterPropertyChangedCallback(MUXC.NavigationViewItemBase.IsSelectedProperty, (s, e) =>
+				switch (category)
 				{
-					if (!nvi.IsSelected)
+					case SampleCategory.Behaviors: return Icons.Behaviors.CategoryHeader;
+					case SampleCategory.Controls: return Icons.Controls.CategoryHeader;
+					case SampleCategory.Helpers: return Icons.Helpers.CategoryHeader;
+					case SampleCategory.Tests: return Icons.Tests.CategoryHeader;
+
+					default: return Icons.Controls.CategoryHeader;
+				}
+			}
+			object GetCategoryItemIconSource(SampleCategory category)
+			{
+				switch (category)
+				{
+					case SampleCategory.Behaviors: return Icons.Behaviors.Behavior;
+					case SampleCategory.Controls: return Icons.Controls.Control;
+					case SampleCategory.Tests: return Icons.Tests.Test;
+
+					case SampleCategory.Helpers: 
+					default: return Icons.Placeholder;
+				}
+			}
+			IconElement CreateIconElement(object source)
+			{
+				if (source is string path)
+				{
+					return new PathIcon()
 					{
-						// depending on the DisplayMode, a NVIP may or may not be used.
-						var nvip = nvi.GetFirstDescendant<MUXCP.NavigationViewItemPresenter>(x => x.Name == "NavigationViewItemPresenter");
-						VisualStateManager.GoToState((Control)nvip ?? nvi, "Normal", true);
-					}
-				});
+						Data = (Geometry)XamlBindingHelper.ConvertValue(typeof(Geometry), path)
+					};
+				}
+				if (source is Symbol symbol && symbol != default)
+				{
+					return new SymbolIcon(symbol);
+				}
+
+				return new PathIcon()
+				{
+					Data = (Geometry)XamlBindingHelper.ConvertValue(typeof(Geometry), Icons.Placeholder)
+				};
 			}
 		}
 

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/TabBarBehaviorSamplePage.xaml.cs

@@ -37,7 +37,6 @@ public sealed partial class TabBarBehaviorSamplePage : Page
 	{
 		public TabBarBehaviorSamplePage()
 		{
-
 			this.InitializeComponent();
 		}
 	}

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Helpers/BindingExtensionsSamplePage.xaml.cs

@@ -31,7 +31,7 @@
 
 namespace Uno.Toolkit.Samples.Content.Helpers
 {
-	[SamplePage(SampleCategory.Helpers, "Binding Extensions", SourceSdk.Uno, DataType = typeof(BindingExtensionsVM))]
+	[SamplePage(SampleCategory.Helpers, "Binding Extensions", SourceSdk.Uno, DataType = typeof(BindingExtensionsVM), IconPath = Icons.Helpers.MarkupExtension)]
 	public sealed partial class BindingExtensionsSamplePage : Page
 	{
 		public BindingExtensionsSamplePage()

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Helpers/ResponsiveExtensionsSamplePage.xaml.cs

@@ -8,7 +8,7 @@
 
 namespace Uno.Toolkit.Samples.Content.Helpers;
 
-[SamplePage(SampleCategory.Helpers, "Responsive Extensions", SourceSdk.UnoToolkit)]
+[SamplePage(SampleCategory.Helpers, "Responsive Extensions", SourceSdk.UnoToolkit, IconPath = Icons.Helpers.MarkupExtension)]
 public sealed partial class ResponsiveExtensionsSamplePage : Page
 {
 	public ResponsiveExtensionsSamplePage()

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/RuntimeTestRunner.xaml.cs

@@ -8,7 +8,7 @@
 
 namespace Uno.Toolkit.Samples.Content
 {
-	[SamplePage(SampleCategory.None, "RuntimeTest Runner", SourceSdk.UnoToolkit)]
+	[SamplePage(SampleCategory.None, "RuntimeTest Runner", SourceSdk.UnoToolkit, IconPath = Icons.Tests.RuntimeTest)]
 	public sealed partial class RuntimeTestRunner : Page
 	{
 		public RuntimeTestRunner()

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Entities/Icons.cs

@@ -0,0 +1,45 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Microsoft.UI.Xaml.Shapes;
+
+namespace Uno.Toolkit.Samples.Entities;
+
+public static class Icons
+{
+	// sourced from: https://materialdesignicons.com/
+	// note: some of the path data needs to be zeroed, else they could be off-centered
+
+	public static class Controls
+	{
+		public const string CategoryHeader = /* rhombus-split */ "M10 0C9.5 0 9 .19 8.59.59L5.29 3.88 10 8.58 14.71 3.88 11.41.59C11 .19 10.5 0 10 0M3.88 5.29.59 8.59C-.2 9.37-.2 10.63.59 11.41L3.88 14.71 8.58 10 3.88 5.29M16.12 5.29 11.42 10 16.12 14.71 19.41 11.41C20.2 10.63 20.2 9.37 19.41 8.59L16.12 5.29M10 11.42 5.29 16.12 8.59 19.41C9.37 20.2 10.63 20.2 11.41 19.41L14.71 16.12 10 11.42Z";
+
+		public const string Control = Placeholder;
+	}
+
+	public static class Behaviors
+	{
+		public const string CategoryHeader = /* code-block-tags */ "M5.59 3.41L7 4.82L3.82 8L7 11.18L5.59 12.6L1 8L5.59 3.41M11.41 3.41L16 8L11.41 12.6L10 11.18L13.18 8L10 4.82L11.41 3.41M22 6V18C22 19.11 21.11 20 20 20H4C2.9 20 2 19.11 2 18V14H4V18H20V6H17.03V4H20C21.11 4 22 4.89 22 6Z";
+
+		public const string Behavior = /* code-tags */ "M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z";
+	}
+
+	public static class Helpers
+	{
+		public const string CategoryHeader = /* toolbox-outline */ "M18 4H15V2C15 .9 14.1 0 13 0H7C5.9 0 5 .9 5 2V4H2C.9 4 0 4.9 0 6V16H20V6C20 4.9 19.1 4 18 4M7 2H13V4H7V2M18 14H2V11H4V12H6V11H14V12H16V11H18V14M16 9V8H14V9H6V8H4V9H2V6H18V9H16Z";
+
+		public const string MarkupExtension = /* code-json */ "M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z";
+	}
+
+	public static class Tests
+	{
+		public const string RuntimeTest = /* flask-outline */ "M5,19A1,1 0 0,0 6,20H18A1,1 0 0,0 19,19C19,18.79 18.93,18.59 18.82,18.43L13,8.35V4H11V8.35L5.18,18.43C5.07,18.59 5,18.79 5,19M6,22A3,3 0 0,1 3,19C3,18.4 3.18,17.84 3.5,17.37L9,7.81V6A1,1 0 0,1 8,5V4A2,2 0 0,1 10,2H14A2,2 0 0,1 16,4V5A1,1 0 0,1 15,6V7.81L20.5,17.37C20.82,17.84 21,18.4 21,19A3,3 0 0,1 18,22H6M13,16L14.34,14.66L16.27,18H7.73L10.39,13.39L13,16M12.5,12A0.5,0.5 0 0,1 13,12.5A0.5,0.5 0 0,1 12.5,13A0.5,0.5 0 0,1 12,12.5A0.5,0.5 0 0,1 12.5,12Z";
+
+		public const string CategoryHeader = /* beaker-check */ "M17.75 21.16L15 18.16L16.16 17L17.75 18.59L21.34 15L22.5 16.41L17.75 21.16M3 3H21V5C19.9 5 19 5.9 19 7V12C15.69 12 13 14.69 13 18C13 19.09 13.29 20.12 13.8 21H7C5.9 21 5 20.1 5 19V7C5 5.9 4.1 5 3 5V3M7 9V10H10V9H7M7 11V12H10V11H7M10 16V15H7V16H10M12 14V13H7V14H12M12 8V7H7V8H12Z";
+
+		public const string Test = /* beaker */ "M3,3V5A2,2 0 0,1 5,7V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V7A2,2 0 0,1 21,5V3H3M7,9H10V10H7V9M7,11H10V12H7V11M10,16H7V15H10V16M12,14H7V13H12V14M12,8H7V7H12V8Z";
+	}
+
+	// note: Windows.UI.Xaml.Controls.Symbol.Placeholder looks out of place (brush too thin) compared to the ones above, hence why we aren't using it.
+	public const string Placeholder = /* alert-rhombus-outline (modified: hollowed) */ "M10 0C9.5 0 9 .19 8.59.59L.59 8.59C-.2 9.37-.2 10.63.59 11.41L8.59 19.41C9.37 20.2 10.63 20.2 11.41 19.41L19.41 11.41C20.2 10.63 20.2 9.37 19.41 8.59L11.41.59C11 .19 10.5 0 10 0M10 2 18 10 10 18 2 10Z";
+}

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Entities/Sample.cs

@@ -18,6 +18,7 @@ public class Sample
 		public Sample(SamplePageAttribute attribute, Type viewType)
 		{
 			Category = attribute.Category;
+			IconSource = attribute.IconSymbol == default ? (object)attribute.IconPath : (object)attribute.IconSymbol;
 			Title = attribute.Title;
 			Description = attribute.Description;
 			DocumentationLink = attribute.DocumentationLink;
@@ -45,6 +46,8 @@ private object CreateData(Type dataType)
 
 		public SampleCategory Category { get; set; }
 
+		public object IconSource { get; }
+
 		public string Title { get; }
 
 		public string Description { get; }

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Entities/SamplePageAttribute.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Text;
+using Microsoft.UI.Xaml.Controls;
 
 namespace Uno.Toolkit.Samples.Entities
 {
@@ -19,6 +20,14 @@ public SamplePageAttribute(SampleCategory category, string title, SourceSdk sour
 		/// </summary>
 		public SampleCategory Category { get; }
 
+		/// <remarks>
+		/// Symbol will take precedence over Path if specified.
+		/// Attribute property can only be primitive value, nullable not included. So 'default' is used in lieu.
+		/// </remarks>
+		public Symbol IconSymbol { get; set; } = default;
+
+		public string IconPath { get; set; }
+
 		public string Title { get; }
 
 		public string Description { get; set; }

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Shell.xaml

@@ -17,20 +17,17 @@
 			<RowDefinition Height="*" />
 		</Grid.RowDefinitions>
 
-		<!-- We set CompactModeThresholdWidth to a very high value so that it never happens. We don't want to use the compact mode. -->
 		<muxc:NavigationView Grid.Row="1"
 							 utu:SafeArea.Insets="VisibleBounds"
 							 x:Name="NavigationViewControl"
-							 OpenPaneLength="260"
-							 IsSettingsVisible="True"
-							 IsPaneOpen="True"
-							 IsPaneVisible="True"
-							 IsPaneToggleButtonVisible="False"
-							 IsBackButtonVisible="Collapsed"
-							 SizeChanged="NavigationViewControl_SizeChanged"
-							 PaneDisplayMode="LeftMinimal"
 							 IsBackEnabled="False"
-							 IsTabStop="False">
+							 IsBackButtonVisible="Collapsed"
+							 IsPaneToggleButtonVisible="True"
+							 PaneDisplayMode="Auto"
+							 DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
+							 IsSettingsVisible="True"
+							 IsTabStop="False"
+							 Style="{StaticResource MaterialNavigationViewStyle}">
 			<muxc:NavigationView.PaneHeader>
 				<!-- Left padding for overlay toggle button -->
 				<Grid Padding="24,8,0,0">
@@ -58,14 +55,6 @@
 			   Grid.RowSpan="2"
 			   Visibility="Collapsed" />
 
-		<!-- Custom pane toggle button -->
-		<Button Grid.Row="1"
-				utu:SafeArea.Insets="Top, Left"
-				x:Name="NavViewToggleButton"
-				Click="NavViewToggleButton_Click"
-				HorizontalAlignment="Left"
-				Style="{StaticResource PaneToggleButtonStyle}" />
-
 		<local:ModalDialog x:Name="ModalDialog" />
 
 		<StackPanel x:Name="DebugPanel"

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Shell.xaml.cs

@@ -7,6 +7,7 @@
 using System.Linq;
 using System.Threading.Tasks;
 using Windows.ApplicationModel.DataTransfer;
+using Windows.Foundation;
 using Windows.UI.Core;
 using Uno.Extensions;
 using Uno.Toolkit.Samples.Content;
@@ -27,6 +28,7 @@
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Navigation;
+
 using XamlLaunchActivatedEventArgs = Microsoft.UI.Xaml.LaunchActivatedEventArgs;
 using XamlWindow = Microsoft.UI.Xaml.Window;
 #else
@@ -37,9 +39,11 @@
 using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
+
 using XamlLaunchActivatedEventArgs = Windows.ApplicationModel.Activation.LaunchActivatedEventArgs;
 using XamlWindow = Windows.UI.Xaml.Window;
 #endif
+
 using MUXC = Microsoft.UI.Xaml.Controls;
 
 
@@ -122,10 +126,6 @@ private void OnNestedSampleFrameChanged(DependencyObject sender, DependencyPrope
 		{
 			var isInsideNestedSample = NestedSampleFrame.Content != null;
 
-			NavViewToggleButton.Visibility = isInsideNestedSample
-				? Visibility.Collapsed
-				: Visibility.Visible;
-
 			// prevent empty frame from blocking the content (nav-view) behind it
 			NestedSampleFrame.Visibility = isInsideNestedSample
 				? Visibility.Visible
@@ -160,7 +160,6 @@ public bool BackNavigateFromNestedSample()
 				return false;
 			}
 
-
 			if (NestedSampleFrame.CanGoBack)
 			{
 				//Let the NavigationBar within the nested page handle the back nav logic
@@ -200,35 +199,6 @@ public void ExitNestedSample()
 			}
 		}
 
-		private void NavViewToggleButton_Click(object sender, RoutedEventArgs e)
-		{
-			if (NavigationViewControl.PaneDisplayMode == MUXC.NavigationViewPaneDisplayMode.LeftMinimal)
-			{
-				NavigationViewControl.IsPaneOpen = !NavigationViewControl.IsPaneOpen;
-			}
-			else if (NavigationViewControl.PaneDisplayMode == MUXC.NavigationViewPaneDisplayMode.Left)
-			{
-				NavigationViewControl.IsPaneVisible = !NavigationViewControl.IsPaneVisible;
-				NavigationViewControl.IsPaneOpen = NavigationViewControl.IsPaneVisible;
-			}
-		}
-
-		private void NavigationViewControl_SizeChanged(object sender, SizeChangedEventArgs e)
-		{
-			// This could be done using VisualState with Adaptive triggers, but an issue prevents this currently - https://github.com/unoplatform/uno/issues/5168
-			var desktopWidth = (double)Application.Current.Resources["DesktopAdaptiveThresholdWidth"];
-			if (e.NewSize.Width >= desktopWidth && NavigationViewControl.PaneDisplayMode != MUXC.NavigationViewPaneDisplayMode.Left)
-			{
-				NavigationViewControl.PaneDisplayMode = MUXC.NavigationViewPaneDisplayMode.Left;
-				NavigationViewControl.IsPaneOpen = true;
-			}
-			else if (e.NewSize.Width < desktopWidth && NavigationViewControl.PaneDisplayMode != MUXC.NavigationViewPaneDisplayMode.LeftMinimal)
-			{
-				NavigationViewControl.IsPaneVisible = true;
-				NavigationViewControl.PaneDisplayMode = MUXC.NavigationViewPaneDisplayMode.LeftMinimal;
-			}
-		}
-
 		private void DebugVT(object sender, RoutedEventArgs e)
 		{
 			object FindViewOfInterest()
@@ -294,12 +264,17 @@ object FindViewOfInterest()
 			//if (Debugger.IsAttached) Debugger.Break();
 		}
 
-		private async void DebugVTAsync(object sender, RoutedEventArgs e)
+		private void DebugVTAsync(object sender, RoutedEventArgs e)
 		{
-			// leave some time to perform action like: opening combo/flyout or navigation
-			await Task.Delay(5000);
+			VisualStateManager.GoToState(NavigationView, "ListSizeFull", useTransitions: false);
+		}
 
-			DebugVT(sender, e);
+		private void NavigationViewControl_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs e)
+		{
+			if (e.DisplayMode == MUXC.NavigationViewDisplayMode.Expanded)
+			{
+				NavigationViewControl.IsPaneOpen = NavigationViewControl.IsPaneVisible;
+			}
 		}
 	}
 }

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems

@@ -202,6 +202,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Converters\FromNullToValueConverter.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Converters\FromStringToValueConverter.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Converters\HexToColorConverter.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Entities\Icons.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Entities\Data\TestCollections.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Entities\Design.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Entities\Sample.cs" />