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

zcxsythenew UID.911687
2017-07-29 发表

本帖最后由 zcxsythenew 于 2017-7-29 17:03 编辑

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

语言:XAML、C#

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

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

将内容延伸到标题栏

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

[mw_shl_code=csharp,true]CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;[/mw_shl_code]

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

效果:

***附件停止解析***

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

了解标题栏的保留部分

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

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

***附件停止解析***

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

***附件停止解析***

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

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

***附件停止解析***

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

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

***附件停止解析***

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

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

上面讲的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;

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

设置某个控件为标题栏

在倒数第二个大括号前,插入:
[mw_shl_code=csharp,true] protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
Window.Current.SetTitleBar(TitleBarElementGrid);
}[/mw_shl_code]
上面的base一行,暂时不知道什么用。“实践是检验真理的唯一标准”,等到自定义Slider的部分,就可以体会到base这一行代码有和没有的差别了。这里只要知道:最好把这一句加上。

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

[mw_shl_code=xml,true]<TextBlock x:Name="TitleBarElementGrid" />[/mw_shl_code]

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

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

[mw_shl_code=xml,true]<Grid x:Name="TitleBarElementGrid"><TextBlock Text="音乐" /></Grid>[/mw_shl_code]

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

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

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

***附件停止解析***

以下是一种可行的方案。

[mw_shl_code=xml,true] <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>[/mw_shl_code]

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

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

下节预告:
Style
x:Bind

[backcolor=red]请投票选择“打卡签到”,谢谢。[/backcolor]

敬告:
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!
全部回复:
vbfool UID.352791
2017-07-29 回复

这也太惨了,这次连回复都没有了

zcxsythenew UID.911687
2017-07-29 回复

本帖最后由 zcxsythenew 于 2017-7-29 23:15 编辑

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

陌轩 UID.2837685
2017-07-30 回复

加油。
已经脱坑的开发者支持你。{:6_227:}

jq****ft UID.2788502
2017-07-30 使用 Lumia 640 回复

Quote陌轩 发表于 2017-7-30 08:21
加油。
已经脱坑的开发者支持你。


骚猪{:6_235:}

zcxsythenew UID.911687
2017-07-30 回复

Quote***链接停止解析***
加油。
已经脱坑的开发者支持你。


其实我也脱坑了,你信吗?(如果你指的是手机的话。)

本站使用Golang构建,点击此处申请开源鄂ICP备18029942号-4联系站长投诉/举报