Added user experience to group samples

Author: jamesmcroft

.editorconfig

@@ -1,7 +1,6 @@
 namespace MADE.Samples
 {
     using System;
-    using System.Threading.Tasks;
     using CommunityToolkit.Mvvm.DependencyInjection;
     using CommunityToolkit.Mvvm.Messaging;
     using MADE.Diagnostics;
@@ -43,14 +42,9 @@ public static IServiceProvider Services
         }
 
 
-        protected override async void OnLaunched(LaunchActivatedEventArgs e)
+        protected override void OnLaunched(LaunchActivatedEventArgs e)
         {
-            await this.ActivateAsync(e.PrelaunchActivated);
-        }
-
-        protected override async void OnActivated(IActivatedEventArgs args)
-        {
-            await this.ActivateAsync(false);
+            this.Activate(e.PrelaunchActivated);
         }
 
         private static IServiceProvider ConfigureServices(Frame rootFrame)
@@ -72,7 +66,7 @@ private static void OnNavigationFailed(object sender, NavigationFailedEventArgs
             throw new InvalidOperationException($"Failed to load page {e.SourcePageType.FullName}.");
         }
 
-        private async Task ActivateAsync(bool isPrelaunch)
+        private void Activate(bool isPrelaunch)
         {
 #if NET5_0 && WINDOWS
 			var window = new Window();
@@ -91,12 +85,11 @@ private async Task ActivateAsync(bool isPrelaunch)
                 this.serviceProvider = ConfigureServices(rootFrame);
 
                 IAppDiagnostics diagnostics = this.serviceProvider.GetService<IAppDiagnostics>();
-                if (diagnostics != null)
-                {
-                    await diagnostics.StartRecordingDiagnosticsAsync();
-                }
+                diagnostics?.StartRecordingDiagnosticsAsync();
             }
 
