Improve Windows sample app UI (#1861)
* Improve WinUI sample app #1860 * Fix Shell colors on other platforms * Fix formatting * Apply code review * Use `Padding =4` on WinUI, else `Padding=8` --------- Co-authored-by: Gerald Versluis <gerald.versluis@microsoft.com> Co-authored-by: Brandon Minnick <13558917+brminnick@users.noreply.github.com>
This commit is contained in:
Mohammad Hossein Rastegarinia
GitHub
Родитель
98ba2f3636
Коммит
a05175dafd
|
|
@ -13,7 +13,13 @@
|
|||
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',
|
||||
|
|
@ -21,12 +27,13 @@
|
|||
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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{
|
||||
|
|
|
|||
|
|
@ -29,8 +29,18 @@ using CommunityToolkit.Maui.Sample.Views.Popups;
|
|||
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 class MauiProgram
|
|||
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());
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,8 @@ public abstract class BaseGalleryPage<TViewModel> : BasePage<TViewModel> where T
|
|||
|
||||
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 @@ public abstract class BaseGalleryPage<TViewModel> : BasePage<TViewModel> where T
|
|||
}
|
||||
}
|
||||
|
||||
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),
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}}" />
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче