UI: 标题栏

TitleBarDemo.xaml

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

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="0 10 0 0" />

            <Button Name="btnTitle" Content="改变标题" Click="btnTitle_Click" Margin="0 10 0 0" />

            <Button Name="btnColor" Content="改变颜色" Click="btnColor_Click" Margin="0 10 0 0" />

            <Button Name="btnBack" Content="显示/隐藏返回按钮" Click="btnBack_Click" Margin="0 10 0 0" />

            <Button Name="btnHidden" Content="显示/隐藏标题栏" Click="btnHidden_Click" Margin="0 10 0 0" />

            <Button Name="btnFullScreen" Content="全屏/取消全屏" Click="btnFullScreen_Click" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

TitleBarDemo.xaml.cs

/*
 * 演示 TitleBar 相关知识点
 *
 * 通过 ApplicationView.GetForCurrentView().TitleBar 获取当前的 ApplicationViewTitleBar
 * 通过 CoreApplication.GetCurrentView().TitleBar 获取当前的 CoreApplicationViewTitleBar
 *
 * 注:手工测量 TitleBar 高度为 32 像素
 */

using System;
using Windows.ApplicationModel.Core;
using Windows.UI;
using Windows.UI.Core;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.UI
{
    public sealed partial class TitleBarDemo : Page
    {
        public TitleBarDemo()
        {
            this.InitializeComponent();

            this.Loaded += TitleBarDemo_Loaded;
        }

        private void TitleBarDemo_Loaded(object sender, RoutedEventArgs e)
        {

        }

        // 改变 Title
        private void btnTitle_Click(object sender, RoutedEventArgs e)
        {
            // 改变左上角 Title 的显示内容
            ApplicationView.GetForCurrentView().Title = $"My Title Bar({new Random().Next(1000, 10000).ToString()})";
        }

        // 改变 TitleBar 上的相关颜色
        private void btnColor_Click(object sender, RoutedEventArgs e)
        {
            // 获取当前的 ApplicationViewTitleBar
            ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;

            if (titleBar.BackgroundColor != Colors.Orange)
            {
                // 背景色
                titleBar.BackgroundColor = Colors.Orange;
                // 前景色
                titleBar.ForegroundColor = Colors.White;
                // 窗口为非活动状态时的背景色(活动状态就是焦点在窗口上,非活动状态就是焦点不在窗口上)
                titleBar.InactiveBackgroundColor = Colors.Yellow;
                // 窗口为非活动状态时的前景色
                titleBar.InactiveForegroundColor = Colors.Gray;

                // TitleBar 上的按钮的背景色(按钮包括:最小化按钮,最大化按钮,关闭按钮,返回按钮)
                titleBar.ButtonBackgroundColor = Colors.Orange;
                // TitleBar 上的按钮的鼠标经过的背景色
                titleBar.ButtonHoverBackgroundColor = Colors.Blue;
                // TitleBar 上的按钮的鼠标按下的背景色
                titleBar.ButtonPressedBackgroundColor = Colors.Green;
                // TitleBar 上的按钮的非活动状态的背景色
                titleBar.ButtonInactiveBackgroundColor = Colors.Yellow;

                // TitleBar 上的按钮的前景色
                titleBar.ButtonForegroundColor = Colors.White;
                // TitleBar 上的按钮的鼠标经过的前景色
                titleBar.ButtonHoverForegroundColor = Colors.Red;
                // TitleBar 上的按钮的鼠标按下的前景色
                titleBar.ButtonPressedForegroundColor = Colors.Purple;
                // TitleBar 上的按钮的非活动状态的前景色
                titleBar.ButtonInactiveForegroundColor = Colors.Gray;
            }
            else
            {
                titleBar.BackgroundColor = null;
                titleBar.ForegroundColor = null;
                titleBar.InactiveBackgroundColor = null;
                titleBar.InactiveForegroundColor = null;

                titleBar.ButtonBackgroundColor = null;
                titleBar.ButtonHoverBackgroundColor = null;
                titleBar.ButtonPressedBackgroundColor = null;
                titleBar.ButtonInactiveBackgroundColor = null;

                titleBar.ButtonForegroundColor = null;
                titleBar.ButtonHoverForegroundColor = null;
                titleBar.ButtonPressedForegroundColor = null;
                titleBar.ButtonInactiveForegroundColor = null;
            }
        }

        // 显示或隐藏 TitleBar 左上角的返回按钮
        private void btnBack_Click(object sender, RoutedEventArgs e)
        {
            // 当前 TitleBar 左上角的返回按钮是隐藏状态
            if (SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility == AppViewBackButtonVisibility.Collapsed)
            {
                // 显示 TitleBar 左上角的返回按钮
                SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
                // 监听 TitleBar 左上角的返回按钮的点击事件
                SystemNavigationManager.GetForCurrentView().BackRequested += TitleBarDemo_BackRequested;
            }
            else
            {
                SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Collapsed;
                SystemNavigationManager.GetForCurrentView().BackRequested -= TitleBarDemo_BackRequested;
            }
        }
        // 处理 TitleBar 左上角的返回按钮的点击事件
        private void TitleBarDemo_BackRequested(object sender, BackRequestedEventArgs e)
        {
            if (MainPage.Current.Container.CanGoBack)
                MainPage.Current.Container.GoBack();
        }

        // 显示或隐藏 TitleBar
        private void btnHidden_Click(object sender, RoutedEventArgs e)
        {
            // 切换 TitleBar 的显示/隐藏状态
            // 注:TitleBar 隐藏时,仍会显示最小化按钮、最大化按钮、关闭按钮
            CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar ^= true;

            /*
             * 如果需要自定义 TitleBar 的话,就隐藏它,然后自定义一个自己的即可
             * 要注意 TitleBar 的 Height, SystemOverlayLeftInset, SystemOverlayRightInset
             * 要注意如果收到 CoreApplicationViewTitleBar.LayoutMetricsChanged 事件,则 Height, SystemOverlayLeftInset, SystemOverlayRightInset 的值可能发生了变化
             * 要注意窗口大小发生变化时的处理
             */
            CoreApplicationViewTitleBar titleBar = CoreApplication.GetCurrentView().TitleBar;
            // Height - TitleBar 的高度
            // SystemOverlayLeftInset - TitleBar 浮层左侧的间隔,在这个间隔部分不要放置自定义内容
            // SystemOverlayRightInset - TitleBar 浮层右侧的间隔,在这个间隔部分不要放置自定义内容(右侧间隔部分是用于放置最小化按钮,最大化按钮,关闭按钮的。经过测试这个间隔明显多出来一些,也许是预留给其他按钮的)
            lblMsg.Text = $"titleBarHeight: {titleBar.Height}, titleBarLeftInset: {titleBar.SystemOverlayLeftInset}, titleBarRightInset: {titleBar.SystemOverlayRightInset}";
        }

        // 进入全屏模式,退出全屏模式
        private void btnFullScreen_Click(object sender, RoutedEventArgs e)
        {
            ApplicationView view = ApplicationView.GetForCurrentView();
            // 判断当前是否是全屏模式
            if (view.IsFullScreenMode)
            {
                // 退出全屏模式
                view.ExitFullScreenMode();
                lblMsg.Text = "退出全屏模式";
            }
            else
            {
                // 尝试进入全屏模式
                bool isSuccess = view.TryEnterFullScreenMode();
                if (isSuccess)
                {
                    lblMsg.Text = "进入全屏模式";
                }
                else
                {
                    lblMsg.Text = "尝试进入全屏模式失败";
                }
            }

            // 注意,进入全屏模式后,TitleBar 会消失,鼠标移动到顶部,则 TitleBar 会再次出现(当然这个行为的具体表现取决于 FullScreenSystemOverlayMode,参见 FullScreen.xaml)
            CoreApplicationViewTitleBar titleBar = CoreApplication.GetCurrentView().TitleBar;
            // TitleBar 是否是可见状态
            bool titleBarIsVisible = titleBar.IsVisible;
            // TitleBar 的可见性发生变化时触发的事件
            titleBar.IsVisibleChanged += delegate { };
        }
    }
}

