查看: 882|回复: 3

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

[复制链接]

签到天数: 299 天

连续签到: 1 天

[LV.8]以坛为家I

163

主题

5829

积分

484

支持

微软核心粉丝

发表于 2017-7-30 13:46:09 | 显示全部楼层 |阅读模式
专题一 开发一个媒体播放应用
课题7 仿造一个标题栏(3)

语言:XAML

本节包含:
XAML控件之间的数据绑定
样式的使用

请从电脑的网页版浏览此教程

首先,我们先做一个这样的界面:

屏幕截图(9).png

这个界面中,左上角有一个播放键,右下角也有一个播放键。它们被计划将会在适合的窗口大小显示一组,而隐藏另一组。
这两个按钮的XAML代码分别是:
(整个xaml文件的代码就不贴了,自己写,我相信这应该不成问题。如果有问题,请先看置顶UWP视频的1至16集。)
[XML] 纯文本查看 复制代码
<Button Content="" Background="Transparent" FontFamily="Segoe MDL2 Assets" Height="32" Width="48"></Button>

[XML] 纯文本查看 复制代码
<Button Content="" Background="Transparent" FontFamily="Segoe MDL2 Assets" Height="48" Width="48"></Button>

可以看到这两行的代码几乎是一样的。在写程序的时候,如果发现有一些重复的代码,通常的习惯是找个方法只写一个。下面,介绍第一种方法:数据绑定。

XAML控件间的数据绑定

上节课讲到,在XAML代码里面给控件取一个名字,就可以在C#代码里面找到它们。在XAML代码之间也是如此。

[XML] 纯文本查看 复制代码
<Button x:Name="PlayTitleButton" Content="" Background="Transparent" FontFamily="Segoe MDL2 Assets" Height="32" Width="48"></Button>

[XML] 纯文本查看 复制代码
<Button x:Name="PlayButton" Content="" Background="Transparent" FontFamily="Segoe MDL2 Assets" Height="48" Width="48"></Button>


接下来,我们要修改一个按钮的相应属性,让它“链接到”另一个按钮的相应属性。

[XML] 纯文本查看 复制代码
<Button x:Name="PlayTitleButton"
        Content="{x:Bind PlayButton.Content}"
        Background="{x:Bind PlayButton.Background}"
        FontFamily="{x:Bind PlayButton.FontFamily}"
        Height="32"
        Width="{x:Bind PlayButton.Width}"></Button>


这样,标题栏上的按钮的内容就“链接到”底部的按钮了。使用这一行代码,其实和原来的代码效果是一样的。但从编程的角度看,如果日后需要更改代码,只需要更改一次而不是两次。

但是,使用x:Bind有一点需要注意。它有三种绑定模式:第一种是初始化页面时绑定一次,然后两者互相独立,不再关联;第二种是单向绑定,在本例中,表示PlayButton的Content改变了,PlayTitleButton的Content随之改变,但不能反过来;第三种是双向绑定。默认的模式是一次绑定。如果要改变模式,示例如下:

[XML] 纯文本查看 复制代码
<Button x:Name="PlayTitleButton"
        Content="{x:Bind PlayButton.Content, Mode=OneWay}"
        Background="{x:Bind PlayButton.Background, Mode=TwoWay}"
        FontFamily="{x:Bind PlayButton.FontFamily, Mode=OneTime}"
        Height="32"
        Width="{x:Bind PlayButton.Width}"></Button>


我们的这个播放按钮有可能随时变成暂停按钮,我们当然希望两者是一起改变的。我们有几种选择:可以在以后写C#代码的时候不厌其烦地把几乎一样的代码写两次;也可以用x:Bind单向绑定,记住我们要改变哪一个按钮;也可以用双向绑定,之后随便改变一个按钮。(其实还有一种解决方案,就是写四个按钮,两个播放、两个暂停,然后控制Visibility。)当然,我们要选择最优的那一个,正如在1.4里面我们要选择一个最优的发送通知的方案。双向绑定的性能弱于单向绑定,单向绑定的性能又弱于一次绑定。因此,重复写两行代码的性能高于记住写哪一行代码的性能,而后者又高于随便写一行代码的性能。在代码的简化与性能的提升之间,你选择哪一个?

样式的使用

当然,几乎没有人这么用数据绑定,因为有更好的解决方案,就是用样式(Style)。它可以一次改变一个控件的多种属性。

用法:

[XML] 纯文本查看 复制代码
            <Button x:Name="PlayTitleButton" Height="32">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Content" Value=""/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
                        <Setter Property="Width" Value="48"/>
                    </Style>
                </Button.Style>
            </Button>

[XML] 纯文本查看 复制代码
            <Button x:Name="PlayButton" Grid.Column="1" Height="48">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Content" Value=""/>
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
                        <Setter Property="Width" Value="48"/>
                    </Style>
                </Button.Style>
            </Button>

看起来,Style的写法简直是多余、啰嗦,本来在属性里面可以搞定的事情,非要用一个个Setter,还要指定TargetType,还要反复地写“Property=”、“Value=”,一点都不好用。当然,这种写法肯定是不好用的,但是,Style的优势在于一次改变多种属性。我们刚刚学了数据绑定,那么,其中一个按钮就可以大量地简化代码:
[XML] 纯文本查看 复制代码
<Button x:Name="PlayTitleButton" Height="32" Style="{x:Bind PlayButton.Style}"></Button>

虽然一个按钮的代码看起来令人舒心,但是另外一个按钮的代码却叫人直摇头。确实如此,因为这确实也不是Style的常用用法。通常,它放在Resources中。这样,两个按钮的代码都变得非常简单,而至于冗长的Style代码,则可以扔到Resources里面,收起来,眼不见为净。

下节预告

下节课,我们将会学习资源字典的使用。资源字典不仅能够存放Style,而且能够放很多别的东西。我之前计划在1.5里面就开始选学板块(亚克力),然而到现在也没有开。从1.8开始,将正式开始选学板块。当然,还在正式版的同学,是有替代方案的,这一部分不能跳过。

控件的属性中,除了一些非常简单的Content,Background,Foreground之外,还有一个很重要的,就是Template。之所以在之前没有讲,是因为它通常在Style中设置。在上节课中,我们讲过那个标题栏的按钮实在“不像话”,鼠标指上去有外边框,按下还有三维旋转效果,不像标题栏应有的样子。这些问题,将在Template里面解决。同时,它还将与资源字典结合,解决播放按钮与右上角的三大键的风格统一问题。

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

投票已经结束

87.50% (7)
12.50% (1)
您所在的用户组没有投票权限

签到天数: 193 天

连续签到: 5 天

[LV.7]常住居民III

67

主题

1639

积分

28

支持

发表于 2017-7-30 15:39:57 来自手机 | 显示全部楼层
吊死在8.0{Binding}时代的过来签个到

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

签到天数: 706 天

连续签到: 6 天

[LV.9]以坛为家II

54

主题

3199

积分

164

支持

发表于 2017-7-31 00:03:21 来自手机 | 显示全部楼层
点错了。。。手残。
来自:68861B8 WIN10 PC版客户端
[你知道吗]:

签到天数: 621 天

连续签到: 30 天

[LV.9]以坛为家II

22

主题

1553

积分

283

支持

发表于 2017-7-31 02:47:19 来自手机 | 显示全部楼层
顶一个,有时间好好看看

来自:Lumia 950 XL Win10旗舰-智机社区客户端
您需要登录后才可以回帖 登录 | 注册

本版积分规则

         

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

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

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