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

简介:   UWP 有关应用标题栏 TitleBar 的文章比较多,但介绍 StatusBar 的却没几篇,在这里随便写写。状态栏 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;
        }
    }
}
目录
相关文章
|
29天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤
|
3月前
|
小程序 前端开发 JavaScript
前端Uni-app开发微信小程序|微信小程序手机商城
前端Uni-app开发微信小程序|微信小程序手机商城
|
4月前
|
XML Java Android开发
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战(附源码 简单易懂 可直接使用)
Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战(附源码 简单易懂 可直接使用)
68 0
|
4月前
|
XML Java Android开发
Android App开发手机阅读中PDF文件渲染器的讲解及使用(附源码 简单易懂)
Android App开发手机阅读中PDF文件渲染器的讲解及使用(附源码 简单易懂)
82 0
|
4月前
|
XML Java Android开发
Android App开发手机阅读之使用贝塞尔曲线实现给主播刷礼物特效(附源码和演示视频 简单易懂 可直接使用)
Android App开发手机阅读之使用贝塞尔曲线实现给主播刷礼物特效(附源码和演示视频 简单易懂 可直接使用)
41 0
|
2月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
|
7月前
|
IDE 开发工具 Android开发
如何在没有 USB 数据线的情况下使用 Android Studio 在手机中安装 Android
如何在没有 USB 数据线的情况下使用 Android Studio 在手机中安装 Android
106 1
|
4月前
|
XML Java Android开发
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
76 0

热门文章

最新文章