时间: 2024-10-01 20:42:54

UI: 标题栏的相关文章

上门洗车APP --- Androidclient开发 之 项目结构介绍

上门洗车APP --- Androidclient开发 之 项目结构介绍 前言 尽管公司项目较紧,但还是抽空给大家继续更新. o_O"~ 欢迎大家的关注,非常高兴和大家共同学习.前面给大家分享了项目中的以下内容: 上门洗车APP --- Androidclient开发 前言及业务简介 上门洗车APP --- Androidclient开发 之 网络框架封装介绍(一) 上门洗车APP --- Androidclient开发 之 网络框架封装介绍(二) 之前有非常多朋友私信过来说想打包一份源代码学习

上门洗车APP --- Android客户端开发 之 项目结构介绍

上门洗车APP --- Android客户端开发 之 项目结构介绍 前言 虽然公司项目较紧,但还是抽出时间给大家继续更新.     o_O"~ 感谢大家的关注,很高兴和大家共同学习.前面给大家分享了项目中的以下内容: 上门洗车APP --- Android客户端开发 前言及业务简介 上门洗车APP --- Android客户端开发 之 网络框架封装介绍(一) 上门洗车APP --- Android客户端开发 之 网络框架封装介绍(二) 之前有很多朋友私信过来说想打包一份源码学习,由于本项目也是还

