zoukankan      html  css  js  c++  java
  • Extensions in UWP Community Toolkit

    概述

    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">

    总结

    到这里我们就把 UWP Community Toolkit Extensions 中的 View Extensions 的源代码实现过程和简单的调用示例讲解完成了,希望能对大家更好的理解和使用这个扩展有所帮助。欢迎大家多多交流,谢谢!

    作者:shaomeng

  • 相关阅读:
    hdu 4521 小明系列问题——小明序列(线段树 or DP)
    hdu 1115 Lifting the Stone
    hdu 5476 Explore Track of Point(2015上海网络赛)
    Codeforces 527C Glass Carving
    hdu 4414 Finding crosses
    LA 5135 Mining Your Own Business
    uva 11324 The Largest Clique
    hdu 4288 Coder
    PowerShell随笔3 ---别名
    PowerShell随笔2---初始命令
  • 原文地址:https://www.cnblogs.com/2020-zhy-jzoj/p/13164948.html
Copyright © 2011-2022 走看看