查看: 818|回复: 5

【跟Z学开发】1.6 仿造一个标题栏(2)

[复制链接]

签到天数: 299 天

连续签到: 1 天

[LV.8]以坛为家I

163

主题

5829

积分

484

支持

微软核心粉丝

发表于 2017-7-29 17:03:20 | 显示全部楼层 |阅读模式
本帖最后由 zcxsythenew 于 2017-7-29 17:03 编辑

专题一 开发一个媒体播放应用
课题6 仿造一个标题栏(2)

语言:XAML、C#

本节包含:
标题栏相关的API

上节课最后提到了三种解决方案(实际上可能性有无数种),相信大家已经写出来了(如果看过置顶的UWP视频应该不成问题)。哪一种更好现在暂无定论,我们先继续往下学习。

将内容延伸到标题栏

在App.xaml.cs的OnLaunched下方,插入:

[C#] 纯文本查看 复制代码
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;


这样就可以把内容延伸到标题栏。需要注意的是,此代码执行一次,“终身有效”,因此如果你改变主意,想用回传统标题栏,不能去掉上面的代码,而应该把true改为false。

效果:

屏幕截图(3).png

看起来有点别扭,但更重要的是现在左上角的播放键是没有效果的。我们要设置一个控件,把它作为标题栏,让系统把其它部分“释放”出来。

了解标题栏的保留部分

但是在此之前,还有一点要注意:系统会保留右上角的区域。那么保留多大的区域呢?是三个按钮的大小144x32吗?

我们可以从Edge看出端倪。不论标签页有多挤,总会留出一点位置。

屏幕截图(4).png

有些应用并不知情。例如,微软自家的应用商店(我的是16251的最新版商店),点击“详情”就可以看到这样的窗口(前提是应用商店的窗口大小要合适)。

屏幕截图(5).png

在这个情况下,你可以试一试,那个x容不容易点到。

还有部分第三方应用,如Music+ Player。

屏幕截图(6).png

要特别留意红框的位置。因为这个地方是最容易忽略的“重灾区”,这是自定义标题栏最容易忽略的部分。标题栏右上角的保留大小不是144x32,而是188x32。

为什么要讲这一点呢?因为以后讲响应式布局的时候,你可能会做出这样的界面:

屏幕截图(7).png

这种极致的界面是否可行呢?

用编程方式获取标题栏的保留部分的尺寸

上面讲的188x32,其实不一定准确,因为说不定哪一个Windows 10又有改动,大改标题栏。最好的方式自然是用编程方式获取了。

在MainPage.xaml.cs的构造函数public MainPage()中,为CoreApplication.GetCurrentView().TitleBar.IsVisibleChanged挂载一个事件。把获取标题栏的尺寸的相关代码放入这个事件中。在App首次启动并调用Window.Current.Activate(),或者从最小化恢复时,会触发这个事件。如果在构造函数中挂载了这个事件,就可以确保收到通知。

标题栏左侧保留区域(double类型):
CoreApplication.GetCurrentView().TitleBar.SystemOverlayLeftInset;

标题栏右侧保留区域(double类型):
CoreApplication.GetCurrentView().TitleBar.SystemOverlayRightInset;

标题栏高度(double类型):
CoreApplication.GetCurrentView().TitleBar.Height;

标题栏是否可见(bool类型):
CoreApplication.GetCurrentView().TitleBar.IsVisible;

这几行代码先留着备用,目前还用不到它们。

设置某个控件为标题栏

在倒数第二个大括号前,插入:
[C#] 纯文本查看 复制代码
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            Window.Current.SetTitleBar(TitleBarElementGrid);
        }

上面的base一行,暂时不知道什么用。“实践是检验真理的唯一标准”,等到自定义Slider的部分,就可以体会到base这一行代码有和没有的差别了。这里只要知道:最好把这一句加上。

下一行的TitleBarElementGrid,VS会报错,并且这一次你找不到using了。这个东西我们要在xaml文件里面定义它。用法示例:

[XML] 纯文本查看 复制代码
<TextBlock x:Name="TitleBarElementGrid" />


如上所示,那么在C#代码里面,TitleBarElementGrid指代的就是这个TextBlock。

在此之前,先要注意的是,用来设置标题栏的这个控件,是要有“内容”的。比如说TextBlock控件,它的“内容”仅是有字的部分。Grid控件,它的内容就是它里面的Children。例如:

[XML] 纯文本查看 复制代码
<Grid x:Name="TitleBarElementGrid"><TextBlock Text="音乐" /></Grid>


这个Grid的内容就是TextBlock的内容(此例中Grid仅有一个Child),仅是“音乐”两个字。不论Width和Height如何设置,其“内容”都仅是这两个字。

但是有一种办法,可以让这个Grid充满“内容”,就是设置Background="Transparent"。这样整个Grid都充满了只有聪明人才能看见的“内容”,这样用SetTitleBar函数,才能真正的把整个Grid的范围都包括到。

我们做的这个应用,用户会期望下图所示的部分都作为标题栏。

屏幕截图(8).png

以下是一种可行的方案。

[XML] 纯文本查看 复制代码
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="TitleBarGrid" Height="32">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="144"/>
                    <!--留给三个按钮的位置,让文本不要越过这个界限-->
            </Grid.ColumnDefinitions>
            <Button Content="" Background="Transparent" FontFamily="Segoe MDL2 Assets" Height="32" Width="48"></Button>
            <Grid Grid.Column="1" x:Name="TitleBarElementGrid" Background="Transparent">
                <TextBlock Text="音乐" FontSize="12" VerticalAlignment="Center" Margin="12,0,0,0"/><!--为什么设置Margin?-->
            </Grid>
        </Grid>
    </Grid>


但是,这个标题栏还有很多部分没有解决。鼠标指向左上角的按钮,有外边框,按下去有三维旋转效果,这实在不是标题栏按钮应有的样子(只需变背景色就好了),而右上角的三个按键不透明。平板模式下和手机上,没有隐藏标题栏。

这些问题先暂缓解决,我们下节课先学习数据绑定。

下节预告:
Style
x:Bind

请投票选择“打卡签到”,谢谢。
单选投票, 共有 9 人参与投票 查看投票参与人

投票已经结束

100.00% (9)
0.00% (0)
您所在的用户组没有投票权限

评分

参与人数 1 智慧币 +10 支持 +6 收起 理由
笨丶苽苽 + 10 + 6 必须支持

查看全部评分

该用户从未签到

104

主题

5968

积分

392

支持

发表于 2017-7-29 21:19:17 | 显示全部楼层
这也太惨了,这次连回复都没有了
我一直认为程序猿有给普通用户科普的义务,好让他们过的更好。结果,我变成了WP的方肘子了……

在回答别人问题的时候。不一定要告诉他真实的答案。很多时候,告诉他一个符合他想象的答案,可能效果更好。因为不是每一个人,都有勇气去接受他不懂的东西,愿意去理解他未知的领域。对绝大多数人来说,更倾向用已有的想法,去解释看到的一切。这些人极度自负。
[你知道吗]:

签到天数: 299 天

连续签到: 1 天

[LV.8]以坛为家I

163

主题

5829

积分

484

支持

微软核心粉丝

 楼主| 发表于 2017-7-29 23:13:18 来自手机 | 显示全部楼层
本帖最后由 zcxsythenew 于 2017-7-29 23:15 编辑
vbfool 发表于 2017-7-29 21:19
这也太惨了,这次连回复都没有了

我开坑之前,已经看到有两个要写入门教程的了,一个更新缓慢,另一个写了两节干脆人间蒸发了。我觉得这样不好,会过度消费了网友的期待。于是我这么闲,当然自己开坑了。今天又看到一个,希望不是空头支票。
还有一个原因是自我价值实现。已经实现了,并且这个系列成功地发挥了它的反作用力,逼着我学习。
[你知道吗]:

签到天数: 52 天

连续签到: 1 天

[LV.5]常住居民I

22

主题

845

积分

145

支持

开发者认证

Rank: 6Rank: 6

积分
845

发表于 2017-7-30 08:21:27 | 显示全部楼层
加油。
已经脱坑的开发者支持你。

签到天数: 412 天

连续签到: 2 天

[LV.9]以坛为家II

22

主题

844

积分

2

支持

发表于 2017-7-30 13:09:22 来自手机 | 显示全部楼层
陌轩 发表于 2017-7-30 08:21
加油。
已经脱坑的开发者支持你。

骚猪

来自:Lumia 640 -智机社区客户端
[你知道吗]:

签到天数: 299 天

连续签到: 1 天

[LV.8]以坛为家I

163

主题

5829

积分

484

支持

微软核心粉丝

 楼主| 发表于 2017-7-30 13:19:36 | 显示全部楼层
陌轩 发表于 2017-7-30 08:21
加油。
已经脱坑的开发者支持你。

其实我也脱坑了,你信吗?(如果你指的是手机的话。)
您需要登录后才可以回帖 登录 | 注册

本版积分规则

         

网站地图| 小黑屋|京ICP证150706号|京B2-20160045| 京公网安备11010802018258号

Powered by Discuz! X3.2 / Copyright 2010-2017 © 智机网 WFUN.COM Inc. All rights reserved.

快速回复 返回顶部 返回列表