【Android UI】自定义带按钮的标题栏

自定义标题栏在很多的android app中很常见,可以说是一种很有用的UI设计方法.自 己也本着学习的态度,经过一番各种坑,终于实现了,现总结如下: 一:大致流程 1.      对指定的android activity设置自定义主题风格,其中自定义主题风格是关键 在android 4.0以上版本中如果使用Theme.Holo或者Theme.Light等,程序会 一直报错误-you cannot combine custom title with other feature titles 2.

【Android UI设计与开发】第13期:顶部标题栏(四)自定义ActionBar风格和样式

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9087941   这篇文章将对ActionBar专题前面几篇学习过的内容做一个总结,顺便运用以前学过的知识实现一个自定义样式的ActionBar标题栏效果.话不多说,进入今天的正题. 一.实现效果图 竖屏效果图:最左边是Logo图标,右边是工具栏按钮,点击Menu键显示其余的按钮键,下方是Tab标签选项. 横屏效果图:竖屏中的Tab选项标签变成了中间的下拉导航按钮 二.项目结

【Android UI设计与开发】8.顶部标题栏(一)ActionBar 奥义&#183;详解

原文地址:http://www.cnblogs.com/yc-755909659/p/4290784.html 一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和menu,在程序运行中一直置于顶部,对于Android平板设备来说屏幕更大它的标题使用Action Bar来设计可以展示更多丰富的内容,方便操控. 二.ActionBar的功能 用图的方式来讲解

【Android UI设计与开发】顶部标题栏(一)ActionBar 奥义&#183;详解

转自:http://www.cnblogs.com/yc-755909659/p/4290784.html 一.ActionBar介绍 在Android 3.0中除了我们重点讲解的Fragment外,Action Bar也是一个非常重要的交互元素,Action Bar取代了传统的tittle bar和menu,在程序运行中一直置于顶部,对于Android平板设备来说屏幕更大它的标题使用Action Bar来设计可以展示更多丰富的内容,方便操控. 二.ActionBar的功能 用图的方式来讲解它的

【Android UI设计与开发】第12期:顶部标题栏(三)ActionBar实现层级导航的返回效果

转载请注明出处: http://blog.csdn.net/yangyu20121224/article/details/9059459       今天我们继续来讲解ActionBar的使用,不清楚这个类的读者可以翻阅博主前几篇的文章或者在网络上查阅相关 的资料,关于这个类讲解的文章还是很多的,功能确实也很强大.好的,话不多说,让我们赶快进入正题吧. 一.使用应用图标实现层级导航 在默认的情况下,应用程序图标显示在操作栏的左边.你能够把这个图标当做操作项来使用,应用程序可以在这 个图标上响应以

【Android UI设计与开发】第14期:顶部标题栏(五)两种方式实现仿微信标题栏弹窗效果

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9093821         博主在这篇文章中将会继续围绕顶部标题栏专题来进行实例讲解,今天要讲解的主题是分别使用PopupWindow和Activity两种不同的方式来实现仿微信顶部标题栏弹窗的这样一个效果. 一.实现效果图 这里为了演示方便,我将两种方法放在一个应用程序中演示,这个是主界面 虽然两种实现的方式不一样,但是最终的效果图都是差不多的     二.项目结构图  

【Android UI设计与开发】第11期:顶部标题栏(二)ActionBar实现Tab选项卡和下拉导航列表

转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573  在上一篇文章中,我们只是大概的了解了一下关于ActionBar这个类的简单用法,今天我会继续以实例进行更加深入的讲解. 一.实现Tab选项标签 当你想要在一个Activity中提供Tab选项卡时,使用ActionBar的Tab选项标签是一个非常好的选择(而不是使用TabWidget类),因为系统会调整ActionBar的选项标签来适应不同尺寸的屏幕的需要,比如