‫欢迎回来｡
‫在本视频中, 我们将深入了解zemo, 您可能希望举例说明zemo是一种XML语言,
‫如底部所示｡
‫实际上我会把它拖得更远｡
‫通过示例, 我们可以编写UI, 这样就无需将所有元素拖到UI中,
‫然后在其中进行调整｡
‫我们可以在代码中完成所有这些｡
‫现在你可能会说, 哦, 我更喜欢视觉｡
‫我想继续把东西拖进去, 我很好｡
‫好吧, 你可以这样做, 但你只能拖着走｡
‫通过示例, 您可以进行很多调整, 不仅可以调整上一个视频中看到的包装,
‫还可以进行更多调整, 我们将了解什么是数据绑定､ 什么是属性､
‫依赖属性等, 这些都是您可以通过示例进行的操作, 这些操作使我们能够创建非常出色的用户界面,
‫而且易于维护｡
‫首先, 你可以看到这个窗口｡
‫一般来说, 你有一个开始标记和一个结束标记.
‫如果您了解HTML, 那么您可能对它很熟悉｡
‫你有角大括号, 你有他们关闭以及｡
‫所以先用小于号, 然后用大于号.
‫你可以看到我们在窗户和这里也有同样的东西｡
‫然后一个结尾, 你也有斜杠就在这个词之前｡
‫这对于网格是一样的, 对于窗口, 对于其他任何东西｡
‫例如, 如果我想使用一个按钮, 我就可以这样做｡
‫如果我使用大于号, 它会自动创建结束标记｡
‫现在我可以做的是在开始标记内进行所有调整, 如您所见, 按钮, 我可以继续,
‫例如, 向其添加内容｡
‫所以有很多不同的属性, 正如你所看到的｡
‫我将使用content属性, 我将使用类似Click Me的内容｡
‫现在中间有个按钮, 你可以看到, 上面写着, 单击我｡
‫当然, 我们没有高度, 我们没有宽度｡
‫所有这些性质都还没有说｡
‫比如说, 我希望这个按钮的高度是50像素, 宽度是100像素, 正如你所看到的｡
‫现在, 这是我创建按钮
‫当然我可以把它拖进来, 但是做一个例子是相当有用的｡
‫现在怎么办？
‫一些我还没怎么接触过的东西｡
‫在本课程的后面部分才会用到｡
‫但通常你能看到的是X, L和S.
‫它代表XML命名空间, XAML代表可扩展应用程序标记语言｡
‫让我在这里补充一下｡
‫让我们添加一条评论｡
‫我会用这样的评论｡
‫如您所见, 这是绿色的, 这几乎是一个注释｡
‫所以我可以在这里写一些东西, 比如XAML是一种可扩展的应用程序标记语言｡
‫好吧, 我会的
‫如你所见, 按钮在这里｡
‫现在让我们继续用按钮做更多的事情｡
‫因此, 让我们创建一些额外的按钮｡
‫请继续并创建另一个按钮｡
‫好吧, 我会的
‫我希望你试过了｡
‫只需在此处使用按钮名称或关键字, 然后继续创建其他按钮｡
‫现在, 你可能会想, 哦——, 它的位置不正确｡
‫我有这个按钮, 它的内容是｡
‫你好啊｡
‫那现在为什么？
‫这个“单击我”按钮现在在哪里？
‫它在网格内, 但它消失了, 因为我们使用了网格, 这样按钮就不会出现在彼此的顶部,
‫等等｡
‫所以如果你试过了, 你已经看到了, 我们稍后也会研究网格｡
‫但我只是想让你看看｡
‫好吧, 我会的
‫所以我们再把那个按钮去掉｡
‫现在, 我们有了这个“单击我”按钮,
‫让我们运行应用程序, 这样我们就可以看到它在现实生活中的实际外观, 以及整个过程如何通过单击它来使我们的生活变得美好｡
‫如你所见, 我可以将鼠标悬停在它上面, 它会改变颜色, 我可以单击它,
‫它会发出这个小的单击动画, 就这样｡
‫但是当你点击它的时候什么也没有发生, 有多种方法来实现点击功能, 我们将在后面做｡
‫好吧, 我会的
‫这就是我们如何创建一个按钮的例子｡
‫现在, 我们可以在这里访问大量的其他元素或属性｡
‫例如, 我们可以访问字体大小属性, 并将字体大小增加到32｡
‫现在按钮的宽度不如文本的宽度, 所以让我们调整一下宽度｡
‫现在又恢复正常了, 我们可以看到按钮的整个文本｡
‫但是当你摆弄字体大小和所有那些元素时, 你必须小心它仍然适合｡
‫现在你还可以做的是, 你可以直接在按钮标记中添加内容,
‫而不是在这里添加内容属性｡
‫在这里, 我会说一些类似于“点击会议”的东西, 正如你所看到的, 它就在那里｡
‫这就是标签之间的内容, 也就是内容所在的位置｡
‫所以这是一种方法｡
‫另一种方法是在这里简单地使用content属性并像这样分配文本, 就像我们之前看到的那样｡
‫现在, 如果您像这样直接关闭按钮, 就不需要这个结束标记按钮,
‫这样您就可以像这样以更短的方式关闭它｡
‫因此, 您不需要关闭标签按钮｡
‫设计按钮的另一种方法如下｡
‫所以如果你看到类似的东西, 那也完全没问题｡
‫所以你创建了按钮, 标签, 结束和开始的一个, 在这里你有按钮点, 然后你可以继续,
‫并调整所有不同的属性, 你想｡
‫如您所见, 我们可以访问许多不同的属性, 例如,
‫字体大小｡
‫例如, 我可以将字体大小设置为72｡
‫我想调整的另一个按钮属性是内容｡
‫这样我就可以安心地躲在那里了｡
‫现在你可以看到这个巨大的按钮, 字体大小为72, 上面写着“嗨”｡
‫这就是第二种方法｡
‫你甚至还可以做一些其他的事情｡
‫让我们进一步调整这个按钮｡
‫所以我们说, 作为内容, 我不想只有一个文本, 嗨, 在那里｡
‫我想更进一步｡
‫我想增加一个代表小组｡
‫现在, 表示面板的作用是从左到右依次表示其所有控件或元素｡
‫所以第一个元素是, 比如说, 一个文本块｡
‫我们已经看到了它们是什么文本块？
‫一个简单的文本, 这一个是要说多｡
‫现在我需要另一个文本块和第三个｡
‫所以现在它说了三次multi｡
‫但现在我能做的是我可以调整每一个方面的颜色, 所以或每一个文本块｡
‫假设我把它变成蓝色, 那么这个就是前景｡
‫所以前景色是前景色的颜色, 这个是红色的｡
‫最后, 我的最后一个文本块将具白色的前景｡
‫现在不是多, 多, 多, 它说多色按钮｡
‫现在也许我们要稍微调整一下字体大小｡
‫我们把它弄小一点｡
‫此外, 第一个按钮, 如您所见, 它是隐藏的, 因为网格只显示最后一个元素｡
‫如果它们没有被分配到正确的网格结构中, 我们稍后会看到, 但是让我们去掉第一个按钮｡
‫现在, 我们还要设置按钮大小｡
‫我们继续使用按钮点宽度, 比如说200｡
‫还有一个高度为100的按钮｡
‫就像这样｡
‫我们就这样了｡
‫而且字体太大了, 放不下所有的东西｡
‫所以如果我们继续用24来做, 现在它在里面了｡
‫所以如果我运行代码, 我会有一个多色按钮, 其中有多个不同的文本块｡
‫就这样
‫正如你所看到的, 有多种不同的方法来做这件事｡
‫如果您想将多个方面包装到其中, 那么您可以使用此表示面板｡
‫您甚至可以在按钮内使用网格并使用grid标记, 以便在按钮内创建多个不同的控件｡
‫但这是我们稍后将讨论的内容｡
‫现在, 你得明白｡
‫这个例子让你可以用你的目标做很多花哨的事情, 而不需要拖放,
‫并且还可以完全控制事情的外观和它们的功能｡
‫现在, 我要把它注释掉, 然后我会告诉你们如何做,
‫和我们在代码中看到的一样, 因为我们已经在示例代码中看到了,
‫但是我们也可以在代码后做, 也就是说用C语言, 这是我们目前为止, 在整个课程中学到的.
‫让我们来看看后面的代码｡
‫如您所见, 这里有一个点示例文件,
‫这就是我们在这里打开的文件, XML和每个示例文件的主窗口都有一个代码隐藏文件, 这是一个点示例点CSS文件,
‫而这个文件是一个C-sharp文件, 这意味着我们在这里有一个C sharp分部类, 我们现在可以使用它来调整或创建我们的UI｡
‫如您所见, 它被称为主窗口, 它继承自窗口
‫在这里, 我们有一个名为Main Window的方法, 它类似于我们到目前为止看到的控制台应用程序中的main方法｡
‫只要打开窗口或启动应用程序, 就会调用此函数｡
‫如您所见, 这里有一个名为initialize的组件, 它只是初始化窗口运行所需的其他所有内容｡
‫例如, 它初始化这个标题, 初始化大小等等｡
‫现在我们可以在这里编写自己的代码了｡
‫所以我将首先向您展示如何创建一个按钮｡
‫首先, 我们需要一个网格, 在其中分配按钮｡
‫所以我把它叫做网格, 这是一个新的网格｡
‫然后我将其内容设置为我的网格, 它将像我简单说的那样, 主窗口｡
‫它应该有一些内容, 就像我们在示例文件中看到的那样｡
‫所以这个标签打开了, 在开始和结束标签之间的所有东西都是我的, 几乎所有的内容｡
‫这是我窗口的内容｡
‫我在这里说的是这个点的内容应该是网格｡
‫因此, 我们创建了一个新的网格, 如图所示｡
‫我们这里也有一个网格, 它是这个网格的开始和结束标记｡
‫我将其设置为它的内容, 现在我可以向此网格添加内容｡
‫例如, 我可以在网格中添加一个按钮｡
‫首先, 我们创建一个按钮, 我称之为BTN, 它是一个新的按钮｡
‫现在我有了那个按钮, 我可以调整它的属性｡
‫假设我想设置按钮的字体大小, 我可以简单地这样做｡
‫我可以简单地说, 它将是类似26｡
‫现在, 在我们的按钮中, 正如您在这里看到的, 我们有一个包装面板, 这是按钮的内容｡
‫我现在要做的是创建一个包装面板｡
‫包装面板, 我将称之为包装面板, 这将是一个新的包装面板｡
‫现在, 我们可以向环绕面板添加内容｡
‫我们将wrap面板添加到按钮, 并将bat按钮添加到网格｡
‫网格已经是我们内容的一部分｡
‫现在, 让我们继续创建要添加到包装面板的所有内容, 并将其添加到包装面板｡
‫所以我们首先需要文本块｡
‫而文本块, 正如你在这里看到的, 就是这个｡
‫因此, 我们创建1到3个文本块｡
‫第一个是新的文本块, 我简单地说, 点文本｡
‫所以它有一个text属性, 这里的text, 就是内容｡
‫因此, 对于按钮, 内容称为内容, 而对于文本块, 文本本身称为文本｡
‫因此, 我们访问文本块的text属性, 并将其设置为multi, 然后设置颜色｡
‫因此, 文本点前景将是画笔的想法, 哪种颜色, 我有第一次为多它是蓝色｡
‫好的, 我把它变成蓝色, 你可以看到, 画笔, 文本是用画笔来完成的,
‫所以文本的颜色是用画笔类来完成的.
‫所以我需要用这个笔刷作为类, 然后访问它的颜色｡
‫所以纯色画笔的类型画笔｡
‫接下来, 我可以将其添加到包装面板｡
‫现在我有了文本, 我可以将其添加到换行面板中, 方法是以子对象的身份访问并将文本添加到其中｡
‫这就是我添加一个文本块的方法, 如果我们什么都不运行, 我们还看不到任何东西, 因为我们还没有将红色面板添加到按钮,
‫也没有将按钮添加到网格｡
‫但我们马上就做｡
‫让我们继续调整文本, 或者实际上再次调整这三个部分｡
‫接下来我们要做的是将文本调整为多色, 最后一个是按钮, 现在我们有了红色和白色｡
‫所以我只是复制粘贴了这三行因为它们是一样的｡
‫我不需要每次添加旧的文本块并进行调整时都创建新的文本块｡
‫或调整其值｡
‫然后再次将其添加到参考面板｡
‫现在, 代表面板中有三条文本, 我现在可以添加代表面板｡
‫到我的纽扣上｡
‫这个按钮内容就是我包装面板
‫最后再将网格点与儿童点相加｡
‫在这里我添加了我的按钮｡
‫这就是我说的｡
‫我们有网格, 有按钮, 有包装面板｡
‫现在, 我们将这些文本添加到红色面板中｡
‫我们将红色面板添加到按钮, 将按钮添加到网格, 并将网格添加到窗口｡
‫正如你所看到的, 这就是你如何用代码做到这一点｡
‫在我们运行代码之前, 我需要做的实际上是注释掉网格｡
‫所以我｡
‫实际上只能有窗户｡
‫因此, 主窗口中只有窗口｡
‫XML文件和所有其他代码都在zamalek的主窗口中, 这是后面的代码｡
‫这个文件是我们主窗口XAML的代码｡
‫在我们测试之前, 还缺少一件事, 那就是我为我的文本分配了一个新的文本块｡
‫所以我的两条短信都要这么做｡
‫因此, 我们在这里创建了文本,
‫并使用新的文本块对其进行初始化, 现在我们需要创建一个新的文本块, 并将其分配给文本, 然后才能将其添加到换行面板｡
‫现在我们有了它, 可以运行代码了｡
‫我们会看到我们也有多色按钮｡
‫正如你所看到的, 我们已经做了同样的事情, 我们已经做了之前与Zemo, 这是这里,
‫它也看起来非常简单和整洁｡
‫我们是用升C调的代码做的｡
‫现在你可以走你喜欢的路, 但我们将主要与zemo工作｡
‫我只是想向您展示, 无论您使用XAML做什么, 您也可以使用代码隐藏,
‫但有时使用代码隐藏会更有意义｡
‫例如, 如果你想动态地调整某些东西, 那么代码隐藏就更有意义｡
‫因此, 当您使用静态用户界面时, 使用C
‫sharp运行它或使用C-sharp和Zemo进行调整会更有意义｡
‫顺便说一句, 每当您创建这个XAML文件时, 它所做的就是继续创建这个代码隐藏文件｡
‫因此, 它只是创建此代码, 并在应用程序开始运行时运行它｡
‫一旦调用了我们的主窗口｡
‫反正已经结束了｡
‫我们可以使用XAML这样做, 也可以通过创建代码手动完成｡
‫所以你当然可以说, 嘿, 有一些东西, 比如宽度和边, 你还没有设定｡
‫在这里我可以很容易地做到｡
‫例如, 我可以简单地说button that width, 然后将其设置为150, button that height,
‫然后将其设置为100｡
‫然后按钮将相应地调整｡
‫如你所见, 它分布在两条线上｡
‫好吧, 我会的
‫这就是Zemo和代码背后的代码｡
‫我知道这是一个很长的视频, 但我们将看到更多的花式酷WPF的东西在下一个视频｡
‫那到时见｡