张高兴的 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;
        }
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

INVALID_STATE_ERR: DOM Exception 11

在使用jQuery的ajax且网络很慢、设置了timeout的情况下,直接不判断ajax的readyState而直接取responseText将出会错(此时xh...

13120
来自专栏MasiMaro 的技术博文

菜单的使用

2)弹出式菜单:一般在顶级菜单上都有很多菜单项,单击这些菜单项时会弹出一个下拉式的菜单项,我们点击的这个菜单称为弹出式菜单

12640
来自专栏landv

vb.net 结束进程

17630
来自专栏逸鹏说道

WP、Win10开发或者WPF开发时绘制自定义窗体~例如:一个手机

WP and Win10 效果:(数字是参考值,和UI无关) ? <Page x:Class="_05.AllControls._BorderUsePa...

36350
来自专栏冰霜之地

Weex 事件传递的那些事儿

在前两篇文章里面分别谈了Weex如何在Native端初始化的和Weex是如何高效的渲染Native的原生UI的。Native这边还缺一块,那就是Native产生...

24440
来自专栏张高兴的博客

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

44960
来自专栏布尔

ExtJS4预览:渲染过程重构和标准化

在过去的四年,ExtJs代码库已经进化了,新组件被加进来,编码标准也改进了。在这个过程中,为了重构旧组件有必要经常追溯回去以保证他们也被改进。 在ExtJS4...

219100
来自专栏游戏杂谈

as3与php 上传多张图片demo

2、在一次添加的图片中如果超出最大上传数,忽略本次选中的所有图片(又得重新选一次,此现象普通存在于目前各大网站的flash批量上传中)

20820
来自专栏菩提树下的杨过

Silverlight:MouseDragElementBehavior无法应用于ListBox的变相解决办法

Blend自带的行为MouseDragElementBehavior应用到ListBox后,如果用鼠标按住列表列拖动,没有任何效果,在多次尝试中意外发现,如果将...

23580
来自专栏GIS讲堂

Arcgis for js加载天地图

天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载,在此将之进行了一定的封装,如下:

78520

扫码关注云+社区

领取腾讯云代金券