Merge pull request #864 from unoplatform/dev/xygu/20221018/nav-view

unoplatform · Oct 20, 2022 · f1f0b06 · f1f0b06
2 parents e6b9e51 + 7f623de
commit f1f0b06
Show file tree

Hide file tree

Showing 18 changed files with 2,450 additions and 2,110 deletions.
diff --git a/src/library/Uno.Material/MaterialResourcesV2.cs b/src/library/Uno.Material/MaterialResourcesV2.cs
@@ -107,9 +107,8 @@ private Style GetStyle(string key)
 			Add("MaterialListViewItemStyle", isImplicit: true);
 			Add("MaterialListViewStyle", isImplicit: true);
 			Add("MaterialMenuFlyoutPresenterStyle", isImplicit: true);
-			Add("MaterialNavigationViewItemStyle", isImplicit: true);
-			Add("MaterialPaddedNavigationViewStyle");
 			Add("MaterialNavigationViewStyle", isImplicit: true);
+			Add("MaterialNavigationViewItemStyle", isImplicit: true);
 			Add("MaterialOutlinedButtonStyle");
 			Add("MaterialOutlinedPasswordBoxStyle");
 			Add("MaterialOutlinedTextBoxStyle");

diff --git a/src/library/Uno.Material/Styles/Controls/v2/NavigationView.xaml b/src/library/Uno.Material/Styles/Controls/v2/NavigationView.xaml
diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml
@@ -33,7 +33,6 @@
 				<ResourceDictionary Source="ms-appx:///Styles/ToggleButton.xaml" />
 				<ResourceDictionary Source="ms-appx:///Styles/XamlDisplay.xaml" />
 				<ResourceDictionary Source="ms-appx:///Styles/SamplePageLayout.xaml" />
-				<ResourceDictionary Source="ms-appx:///Styles/NavigationView.xaml" />
 				<ResourceDictionary Source="ms-appx:///Styles/TextBlock.xaml" />
 				<ResourceDictionary Source="ms-appx:///Styles/OverviewSampleView.xaml" />
 				<ResourceDictionary>

diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml.Navigation.cs b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml.Navigation.cs
@@ -23,6 +23,7 @@
 using Windows.UI.Xaml.Controls.Primitives;
 using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Markup;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
 using MUXC = Microsoft.UI.Xaml.Controls;
@@ -77,7 +78,6 @@ private void ShellNavigateTo(Sample sample, bool trySynchronizeCurrentItem)
 			}
 		}
 
-
 		private Shell BuildShell()
 		{
 			_shell = new Shell();
@@ -121,51 +121,70 @@ private void AddNavigationItems(MUXC.NavigationView nv)
 				.ThenBy(x => x.Title)
 				.GroupBy(x => x.Category);
 
+			/* the menu items are grouped by their [SamplePage].Category, some items can be "ungrouped" (category=None):
+			 *	- {any item where category=none}...
+			 *	- Category xyz
+			 *		- {any item with category=xyz}... */
+
 			foreach (var category in categories.OrderBy(x => x.Key))
 			{
-				var tier = 1;
-
+				// create parent menu item for this category
 				var parentItem = default(MUXC.NavigationViewItem);
 				if (category.Key != SampleCategory.None)
 				{
 					parentItem = new MUXC.NavigationViewItem
 					{
 						Content = category.Key.GetDescription() ?? category.Key.ToString(),
+						Icon = CreateIconElement(GetCategoryIconSource()),
 						SelectsOnInvoked = false,
-						Style = (Style)Resources[$"T{tier++}NavigationViewItemStyle"]
-					}.Apply(NavViewItemVisualStateFix);
+					};
 					AutomationProperties.SetAutomationId(parentItem, "Section_" + parentItem.Content);
 
 					nv.MenuItems.Add(parentItem);
+
+					object GetCategoryIconSource()
+					{
+						switch (category.Key)
+						{
+							case SampleCategory.Styles: return Icons.Styles.CategoryHeader;
+							case SampleCategory.Controls: return Icons.Controls.CategoryHeader;
+							case SampleCategory.Helpers: return Icons.Helpers.CategoryHeader;
+
+							default: return Symbol.Placeholder;
+						}
+					}
 				}
 
+				// add items to the parent menu item or directly to the nav-view
 				foreach (var sample in category)
 				{
 					var item = new MUXC.NavigationViewItem
 					{
 						Content = sample.Title,
+						Icon = CreateIconElement(sample.IconSource),
 						DataContext = sample,
-						Style = (Style)Resources[$"T{tier}NavigationViewItemStyle"]
-					}.Apply(NavViewItemVisualStateFix);
+					};
 					AutomationProperties.SetAutomationId(item, "Section_" + item.Content);
 
 					(parentItem?.MenuItems ?? nv.MenuItems).Add(item);
 				}
 			}
 
