Extensions in UWP Community Toolkit - ViewExtensions

概述 UWP Community Toolkit Extensions 中有一個為 View 提供的擴展 - View Extensions，本篇我們結合代碼詳細講解 View Extensions 的實現。 View Extensions 包括了 ApplicationViewExtensions ...

概述

UWP Community Toolkit Extensions 中有一個為 View 提供的擴展 - View Extensions，本篇我們結合代碼詳細講解 View Extensions 的實現。

View Extensions 包括了 ApplicationViewExtensions，StatusBarExtensions 和 TitleBarExtensions，讓開發者可以方便的定製 AppView，StatusBar 和 TitleBar 的樣式，接下來看看官方示例的截圖：

Source: https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI/Extensions/ApplicationView

https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI/Extensions/StatusBar

https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI/Extensions/TitleBar

Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/extensions/viewextensions

Namespace: Microsoft.Toolkit.Uwp.UI.Extensions; Nuget: Microsoft.Toolkit.Uwp.UI;

開發過程

代碼分析

由於 ViewExtensions 分為 ApplicationViewExtensions，StatusBarExtensions 和 TitleBarExtensions 三個部分，我們分別來看一下：

1. ApplicationViewExtensions

先來看一下 ApplicationViewExtensions 的結構：

雖然有兩個類組成，但其實 ApplicationView.cs 類是 Obsolete 的，所以現在在使用的是 ApplicationViewExtensions.cs，我們主要看一下這個類，先看一下類結構：

類的功能比較簡單，我們主要來看這幾個針對 Page 的附加屬性對應的 get 和 set 方法：

Title 對應 GetTitle(page) 和 SetTitle(page, value) - 獲取和設置 App 標題，主要處理邏輯是通過 GetApplicationView() 獲取 applicationView，然後再獲取或設置 Title 屬性；
ExtendViewIntoTitleBar 對應 GetExtendViewIntoTitleBar(page) 和 SetExtendViewIntoTitleBar(page, value) - 獲取和設置是否擴展視圖到標題欄的布爾值，主要處理邏輯是通過 GetCoreApplicationView() 獲取 CoreApplicationView，然後再獲取或設置這個屬性，如果為 True，那麼 App 的 UI 會占據 TitleBar 的位置；
BackButtonVisibility 對應 GetBackButtonVisibility(page) 和 SetBackButtonVisibility(page, value) - 獲取和設置後退按鈕是否可用，主要處理邏輯是通過 GetSystemNavigationManager() 來獲取 SystemNavigationManager，然後再設置或獲取這個屬性；

2. StatusBarExtensions

先來看一下 StatusBarExtensions 的結構：

和 ApplicationViewExtensions 類似，StatusBar.cs 類是 Obsolete 的，所以現在在使用的是 StatusBarExtensions.cs，我們主要看一下這個類，先看一下類結構：

類的功能比較簡單，我們主要來看這幾個針對 Page 的附加屬性對應的 get 和 set 方法：

BackgroundColor 對應 GetBackgroundColor(page) 和 SetBackgroundColor(page, color) - 獲取和設置 StatusBar 的背景顏色，主要通過 GetStatusBar() 獲得 StatusBar 實例，然後獲取或設置 BackgroundColor 屬性；
ForegroundColor 對應 GetForegroundColor(page) 和 SetForegroundColor(page, color) - 獲取和設置 StatusBar 的前景顏色，主要通過 GetStatusBar() 獲得 StatusBar 實例，然後獲取或設置 ForegroundColor 屬性；
BackgroundOpaticy 對應 GetBackgroundOpaticy(page) 和 SetBackgroundOpaticy(page, color) - 獲取和設置 StatusBar 的背景透明度，主要通過 GetStatusBar() 獲得 StatusBar 實例，然後獲取或設置 BackgroundOpaticy 屬性；
IsVisible 對應 GetIsVisible(page) 和 SetIsVisible(page, double) - 獲取和設置 StatusBar 是否可見，獲取方法通過獲取 OccludedRect Height 的高度來判斷是否可見，因為 InputPane 的 VIsible 屬性只在 XBox 有效；設置是通過 Page 的 IsVisibleProperty 屬性來設置；IsVisibleProperty 是類中定義的依賴屬性，改變時觸發 OnIsVisibleChanged 事件；

來看一下 OnIsVisibleChanged 事件的處理方法，通過調用 StatusBar 的 ShowAsync() 和 HideAsync() 方法來設置 StatusBar 的可見和不可見；

