ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Extensions in UWP Community Toolkit - ViewExtensions

2021-05-27 23:03:24  阅读:261  来源: 互联网

标签:StatusBar UWP page 获取 ViewExtensions Extensions 设置 TitleBar 属性


概述

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

标签:StatusBar,UWP,page,获取,ViewExtensions,Extensions,设置,TitleBar,属性
来源: https://blog.51cto.com/u_15214399/2824266

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有