-			void NavViewItemVisualStateFix(MUXC.NavigationViewItem nvi)
+			IconElement CreateIconElement(object source)
 			{
-				// 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) =>
+				if (source is string path)
 				{
-					if (!nvi.IsSelected)
+					return new PathIcon()
 					{
-						// depending on the DisplayMode, a NVIP may or may not be used.
-						var nvip = VisualTreeHelperEx.GetFirstDescendant<MUXCP.NavigationViewItemPresenter>(nvi, 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 SymbolIcon(Symbol.Placeholder);
 			}
 		}
 	}

diff --git a/....Samples/Uno.Themes.Samples.Shared/Content/Extensions/ControlExtensionsSamplePage.xaml.cs b/....Samples/Uno.Themes.Samples.Shared/Content/Extensions/ControlExtensionsSamplePage.xaml.cs
@@ -16,7 +16,7 @@
 
 namespace Uno.Themes.Samples.Shared.Content.Extensions
 {
-	[SamplePage(SampleCategory.Helpers, "ControlExtensions")]
+	[SamplePage(SampleCategory.Helpers, "ControlExtensions", IconPath = Icons.Helpers.ControlExtensions)]
 	public sealed partial class ControlExtensionsSamplePage : Page
 	{
 		public ControlExtensionsSamplePage()

diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/OverviewPage.xaml.cs b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/OverviewPage.xaml.cs
@@ -18,7 +18,7 @@
 
 namespace Uno.Themes.Samples.Content
 {
-	[SamplePage(SampleCategory.None, "Overview")]
+	[SamplePage(SampleCategory.None, "Overview", IconPath = Icons.Overview)]
 	public sealed partial class OverviewPage : Page
     {
         public OverviewPage()

diff --git a/...ples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Styles/ColorsSamplePage.xaml.cs b/...ples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Styles/ColorsSamplePage.xaml.cs
@@ -19,7 +19,7 @@
 
 namespace Uno.Themes.Samples.Content.Styles
 {
-	[SamplePage(SampleCategory.Styles, "Colors")]
+	[SamplePage(SampleCategory.Styles, "Colors", IconPath = Icons.Styles.Colors)]
 	public sealed partial class ColorsSamplePage : Page
 	{
 		public ColorsSamplePage()

diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Controls/SamplePageLayout.cs b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Controls/SamplePageLayout.cs
@@ -181,7 +181,7 @@ private double GetRelativeOffset()
 		{
 #if NETFX_CORE
 			// On UWP we can count on finding a ScrollContentPresenter. 
-			var scp = VisualTreeHelperEx.GetFirstDescendant<ScrollContentPresenter>(_scrollViewer);
+			var scp = VisualTreeHelperEx.FindFirstDescendant<ScrollContentPresenter>(_scrollViewer);
 			var content = scp?.Content as FrameworkElement;
 			var transform = _scrollingTabs.TransformToVisual(content);
 			return transform.TransformPoint(new Point(0, 0)).Y - _scrollViewer.VerticalOffset;
@@ -207,7 +207,7 @@ public T GetSampleChild<T>(Design mode, string name)
 		{
 			var presenter = (ContentPresenter)GetTemplateChild($"{mode}ContentPresenter");
 
-			return VisualTreeHelperEx.GetFirstDescendant<T>(presenter, x => x.Name == name);
+			return VisualTreeHelperEx.FindFirstDescendant<T>(presenter, x => x.Name == name);
 		}
 
 		private class LayoutModeMapping

diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Entities/Icons.cs b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Entities/Icons.cs
@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Windows.UI.Xaml.Controls;
+
+namespace Uno.Themes.Samples.Entities
+{
+	public static class Icons
+	{
+		// sourced from: https://materialdesignicons.com/
+
+		public const string Overview = /* format-list-bulleted-type */ "M5,9.5L7.5,14H2.5L5,9.5M3,4H7V8H3V4M5,20A2,2 0 0,0 7,18A2,2 0 0,0 5,16A2,2 0 0,0 3,18A2,2 0 0,0 5,20M9,5V7H21V5H9M9,19H21V17H9V19M9,13H21V11H9V13Z";
+
+		public static class Styles
+		{
+			public const string CategoryHeader = /* palette-swatch-outline */ "M2.5 19.6L3.8 20.2V11.2L1.4 17C1 18.1 1.5 19.2 2.5 19.6M15.2 4.8L20.2 16.8L12.9 19.8L7.9 7.9V7.8L15.2 4.8M15.3 2.8C15 2.8 14.8 2.8 14.5 2.9L7.1 6C6.4 6.3 5.9 7 5.9 7.8C5.9 8 5.9 8.3 6 8.6L11 20.5C11.3 21.3 12 21.7 12.8 21.7C13.1 21.7 13.3 21.7 13.6 21.6L21 18.5C22 18.1 22.5 16.9 22.1 15.9L17.1 4C16.8 3.2 16 2.8 15.3 2.8M10.5 9.9C9.9 9.9 9.5 9.5 9.5 8.9S9.9 7.9 10.5 7.9C11.1 7.9 11.5 8.4 11.5 8.9S11.1 9.9 10.5 9.9M5.9 19.8C5.9 20.9 6.8 21.8 7.9 21.8H9.3L5.9 13.5V19.8Z";
+			public const string Colors = /* palette-outline */ "M12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2C17.5,2 22,6 22,11A6,6 0 0,1 16,17H14.2C13.9,17 13.7,17.2 13.7,17.5C13.7,17.6 13.8,17.7 13.8,17.8C14.2,18.3 14.4,18.9 14.4,19.5C14.5,20.9 13.4,22 12,22M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C12.3,20 12.5,19.8 12.5,19.5C12.5,19.3 12.4,19.2 12.4,19.1C12,18.6 11.8,18.1 11.8,17.5C11.8,16.1 12.9,15 14.3,15H16A4,4 0 0,0 20,11C20,7.1 16.4,4 12,4M6.5,10C7.3,10 8,10.7 8,11.5C8,12.3 7.3,13 6.5,13C5.7,13 5,12.3 5,11.5C5,10.7 5.7,10 6.5,10M9.5,6C10.3,6 11,6.7 11,7.5C11,8.3 10.3,9 9.5,9C8.7,9 8,8.3 8,7.5C8,6.7 8.7,6 9.5,6M14.5,6C15.3,6 16,6.7 16,7.5C16,8.3 15.3,9 14.5,9C13.7,9 13,8.3 13,7.5C13,6.7 13.7,6 14.5,6M17.5,10C18.3,10 19,10.7 19,11.5C19,12.3 18.3,13 17.5,13C16.7,13 16,12.3 16,11.5C16,10.7 16.7,10 17.5,10Z";
+		}
+
+		public static class Controls
+		{
+			public const string CategoryHeader = /* rhombus-split */ "M12 2C11.5 2 11 2.19 10.59 2.59L7.29 5.88L12 10.58L16.71 5.88L13.41 2.59C13 2.19 12.5 2 12 2M5.88 7.29L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L5.88 16.71L10.58 12L5.88 7.29M18.12 7.29L13.42 12L18.12 16.71L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L18.12 7.29M12 13.42L7.29 18.12L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L16.71 18.12L12 13.42Z";
+			public const Symbol Control = Symbol.Placeholder;
+		}
+
+		public static class Helpers
+		{
+			public const string CategoryHeader = /* toolbox-outline */ "M20 8H17V6C17 4.9 16.1 4 15 4H9C7.9 4 7 4.9 7 6V8H4C2.9 8 2 8.9 2 10V20H22V10C22 8.9 21.1 8 20 8M9 6H15V8H9V6M20 18H4V15H6V16H8V15H16V16H18V15H20V18M18 13V12H16V13H8V12H6V13H4V10H20V13H18Z";
+			public const string ControlExtensions = /* wrench-cog-outline */ "M9 1.09V6H7V1.09C4.16 1.57 2 4.03 2 7C2 9.22 3.21 11.15 5 12.19V21C5 21.55 5.45 22 6 22H10C10.55 22 11 21.55 11 21V12.19C12.79 11.15 14 9.22 14 7C14 4.03 11.84 1.57 9 1.09M10 10.46L9 11.04V20H7V11.04L6 10.46C4.77 9.74 4 8.42 4 7C4 6 4.37 5.06 5 4.35V8H11V4.35C11.63 5.06 12 6 12 7C12 8.42 11.23 9.74 10 10.46M20.94 17.94C20.96 17.79 20.97 17.65 20.97 17.5S20.96 17.2 20.94 17.05L21.91 16.32C22 16.25 22.03 16.13 21.97 16.03L21.05 14.47C21 14.37 20.87 14.33 20.76 14.37L19.61 14.82C19.37 14.65 19.12 14.5 18.83 14.38L18.66 13.19C18.64 13.08 18.54 13 18.43 13H16.58C16.46 13 16.36 13.08 16.34 13.19L16.17 14.38C15.88 14.5 15.63 14.65 15.39 14.82L14.24 14.37C14.14 14.33 14 14.37 13.96 14.47L13.03 16.03C12.97 16.13 13 16.25 13.09 16.32L14.06 17.05C14.05 17.2 14.03 17.35 14.03 17.5S14.05 17.79 14.06 17.94L13.09 18.68C13 18.75 12.97 18.87 13.03 18.97L13.96 20.53C14 20.63 14.14 20.66 14.24 20.63L15.39 20.17C15.63 20.35 15.88 20.5 16.17 20.62L16.34 21.81C16.36 21.92 16.46 22 16.58 22H18.43C18.54 22 18.64 21.92 18.66 21.81L18.83 20.62C19.12 20.5 19.37 20.35 19.61 20.17L20.76 20.63C20.87 20.66 21 20.63 21.05 20.53L21.97 18.97C22.03 18.87 22 18.75 21.91 18.68L20.94 17.94M17.5 19C16.67 19 16 18.33 16 17.5S16.67 16 17.5 16 19 16.67 19 17.5 18.33 19 17.5 19Z";
+		}
+	}
+}
diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Entities/Sample.cs b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Entities/Sample.cs
@@ -3,6 +3,7 @@
 using System.Text;
 using Uno.Extensions;
 using Uno.Logging;
+using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Data;
 
 namespace Uno.Themes.Samples.Entities
@@ -13,6 +14,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;
@@ -38,7 +40,9 @@ private object CreateData(Type dataType)
 			}
 		}
 
-		public SampleCategory Category { get; set; }
+		public SampleCategory Category { get; }
+
+		public object IconSource { get; }
 
 		public string Title { get; }
 

diff --git a/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Entities/SamplePageAttribute.cs b/src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Entities/SamplePageAttribute.cs
@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Text;
+using Windows.UI.Xaml.Controls;
 
 namespace Uno.Themes.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; }