Improve Windows sample app UI

samples/CommunityToolkit.Maui.Sample/AppShell.xaml

@@ -13,20 +13,27 @@
        xmlns:essentials="clr-namespace:CommunityToolkit.Maui.Sample.Pages.Essentials"
        xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
        xmlns:sys="clr-namespace:System;assembly=netstandard"
-       Padding="4,0,0,0">
+       Padding="4,0,0,0"
+       x:Name="flyout"
+       Title="{OnPlatform WinUI='Toolkit Features', Default={x:Null}}"
+       FlyoutBackgroundColor="{OnPlatform WinUI=Transparent,
+                                          Default={AppThemeBinding Light={StaticResource White},
+                                                                   Dark={StaticResource Black}}}"
+       FlyoutBehavior="{OnPlatform WinUI=Locked, Default=Flyout}">
 
     <Shell.FlyoutHeader>
         <Label Margin="{OnPlatform Default='0,0,0,12',
                                    iOS='0',
                                    MacCatalyst='0'}"
                Padding="{OnPlatform Default='4,0',
                                     iOS='4, 100, 4, 0',
+                                    WinUI='20, 0',
                                     MacCatalyst='4, 100, 4, 0'}"
                FontSize="24"
                HorizontalTextAlignment="Start"
+               IsVisible="{OnPlatform WinUI=false, Default=true}"
                Text="Toolkit Features"
                VerticalTextAlignment="Center" />
-
     </Shell.FlyoutHeader>
 
     <FlyoutItem Title="Welcome"

samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs

@@ -140,7 +140,29 @@ public partial class AppShell : Shell
 		CreateViewModelMapping<NavigationBarPage, NavigationBarAndroidViewModel, PlatformSpecificGalleryPage, PlatformSpecificGalleryViewModel>(),
 	});
 
-	public AppShell() => InitializeComponent();
+	public AppShell()
+	{
+		InitializeComponent();
+		SetupNavigationView();
+	}
+
+	protected override void OnNavigated(ShellNavigatedEventArgs args)
+	{
+		SetupNavigationView();
+		base.OnNavigated(args);
+	}
+
+	public void SetupNavigationView()
+	{
+#if WINDOWS
+		Loaded += delegate
+		{
+			var navigationView = (Microsoft.UI.Xaml.Controls.NavigationView)flyout.Handler!.PlatformView!;
+			navigationView.IsPaneToggleButtonVisible = true;
+			navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Auto;
+		};
+#endif
+	}
 
 	public static string GetPageRoute<TViewModel>() where TViewModel : BaseViewModel
 	{

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -29,8 +29,18 @@
 using CommunityToolkit.Maui.Storage;
 using Microsoft.Extensions.Http.Resilience;
 using Microsoft.Extensions.Logging;
+using Microsoft.Maui.LifecycleEvents;
+using Microsoft.Maui.Platform;
 using Polly;
 
+
+#if WINDOWS10_0_17763_0_OR_GREATER
+using Microsoft.UI;
+using Microsoft.UI.Composition.SystemBackdrops;
+using Microsoft.UI.Windowing;
+using Microsoft.UI.Xaml.Media;
+#endif
+
 [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
 
 namespace CommunityToolkit.Maui.Sample;
@@ -64,6 +74,35 @@ public static MauiApp CreateMauiApp()
 									fonts.AddFont("Font Awesome 6 Brands-Regular-400.otf", FontFamilies.FontAwesomeBrands);
 								});
 
+
+		builder.ConfigureLifecycleEvents(events =>
+		{
+#if WINDOWS10_0_17763_0_OR_GREATER
+                events.AddWindows(wndLifeCycleBuilder =>
+                {
+                    wndLifeCycleBuilder.OnWindowCreated(window =>
+                    {
+                        window.SystemBackdrop = new MicaBackdrop { Kind = MicaKind.Base };
+
+                        var titleBar = window.GetAppWindow()!.TitleBar;
+
+                        titleBar.PreferredHeightOption = TitleBarHeightOption.Tall;
+
+                        window.ExtendsContentIntoTitleBar = false;
+
+                        IntPtr nativeWindowHandle = WinRT.Interop.WindowNative.GetWindowHandle(window);
+                        WindowId win32WindowsId = Win32Interop.GetWindowIdFromWindow(nativeWindowHandle);
+                        AppWindow winuiAppWindow = AppWindow.GetFromWindowId(win32WindowsId);
+
+                        if (winuiAppWindow.Presenter is OverlappedPresenter p)
+                        {
+                            p.SetBorderAndTitleBar(true, true);
+                        }
+                    });
+                });
+#endif
+		});
+
 		builder.Services.AddHttpClient<ByteArrayToImageSourceConverterViewModel>()
 						.AddStandardResilienceHandler(options => options.Retry = new MobileHttpRetryStrategyOptions());
 

samples/CommunityToolkit.Maui.Sample/Pages/Base/BaseGalleryPage.cs