private static async void OnIsVisibleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var statusBar = GetStatusBar();

    if (statusBar == null)
    {
        return;
    }

    bool isVisible = (bool)e.NewValue;

    if (isVisible)
    {
        await statusBar.ShowAsync();
    }
    else
    {
        await statusBar.HideAsync();
    }
}

3. TitleBarExtensions

先來看一下 TitleBarExtensions 的結構：

和 ApplicationViewExtensions 類似，TitleBar.cs 類是 Obsolete 的，所以現在在使用的是 TitleBarExtensions.cs，我們主要看一下這個類，先看一下類結構：

類的功能比較簡單，我們主要來看這幾個針對 Page 的附加屬性對應的 get 和 set 方法：

BackgroundColor 對應 GetBackgroundColor(page) 和 SetBackgroundColor(page, color) - 獲取和設置 TitleBar 的背景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 BackgroundColor 屬性；在顯示上會覆蓋 StatusBar 的對應屬性；
ButtonBackgroundColor 對應 GetButtonBackgroundColor(page) 和 SetButtonBackgroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕的背景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonBackgroundColor 屬性；
ButtonForegroundColor 對應 GetButtonForegroundColor(page) 和 SetButtonForegroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕的前景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonForegroundColor 屬性；
ButtonHoverBackgroundColor 對應 GetButtonHoverBackgroundColor(page) 和 SetButtonHoverBackgroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕的滑鼠懸浮背景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonHoverBackgroundColor 屬性；
ButtonHoverForegroundColor 對應 GetButtonHoverForegroundColor(page) 和 SetButtonHoverForegroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕的滑鼠懸浮前景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonHoverForegroundColor 屬性；
ButtonInactiveBackgroundColor 對應 GetButtonInactiveBackgroundColor(page) 和 SetButtonInactiveBackgroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕在視窗非活動狀態時的背景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonInactiveBackgroundColor 屬性；
ButtonInactiveForegroundColor 對應 GetButtonInactiveForegroundColor(page) 和 SetButtonInactiveForegroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕在視窗非活動狀態時的前景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonInactiveForegroundColor 屬性；
ButtonPressedBackgroundColor 對應 GetButtonPressedBackgroundColor(page) 和 SetButtonPressedBackgroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕點擊時的背景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonPressedBackgroundColor 屬性；
ButtonPressedForegroundColor 對應 GetButtonPressedForegroundColor(page) 和 SetButtonPressedForegroundColor(page, color) - 獲取和設置 TitleBar 的右上角三個按鈕點擊時的前景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ButtonPressedForegroundColor 屬性；
ForegroundColor 對應 GetForegroundColor(page) 和 SetForegroundColor(page, color) - 獲取和設置 TitleBar 的前景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 ForegroundColor 屬性；在顯示上會覆蓋 StatusBar 的對應屬性；
InactiveBackgroundColor 對應 GetInactiveBackgroundColor(page) 和 SetInactiveBackgroundColor(page, color) - 獲取和設置 TitleBar 在視窗非活動時的背景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 InactiveBackgroundColor 屬性；在顯示上會覆蓋 StatusBar 的對應屬性；
InactiveForegroundColor 對應 GetInactiveForegroundColor(page) 和 SetInactiveForegroundColor(page, color) - 獲取和設置 TitleBar 在視窗非活動時的前景色，主要通過 GetTitleBar() 方法獲得 TitleBar 實例，然後獲取或設置 InactiveForegroundColor 屬性；在顯示上會覆蓋 StatusBar 的對應屬性；

調用示例

我們定製了 AppView 的 Title，StatusBar 和 TitleBar 的樣式，看到運行圖和設置的一致；

<Page
    x:Class="CommunityToolkitSample.MainPage"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:extensions="using:Microsoft.Toolkit.Uwp.UI.Extensions"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    extensions:ApplicationViewExtensions.Title="View Extensions"
      extensions:TitleBarExtensions.BackgroundColor="Red"
      extensions:TitleBarExtensions.ForegroundColor="Green"
      extensions:TitleBarExtensions.ButtonBackgroundColor="Gray"
      extensions:TitleBarExtensions.ButtonForegroundColor="White"
      extensions:StatusBarExtensions.BackgroundColor="CornflowerBlue"
      extensions:StatusBarExtensions.BackgroundOpacity="0.8"
      extensions:StatusBarExtensions.ForegroundColor="White"
      extensions:StatusBarExtensions.IsVisible="False"
    mc:Ignorable="d">