专题一 开发一个媒体播放应用
课题5 仿造一个标题栏（1）

语言：XAML

本节包含：
添加简单的控件
简单地修改控件的外观
排列控件

[backcolor=red]请从电脑的网页版浏览此教程。[/backcolor]

发送交互式通知：答案

10天之前，我在课时1.4里面留了一个任务。现在公布答案：

[mw_shl_code=csharp,true]var toastContent = new ToastContent()
{
Visual = new ToastVisual()
{
BindingGeneric = new ToastBindingGeneric()
{
Children =
{
new AdaptiveText()
{
Text = "点击此处开始播放。"
}
}
}
},
Actions = new ToastActionsCustom()
{
Buttons =
{
new ToastButton("开始", "start")
{
ActivationType = ToastActivationType.Background
},
new ToastButtonDismiss()
}
},
Audio = new ToastAudio()
{
Silent = true
},
ActivationType = ToastActivationType.Background
};

XmlDocument xml = toastContent.GetXml();[/mw_shl_code]

这里要留意Children和Buttons的写法，这种写法在Visual Studio里面是没有自动提醒的。

第一部分：仿造控件

你看了在课时1.4文末放的那张图片之后，可能会想：我应该怎么样把播放按钮放上去呢？微软有没有开放这个接口呢？

如果你真这么想，那么你根本就错了方向。事实上，整个标题栏都是"假的"，是仿造上去的，虽然看起来很真。除非放在标题栏的是个返回按钮，否则，如果要给标题栏其它的定制，都只能这么做。在XAML代码里面，我们首先要做的是先把按钮和文字仿制出来。

打开MainPage.xaml，可以发现微软已经预置了一段代码：
[mw_shl_code=xml,true]<Page
x:Class="MusicSampleforWfun.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MusicSampleforWfun"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<!--x:Class的值与xmlns:local的值可能与此处不同。-->

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

</Grid>
</Page>[/mw_shl_code]
这段代码很像XML，因此你可能感到很熟悉。其实它根本就是XML，只不过微软给它规定了一些更严格的写法。
有关这段代码前7行的意义，请见置顶UWP视频的第7集，此处不详述。这里只要知道这7行不能动就可以了。
我们发现，微软给我们预置了一个Grid。Grid通常用于划分网格区域。
我们现在Grid里面添加一个按钮吧。
[mw_shl_code=xml,true]<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button></Button>
</Grid>[/mw_shl_code]

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

图上只有一个很小的一个方块，这个就是一个按钮了。但是它和我们想象中的样子差距有点大，这是因为我们还没有设置它的内容。我们可以通过设置这个按钮的属性（Attribute）来设置它的内容。
[mw_shl_code=xml,true]<Button Content="Button"></Button>[/mw_shl_code]

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

这个按钮很接近我们经常看到的样子，但是离我们的目标还有差距。我们想要的是一个播放按钮。
在Segoe MDL2 Assets字体中，微软给了很多种图案给我们用。使用字体的优势在于，不论放到多大或缩到多小，都能保持清晰。
Segoe MDL2 Assets字体可以在 ***链接停止解析*** 找到。我们可以在这个页面查到左侧的图标、右侧的文字说明，以及中间以E开头的代码。
你可以找一个不一样的图标，在这里我用的是E768。
使用这些图标的方法，是把Content设为&#x+代码+英文分号，然后把FontFamily属性设置为Segoe MDL2 Assets。

[backcolor=rgb(255, 255, 255)]注：论坛的显示有问题，你可能不能正常看到Content的内容。[/backcolor]
[backcolor=rgb(255, 255, 255)][/backcolor]
[mw_shl_code=xml,true]<Button Content="" FontFamily="Segoe MDL2 Assets"></Button>[/mw_shl_code]

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

它的背景不是透明的，我们可以用Background改变它的背景。
[mw_shl_code=xml,true]<Button Content="" FontFamily="Segoe MDL2 Assets" Background="Transparent"></Button>[/mw_shl_code]

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

如果你真的试了这一段代码，你会发现，当鼠标指针移上去的时候，背景变回了老样子。
这看起来有点奇怪，但是还算可以接受。我们要了解一下标题栏的高度，以及右上角三个按钮的大小，好让仿制的标题栏看起来不要显得不协调。
标题栏的高度：32
右上角三个按钮的尺寸：每一个都是48x32
[mw_shl_code=xml,true]<Button Content="" FontFamily="Segoe MDL2 Assets" Background="Transparent" Width="48" Height="32"></Button>[/mw_shl_code]

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

现在这个按钮的大小看起来还挺真的。这个按钮算是完成了，先放到一边。我们要仿造一个文本框。
[mw_shl_code=xml,true]<TextBlock Text="音乐"/>[/mw_shl_code]

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

对比一下，字还是挺大的。可以用FontSize把字体缩小一点，设置为12。
[mw_shl_code=xml,true]<TextBlock Text="音乐" FontSize="12"/>[/mw_shl_code]

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

看起来已经很像了。大概可以了吧，我们接着往下一部分。

第二部分：排列控件

我们刚刚一直忽略了Grid这个部分。其实Grid有大用，我们可以把它分成一个个格子，把控件塞在各个格子中。
我们刚刚提到标题栏的高度是32，那么我们就可以从Grid里面分出一个32的格子来。
分出了一个格子，自然就要分出另一个格子（你能把一块蛋糕分成一块吗？），另一块格子就是“剩下的全部”。它的高度设为星号*。
[mw_shl_code=xml,true] <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--......-->
</Grid>[/mw_shl_code]
在这个Grid里面的控件，可以设置Grid.Row属性，设置它属于哪一个格子。要注意的是，编号是从0开始的。
[mw_shl_code=xml,true]<Button Grid.Row="0" Content="" FontFamily="Segoe MDL2 Assets" Background="Transparent" Width="48" Height="32"></Button>
<TextBlock Grid.Row="0" Text="音乐" FontSize="12"/>[/mw_shl_code]
如果不设置Grid.Row，它的默认值是0。因此可以不用写。
[mw_shl_code=xml,true]<Button Content="" FontFamily="Segoe MDL2 Assets" Background="Transparent" Width="48" Height="32"></Button>
<TextBlock Text="音乐" FontSize="12"/>[/mw_shl_code]
如果用上面两行代码替换<!--......-->，它们会叠在一起。为了将它们分开，有三个选择：
1. 在我们刚刚添加的</Grid.RowDefinitions>的下方，再添加<Grid.ColumnDefinitions>，把整个窗口分成四格。
2. 在Grid.Row="0"的位置再套一个Grid，并把这个Grid分成两格。这样从整体来看，这个窗口分为了三格。
3. StackPanel可以把各个控件严格地从上往下或者从左往右排列，只要设置Orientation属性为Horizontal或Vertical，然后把控件的代码像放进Grid一样放进去就可以。

效果如下：

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

你知道怎么做吗？

注：
1. 由于个人学业原因，本系列更新频率将不可逆转地下降，直至8月28日完全停止。（或许寒假可能会继续，但很难确定。）
2. 由于上一点原因，本节内容讲得很快，希望能尽快进入后端代码部分。置顶的UWP视频（第1至10集涵盖了本节内容）有助于你理解。

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