@@ -13,10 +13,8 @@ protected BaseGalleryPage(string title, IDeviceInfo deviceInfo, TViewModel viewM
 
 		Padding = 0;
 
-		Content = new CollectionView
-		{
-			SelectionMode = SelectionMode.Single,
-		}.ItemTemplate(new GalleryDataTemplate())
+		Content = new CollectionView { SelectionMode = SelectionMode.Single }
+			.ItemTemplate(new GalleryDataTemplate(deviceInfo))
 			.Bind(ItemsView.ItemsSourceProperty,
 				static (BaseGalleryViewModel vm) => vm.Items,
 				mode: BindingMode.OneTime)
@@ -36,18 +34,17 @@ static async void HandleSelectionChanged(object? sender, SelectionChangedEventAr
 		}
 	}
 
-	sealed class GalleryDataTemplate() : DataTemplate(CreateDataTemplate)
+	sealed class GalleryDataTemplate(IDeviceInfo deviceInfo) : DataTemplate(() => CreateDataTemplate(deviceInfo))
 	{
-
 		enum Row { TopPadding, Content, BottomPadding }
 		enum Column { LeftPadding, Content, RightPadding }
 
-		static Grid CreateDataTemplate() => new()
+		static Grid CreateDataTemplate(IDeviceInfo deviceInfo) => new()
 		{
 			RowDefinitions = Rows.Define(
-				(Row.TopPadding, 12),
+				(Row.TopPadding, deviceInfo.Platform == DevicePlatform.WinUI ? 4 : 8),
 				(Row.Content, Star),
-				(Row.BottomPadding, 12)),
+				(Row.BottomPadding, deviceInfo.Platform == DevicePlatform.WinUI ? 4 : 8)),
 
 			ColumnDefinitions = Columns.Define(
 				(Column.LeftPadding, 24),

samples/CommunityToolkit.Maui.Sample/Platforms/Windows/App.xaml

@@ -4,5 +4,9 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:maui="using:Microsoft.Maui"
     xmlns:local="using:CommunityToolkit.Maui.Sample.Windows">
-
+    <maui:MauiWinUIApplication.Resources>
+        <ResourceDictionary>
+            <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
+        </ResourceDictionary>
+    </maui:MauiWinUIApplication.Resources>
 </maui:MauiWinUIApplication>

samples/CommunityToolkit.Maui.Sample/Resources/Styles/Styles.xaml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <?xaml-comp compile="true" ?>
-<ResourceDictionary 
+<ResourceDictionary
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
@@ -9,12 +9,12 @@
     <Style x:Key="PopupLayout" TargetType="Layout" ApplyToDerivedTypes="true">
         <Setter Property="Padding" Value="{OnPlatform Android=20, WinUI=20, iOS=5, MacCatalyst=5, Tizen=20}" />
     </Style>
-    
+
     <!--  Implicit styles  -->
     <Style TargetType="Grid">
-        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource AppBackgroundLightColor}, Dark={StaticResource AppBackgroundDarkColor}}" />
+        <Setter Property="BackgroundColor" Value="{OnPlatform WinUI=Transparent, Default={AppThemeBinding Light={StaticResource AppBackgroundLightColor}, Dark={StaticResource AppBackgroundDarkColor}}}" />
     </Style>
-    
+
     <Style TargetType="toolkit:Popup" ApplyToDerivedTypes="true">
         <Setter Property="VerticalOptions" Value="Center" />
         <Setter Property="HorizontalOptions" Value="Center" />
@@ -29,7 +29,7 @@
 
     <Style TargetType="Page" ApplyToDerivedTypes="True">
         <Setter Property="Padding" Value="0"/>
-        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource AppBackgroundLightColor}, Dark={StaticResource AppBackgroundDarkColor}}" />
+        <Setter Property="BackgroundColor" Value="{OnPlatform WinUI=Transparent, Default={AppThemeBinding Light={StaticResource AppBackgroundLightColor}, Dark={StaticResource AppBackgroundDarkColor}}}" />
     </Style>
 
     <Style TargetType="VerticalStackLayout" ApplyToDerivedTypes="true">
@@ -365,13 +365,13 @@
     </Style>
 
     <Style TargetType="Shell" ApplyToDerivedTypes="True">
-        <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource NavBarColor}, Dark={StaticResource Gray950}}" />
-        <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource PrimaryColor}, Default={StaticResource White}}"></Setter>
-        <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
+        <Setter Property="Shell.BackgroundColor" Value="{OnPlatform WinUI=Transparent, Default={AppThemeBinding Light={StaticResource NavBarColor}, Dark={StaticResource Gray950}}}" />
+        <Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light={OnPlatform WinUI={StaticResource Black}, Default={StaticResource White}}, Dark={StaticResource White}}" />
+        <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={OnPlatform WinUI={StaticResource Black}, Default={StaticResource White}}, Dark={StaticResource White}}" />
         <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
         <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
         <Setter Property="Shell.NavBarHasShadow" Value="True" />
-        <Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
+        <Setter Property="Shell.TabBarBackgroundColor" Value="{OnPlatform WinUI=Transparent, Default={AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}}" />
         <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource White}}" />
         <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource PrimaryColor}, Dark={StaticResource White}}" />
         <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />