张高兴的 UWP 开发笔记:手机状态栏 StatusBar

  UWP 有关应用标题栏 TitleBar 的文章比较多,但介绍 StatusBar 的却没几篇,在这里随便写写。状态栏 StatusBar 用法比较简单,花点心思稍微设计一下,对应用会是个很好的点缀。

  说明一下,当应用运行在 PC 上时我们叫 TitleBar ,运行在 Mobile 上时我们叫 StatusBar ,这是两个不同的玩意儿。

  

  在使用 StatusBar 之前,你需要在项目的引用里添加 Windows Mobile Extensions for the UWP ,并且引用 Windows.UI.ViewManagement 命名空间。

  StatusBar 类中一共有三个方法。分别为一个静态方法 GetForCurrentView() ,用于取得当前 StatusBar 实例。两个异步方法 HideAsync()ShowAsync() ,分别用来显示与隐藏 StatusBar 。

  五个属性。两个可空的 Color 类型 BackgroundColorForegroundColor ,分别用来设置背景色与前景色。 double 类型的 BackgroundOpacity ,取值范围为 0-1 ,用来设置 StatusBar 透明度。两个只读属性,返回 Rect 矩形的 OccludedRect 和 StatusBarProgressIndicator 类型的 ProgressIndicator ,ProgressIndicator 属性不太了解。

  两个事件。HidingShowing

  下面给出一个简单的示例(GitHub : https://github.com/ZhangGaoxing/uwp-demo/tree/master/StatusBarDemo

  

  MainPage.xaml

<Page
    x:Class="StatusBarDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StatusBarDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Text="Status Bar Demo" FontSize="35" Margin="15" />

        <StackPanel Grid.Row="1" Margin="15">
            <TextBlock Text="Show or hide status bar" />
            <RadioButton Name="Show" GroupName="ShowOrHide" IsChecked="True" Checked="RadioButton_Checked">Show</RadioButton>
            <RadioButton Name="Hide" GroupName="ShowOrHide" Checked="RadioButton_Checked">Hide</RadioButton>
        </StackPanel>

        <StackPanel Grid.Row="2" Margin="15">
            <TextBlock Text="Change status bar background color" />
            <RadioButton Name="Black" GroupName="Color" IsChecked="True" Checked="Color_Checked">Black</RadioButton>
            <RadioButton Name="White" GroupName="Color" Checked="Color_Checked">White</RadioButton>
            <RadioButton Name="Accent" GroupName="Color" Checked="Color_Checked">System Accent Color</RadioButton>
        </StackPanel>

        <StackPanel Grid.Row="3" Margin="15">
            <TextBlock Text="Change status bar background opacity" />
            <Slider Name="Opacity" Minimum="0" Maximum="10" Value="10" ValueChanged="Opacity_ValueChanged" />
        </StackPanel>

    </Grid>
</Page>

  MainPage.xaml.cs

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.ViewManagement;
using Windows.Foundation.Metadata;
using Windows.UI;
using Windows.UI.Xaml.Media;

namespace StatusBarDemo
{
    public sealed partial class MainPage : Page
    {
        StatusBar statusBar;
        // 获取系统当前颜色
        SolidColorBrush accentColor = (SolidColorBrush)Application.Current.Resources["SystemControlBackgroundAccentBrush"];

        public MainPage()
        {
            // 判断是否存在 StatusBar
            if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
            {
                statusBar = StatusBar.GetForCurrentView();
            }
            else
            {
                Application.Current.Exit();
            }

            this.InitializeComponent();
        }

        // 显示,隐藏
        private async void RadioButton_Checked(object sender, RoutedEventArgs e)
        {
            RadioButton r = sender as RadioButton;

            if (r.Name == "Show")
            {
                await statusBar.ShowAsync();
            }
            else
            {
                await statusBar.HideAsync();
            }
        }

        // 颜色
        private void Color_Checked(object sender, RoutedEventArgs e)
        {
            RadioButton r = sender as RadioButton;

            if (r.Name == "Black")
            {
                statusBar.BackgroundColor = Colors.Black;
                statusBar.ForegroundColor = Colors.White;
            }
            else if(r.Name == "White")
            {
                statusBar.BackgroundColor = Colors.White;
                statusBar.ForegroundColor = Colors.Black;
                statusBar.BackgroundOpacity = 1;
            }
            else
            {
                statusBar.BackgroundColor = accentColor.Color;
                statusBar.ForegroundColor = Colors.Black;
                statusBar.BackgroundOpacity = 1;
            }
        }

        // 透明度
        private void Opacity_ValueChanged(object sender, Windows.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
        {
            statusBar.BackgroundOpacity = Opacity.Value / 10;
        }
    }
}
时间: 2024-10-22 11:30:43

张高兴的 UWP 开发笔记:手机状态栏 StatusBar的相关文章

张高兴的 UWP 开发笔记:汉堡菜单进阶

不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航模式就叫"汉堡菜单". 本文讨论的是如何实现官方的这一样式(点击后左侧出现一个填充矩形),普通实现网上到处都是,有需要的朋友自己百度下吧. 下面将介绍两种不同的实现方法,第一种最简单的方法是直接使用 Template 10 模板,第二种就是纯手写了. 若有什么不正确的地方望指正,大家共同讨

UWP开发笔记——嵌套式页面的实现

绪论 UWP开发中,Page是最常用的Control之一,通常情况下,在开发的application中,每一个页面就是一个Page.有时候,为了开发整合度更高,UI表现更为一致的UI,开发者需要把UI控件和功能整合到一个页面的子页面中,子页面拥有自己的UI表现和生命周期,这就需要在Page中嵌套Page来达到需要实现的效果. 一种实现方法 其实,实现嵌套页面是一件很简单的事情,我们知道,page都是通过Frame显示和控制Navigation的,基于这点,就可以在主页面(即最外层的页面)中添加一

[UWP开发]处理手机后退事件

众所周知,uwp程序是一套代码,可以run在不同的平台上.但是不同的设备肯定有其独特之处,所以针对这些独特之处,必须用“独特的代码”来处理. 所以微软提供了一系列的拓展类库来实现这种特殊处理. 如上图所示,红框中的便是拓展程序集. 当然实现手机后后退键处理,我们就需要把Mobile对应的程序集添加到我们的项目中去. 添加后只需要一段很简短的代码,我们就可以实现对后退按键的处理.代码很简洁. if ("Windows.Mobile" == Windows.System.Profile.A

UWP开发砸手机系列(二)—— “讲述人”识别自定义控件Command

上一篇我们提到如何让“讲述人”读出自定义的CanReadGrid,但“讲述人”仍然无法识别CanReadGrid上绑定的Command.XAML代码如下: <StackPanel> <TextBlock Text="{x:Bind Title,Mode=OneWay}" Foreground="White"></TextBlock> <local:CanReadGrid Background="Red"

张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

所谓 UWP 样式的汉堡菜单,我曾在"张高兴的 UWP 开发笔记:汉堡菜单进阶"里说过,也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon,并且左侧使用填充颜色的矩形用来表示 ListView 的选中.如下图 但怎样通过 Xamarin.Forms ,将这一样式的汉堡菜单带入到 Android 与 iOS 中呢? 一.大纲-细节模式简介 讲代码前首先来说说这种导航模式,官方称"大纲-细节模式"(MasterDetail).左侧的汉堡菜单称为&qu

张高兴的 Windows 10 IoT 开发笔记:BH1750FVI 光照度传感器

原文:张高兴的 Windows 10 IoT 开发笔记:BH1750FVI 光照度传感器 BH1750FVI 是一款 IIC 接口的数字型光强度传感器集成电路.下面介绍一下其在 Windows 10 IoT Core 环境下的用法. 项目运行在 Raspberry Pi 2/3 上,使用 C# 进行编码. 1. 准备 包含 BH1750FVI 的传感器,这里选择的是淘宝上最多的 GY-30:Raspberry Pi 2/3 一块,环境为 Windows 10 IoT Core:公母头杜邦线 4-

张高兴的 Windows 10 IoT 开发笔记:RTC 时钟模块 DS3231

原文:张高兴的 Windows 10 IoT 开发笔记:RTC 时钟模块 DS3231 GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/DS3231 注意:不包含闹钟设置

张高兴的 Windows 10 IoT 开发笔记:使用 MAX7219 驱动 8&#215;8 点阵

原文:张高兴的 Windows 10 IoT 开发笔记:使用 MAX7219 驱动 8×8 点阵 GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/MAX7219

张高兴的 Windows 10 IoT 开发笔记:使用 ADS1115 读取模拟信号

原文:张高兴的 Windows 10 IoT 开发笔记:使用 ADS1115 读取模拟信号 考虑到 Raspberry Pi 读取模拟信号是很烦人的事情,更何况是在没人玩的 Windows 10 IoT 下,所以准备正儿八经的写点东西. 需求:使用 Raspberry Pi 读取输出模拟信号的 MQ 系列气体传感器.(GitHub:https://github.com/ZhangGaoxing/windows-iot-demo/tree/master/ADS1115) 由于 Raspberry