+            Console.WriteLine($"Launching. IsPreLaunch: {isPrelaunch}. Content: {rootFrame.Content}");
+
             if (!isPrelaunch)
             {
                 if (rootFrame.Content is null)

assets/SampleIcons.afdesign

@@ -3,16 +3,70 @@
     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:data="using:MADE.Samples.Features.Samples.Data"
     xmlns:extensions="using:MADE.UI.Extensions"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:pages="using:MADE.UI.Views.Navigation.Pages"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     mc:Ignorable="d">
 
+    <pages:MvvmPage.Resources>
+        <ResourceDictionary>
+            <CollectionViewSource
+                x:Key="SamplesSource"
+                IsSourceGrouped="True"
+                ItemsPath="Samples"
+                Source="{x:Bind ViewModel.Samples}" />
+        </ResourceDictionary>
+    </pages:MvvmPage.Resources>
+
     <Grid Padding="12">
         <GridView
             extensions:ListViewBaseExtensions.ItemClickCommand="{x:Bind ViewModel.NavigateToSampleCommand}"
             IsItemClickEnabled="true"
-            ItemsSource="{x:Bind ViewModel.Samples}" />
+            ItemsSource="{Binding Source={StaticResource SamplesSource}}"
+            SelectionMode="None">
+            <GridView.GroupStyle>
+                <GroupStyle HidesIfEmpty="True">
+                    <GroupStyle.HeaderTemplate>
+                        <DataTemplate>
+                            <TextBlock Text="{Binding Name}" />
+                        </DataTemplate>
+                    </GroupStyle.HeaderTemplate>
+                </GroupStyle>
+            </GridView.GroupStyle>
+            <GridView.ItemTemplate>
+                <DataTemplate x:DataType="data:Sample">
+                    <StackPanel Padding="12" Background="Transparent">
+                        <Grid Height="160">
+                            <Border>
+                                <Image Source="{Binding IconPath}" />
+                            </Border>
+                        </Grid>
+
+                        <Grid Margin="0,12,0,0">
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+
+                            <TextBlock
+                                VerticalAlignment="Center"
+                                Style="{StaticResource BodyTextBlockStyle}"
+                                Text="{Binding Name}"
+                                TextTrimming="CharacterEllipsis" />
+
+                            <TextBlock
+                                Grid.Row="1"
+                                VerticalAlignment="Center"
+                                MaxLines="2"
+                                Style="{StaticResource CaptionTextBlockStyle}"
+                                Text="{Binding Description}"
+                                TextTrimming="CharacterEllipsis" />
+                        </Grid>
+                    </StackPanel>
+                </DataTemplate>
+            </GridView.ItemTemplate>
+        </GridView>
     </Grid>
 </pages:MvvmPage>

samples/MADE.Samples/MADE.Samples.Shared/App.xaml.cs

@@ -5,9 +5,9 @@ namespace MADE.Samples.Features.Home.ViewModels
     using CommunityToolkit.Mvvm.Input;
     using CommunityToolkit.Mvvm.Messaging;
     using MADE.Samples.Features.Samples.Data;
+    using MADE.Samples.Features.Samples.Pages;
     using MADE.UI.Views.Navigation;
     using MADE.UI.Views.Navigation.ViewModels;
-    using MADE.Samples.Features.Samples.Pages;
 
     public class MainPageViewModel : PageViewModel
     {
@@ -18,13 +18,19 @@ public MainPageViewModel(INavigationService navigationService, IMessenger messen
 
         public ICommand NavigateToSampleCommand => new RelayCommand<Sample>(this.NavigateToSample);
 
-        public ICollection<Sample> Samples { get; } = new List<Sample>
+        public ICollection<SampleGroup> Samples { get; } = new List<SampleGroup>
         {
-            new Sample
+            new SampleGroup
             {
-                Name = "FileInput",
-                Category = "Controls",
-                Page = typeof(FilePickerPage)
+                Name = "Controls",
+                Samples = new List<Sample>
+                {
+                    new Sample(
+                        "FilePicker",
+                        typeof(FilePickerPage),
+                        string.Empty,
+                        "/Features/Samples/Assets/FilePicker.png")
+                }
             }
         };
 

samples/MADE.Samples/MADE.Samples.Shared/Features/Home/Pages/MainPage.xaml

@@ -4,12 +4,22 @@ namespace MADE.Samples.Features.Samples.Data
 
     public class Sample
     {
+        public Sample()
+        {
+        }
+
+        public Sample(string name, Type page, string description, string iconPath)
+        {
+            this.Name = name;
+            this.Page = page;
+            this.Description = description;
+            this.IconPath = iconPath;
+        }
+
         public string Name { get; set; }
 
         public string Description { get; set; }
 
-        public string Category { get; set; }
-
         public string IconPath { get; set; }
 
         public Type Page { get; set; }

samples/MADE.Samples/MADE.Samples.Shared/Features/Home/ViewModels/MainPageViewModel.cs

@@ -0,0 +1,11 @@
+namespace MADE.Samples.Features.Samples.Data
+{
+    using System.Collections.Generic;
+
+    public class SampleGroup
+    {
+        public string Name { get; set; }
+
+        public IEnumerable<Sample> Samples { get; set; }
+    }
+}

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Assets/FilePicker.png

@@ -6,6 +6,7 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:pages="using:MADE.UI.Views.Navigation.Pages"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
     mc:Ignorable="d">
 
@@ -15,17 +16,17 @@
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <CommandBar>
-            <CommandBar.Content>
+        <win:CommandBar>
+            <win:CommandBar.Content>
                 <Button
                     x:Name="BackButton"
                     VerticalAlignment="Top"
                     Command="{x:Bind ViewModel.GoBackCommand}"
                     IsEnabled="{x:Bind Frame.CanGoBack, Mode=OneWay}"
                     Style="{StaticResource NavigationBackButtonNormalStyle}"
                     ToolTipService.ToolTip="Back" />
-            </CommandBar.Content>
-        </CommandBar>
+            </win:CommandBar.Content>
+        </win:CommandBar>
 
         <Grid Grid.Row="1" Padding="12">
             <Grid.RowDefinitions>
@@ -51,6 +52,7 @@
                         x:Name="FilePickerControl"
                         Margin="0,12,0,0"
                         AppendFiles="True"
+                        FileTypes="{x:Bind ViewModel.FilePickerTypes}"
                         Files="{x:Bind ViewModel.FilePickerFiles}"
                         Header="FilePicker with multiple item selection"
                         SelectionMode="Multiple" />

samples/MADE.Samples/MADE.Samples.Shared/Features/Samples/Data/Sample.cs

@@ -1,5 +1,6 @@
 namespace MADE.Samples.Features.Samples.ViewModels
 {
+    using System.Collections.Generic;
     using System.Collections.ObjectModel;
     using CommunityToolkit.Mvvm.Messaging;
     using MADE.UI.Controls;
@@ -15,5 +16,7 @@ public FilePickerPageViewModel(INavigationService navigationService, IMessenger
 
         public ObservableCollection<FilePickerItem> FilePickerFiles { get; } =
             new ObservableCollection<FilePickerItem>();
+
+        public ICollection<string> FilePickerTypes => new List<string> { ".jpg" };
     }
 }