‫欢迎回来｡
‫在本视频中, 我想谈谈属性数据和事件触发器, 因为当您需要在移动中调整时,
‫它们非常重要｡
‫所以在这种情况下, 我将调整这里的文本｡
‫所以当我在它上面的时候, 我把鼠标悬停在它上面, 文本就会改变它的颜色和外观｡
‫然后这个｡
‫你好, 伙计｡
‫如你所见, 它的尺寸, 它的方式了｡
‫这就像是一个动画｡
‫然后我们有一个复选框, 这里有人在那里, 这个文本说没有, 我只是要点击它, 它说,
‫哦, 当然有人在那里, 所以是我｡
‫是的, 我可以点击它｡
‫这些就是我们将在本视频中介绍的内容,
‫您可以让您的用户界面总体上非常整洁, 因为它可以动态调整, 可以给予增强的用户体验或创建增强的用户体验｡
‫因此, 让我们继续并在此处创建一个新项目｡
‫我将调用WPA 14 C, 它是属性数据和事件触发器｡
‫我有一个网格和堆栈面板的组合｡
‫我将从堆栈面板开始｡
‫像这样堆叠面板｡
‫在“堆栈”面板中, 我有一个网格｡
‫在这里我有一个文本块, 上面写着“你好, 亲爱的世界”或“亲爱的世界”｡
‫然后我有一个字体大小｡
‫我将其设置为32｡
‫我想把这个放在中间｡
‫所以我会说中心, 垂直方向也应该是中心｡
‫所以我会说在下一行, 垂直对齐也会居中, 我会像这样结束它｡
‫我们就这样了｡
‫这是我们的文本“心爱的世界”, 我将稍微放大它的大小, XAML文件｡
‫在这里的文本块中, 我可以继续更改, 例如, 样式｡
‫我可以做很多很多的事情, 我需要有一个风格, 以便使用风格触发器｡
‫因此, 我将添加一个文本块点样式, 以允许我创建样式｡
‫例如, 我需要在这里添加一个目标类型, 它将成为我们的文本块｡
‫在这个样式中, 我可以添加一个setter和样式触发器｡
‫所以首先, 我需要一个setter, 它将是属性的前台｡
‫所以我想设置前景, 我想改变前景, 我想把它变成绿色｡
‫所以它会将值设置为绿色｡
‫之后, 我希望有触发器, 可以真正做到这一点, 因为现在它只是绿色｡
‫但我希望这个被触发, 我用样式点触发器来实现｡
‫现在, 在style triggers标记中, 我可以创建不同的触发器,
‫我只需要将鼠标悬停在一个触发器上即可｡
‫因此, 该触发器的属性是鼠标悬停｡
‫每当我们将鼠标悬停在文本上时, 我希望执行该触发器, 并将其值设置为true｡
‫有个大写的T｡
‫因此, 在该触发器标记中, 我可以创建setter, 这将是通常应该更改的内容｡
‫假设现在我有一个绿色的文本, 当我悬停在它上面时, 我希望它是红色的｡
‫因此setter会将属性设置为foreground或将属性foreground的值设置为red｡
‫所以每当我把鼠标悬停在它上面或者我的鼠标停在上面的时候, 这个触发器就会被执行,
‫它的所有setter也会被触发或者执行｡
‫下一个我想添加的setter是setter属性｡
‫这里是文本声明, 我想把它的值设为underline｡
‫好了, 我们关闭这个setter, 看看触发器是否工作.
‫所以这只是一条短信, 对吗？
‫现在让我们更深入地看看代码｡
‫所以我们有了这个网格｡
‫它位于堆栈面板中｡
‫这里有一个文本块｡
‫这就是我们在这里看到的文字, 这个你好, 亲爱的世界｡
‫它有字体大小并且居中｡
‫这就是文本块的一般属性｡
‫但是现在我调整了文本块的样式, 这样我就可以在这里添加一些样式组件了｡
‫我使用了这个样式标签, 我说这个样式的目标类型应该是文本块本身, 因为它可以是文本块中的组件,
‫但现在这样做太过分了｡
‫但总的来说, 我们这里有设定器, 它设定风格｡
‫所以这是直接完成的事情, 对吗？
‫我们不需要触发它｡
‫但是, 我们可以添加样式触发器, 其中包含一个触发器, 然后设置的东西, 我们需要指定什么属性,
‫以触发这个触发器应该是｡
‫最多也就这样结束了｡
‫当它为真时, 我想执行setter语句,
‫它只会说, 好的, 我想把属性foreground的值改为red, 我想把属性text声明的值改为underline.
‫如果你愿意的话, 你可以在这里添加多个不同的setter, 每当这个setter被执行时, 它就会被触发,
‫如果鼠标移过为真, 它就会被执行.
‫让我们运行代码, 看看它是如何工作的, 这样我们就有了它｡
‫你好, 亲爱的世界｡
‫我在它上面盘旋｡
‫如您所见, 文本装饰位于行上｡
‫因此, 文本带有下划线, 前景值为红色｡
‫所以这个颜色是从绿色变成红色的｡
‫好吧, 我会的
‫因此, 这就是您可以简单地继续使用样式触发器或一般触发器的方法｡
‫你还可以看到, 当这个值返回到false时, 它又回到了原来的值｡
‫所以下划线和阅读不再是真的了｡
‫所以他们只是回到它的原始值, 这是绿色的前景和下划线是错误的或假的｡
‫因此, 文本声明没有下划线｡
‫现在, 让我们继续创建另一个文本块, 它将位于一个唯一的网格中｡
‫所以我想有多个网格在彼此的顶部｡
‫我本来可以使用不同的包装器, 但我只打算在这里和那里使用Grid｡
‫我又遇到了一个文本块, 这次它应该是这样的：你好, 伙计, 你好, 伙计｡
‫现在, 我将字体大小设置为24字体大小, 它将是24｡
‫然后, 我希望这是中心对齐, 以及为水平和垂直对齐｡
‫然后, 应设置此文本块的样式｡
‫因此, 我将在这里设置多个样式｡
‫首先, 我想在这里和那里添加文本块样式标记｡
‫我将添加一个样式｡
‫它将再次成为文本块的目标类型｡
‫在这里我可以创建事件触发器｡
‫所以你已经看到了风格触发器, 它只是一个触发器｡
‫但现在我想运行一个事件触发器, 这将有点不同｡
‫我们先创建一个样式, triggers, 从triggers标签开始, 在这里我想创建一个事件触发器,
‫当根事件为true时, 该事件将被执行, 事件的规则为鼠标输入｡
‫因此, 每当我们用鼠标输入这个文本块时, 它就会被触发｡
‫所以这和我们在这里看到的差不多｡
‫这个属性被鼠标器移过了吗？
‫但我们没有使用触发器｡
‫我们用的是事件触发器｡
‫你马上就会看到不同之处｡
‫现在, 在该事件触发器中, 我可以创建一个事件触发器操作或多个操作｡
‫我有了另一个标记, 在这里我可以创建所有不同的操作, 当这个事件触发器被触发时,
‫我想运行这些操作｡
‫无论何时用鼠标输入, 我们都要创建一个事件触发器动作, 就像这样｡
‫开始情节提要｡
‫所以我们需要这个标签, 开始故事板｡
‫然后, 我们创建一个故事板, 在故事板中, 我们现在可以做动画｡
‫因此, 双重动画将是一个在特定持续时间内运行的联合动画｡
‫这里我们用0表示小时, 0分, 0秒和500毫秒.
‫所以在500毫秒的时间内, 我希望这个被执行｡
‫所以这个动画要运行, 然后我想改变字体大小｡
‫但是现在为了改变字体大小, 我需要使用故事板的点目标属性｡
‫所以它与我们在这里看到的setter属性非常相似, 我们在这里更改了文本装饰, 并将其设置为下划线｡
‫现在我们需要在这里使用这种方法, 即故事板､ 目标､ 属性｡
‫在这里我可以说我想改变的属性｡
‫所以我也想改变字体大小｡
‫现在我可以指定值了｡
‫这里有一个2属性, 我把它的值设为72.
‫这就是我们在这里运行的双动画｡
‫所以这和我们在这里看到的很相似｡
‫只有值或名称不同｡
‫所以这是一个属性, 但现在它是一个故事板目标属性｡
‫然后是下划线的值, 但现在需要更改的是两个关键字或两个属性｡
‫这就是我们如何创建这个将要运行的小动画｡
‫现在让我们启动代码, 看看发生了什么｡
‫是的｡
‫你好, 伙计｡
‫就这样
‫正如你现在所看到的, 它很大, 而且不回去｡
‫哦, 来吧, 回到正常的大小和｡
‫它不关心我想要什么, 因为我还没有实现它.
‫所以现在对你来说是一个小小的挑战｡
‫请添加另一个｡
‫他去了这里, 这将做到这一点｡
‫因此添加一个事件触发器｡
‫只是稍稍有了一点暗示｡
‫你不需要再做一次了｡
‫您只需要创建或重新生成此代码｡
‫因此, 请继续添加功能｡
‫所以当鼠标离开这个文本块时, 文本会回到原来的大小, 也就是24,
‫这个过程应该持续300毫秒｡
‫所以请继续尝试｡
‫好吧, 我会的
‫我希望你做到了
‫我将复制该事件触发器｡
‫我会把它贴在下面｡
‫我将输入mouse leaf来代替mouse enter｡
‫持续时间应为300毫秒, 字体大小应设置为值24｡
‫就是这样｡
‫这就是我需要的事件触发器, 以便在鼠标离开文本块时返回｡
‫让我们再测试一次｡
‫我们到了｡
‫你好, 伙计｡
‫现在让我离开它｡
‫然后它又回来了, 而且回来得比开始还快｡
‫对不对？
‫所以一个是文本输入, 或者鼠标输入是500毫秒, 鼠标离开是300毫秒｡
‫所以你可以在这里做一些很酷的事件, 正如你所看到的, 它甚至会在运行中做出反应｡
‫所以它可以直接返回, 这很酷｡
‫好的, 这些是事件触发器｡
‫您已经看到了类型为trigger的样式触发器, 然后您还看到了类型为event trigger的样式触发器｡
‫现在还有一件事, 我想添加一个复选框, 下面有一个小文本, 这将是调整｡
‫所以这个会用到绑定, 数据绑定｡
‫我们以前见过数据绑定, 它应该在堆栈面板中, 而不是在网格中｡
‫因为我想把两件事叠加起来｡
‫我想将复选框堆叠在文本块的顶部｡
‫因此, 在Stack面板中, 我创建了一个复选框, 其名称应为KB｡
‫您好, KB代表CheckBox｡
‫那么复选框的内容应该是这样的有人在那里吗？
‫问号｡
‫现在堆栈面板实际上让我对齐它, 所以水平对齐它, 垂直对齐它｡
‫所以垂直对齐中心为好｡
‫好吧, 我会的
‫所以现在这个复选框应该会触发一些东西, 它应该会改变我们的教科书｡
‫所以我们需要一个文本块, 我也要水平对齐它｡
‫让我将文本块居中｡
‫然后, 我会将文本块的字体大小设置为36, 这样它在文本块中就足够大了｡
‫我想改变它的风格｡
‫这是我们在高层已经看到的｡
‫因此, 我们使用此文本块样式和样式目标类型, 并指定目标类型｡
‫所以我在这里做同样的事情, 然后创建文本块点样式, 在这里我创建一个样式标记和样式目标类型｡
‫所以我的目标是我的文本块｡
‫所以我想更改文本块｡
‫我该怎么做呢？
‫嗯, 我的二传手｡
‫所以我打算马上开始｡
‫这一次的触发器将是数据, 数据驱动触发器, 而不是事件驱动触发器, 正如我们在这里看到的｡
‫事件触发器等等｡
‫但现在它是一个数据驱动的触发器｡
‫所以setter的属性是text的属性.
‫我想把文本的值改成no.
‫现在我将在它的底部有另一个二传手在底部｡
‫所以这个函数会改变名为foreground的属性｡
‫所以它应该只是将颜色更改为红色的值｡
‫现在马上就要执行了, 对吧？
‫所以我们有风格, 我们还没有任何触发器｡
‫所以这就定了｡
‫我们本可以做同样的事｡
‫我们可以在文本块级别设置文本｡
‫我们可以在文本块级别使用红色的值｡
‫好吧, 我会的
‫但我只想向你们展示这是一种替代方法, 这将帮助你们做下面的事情｡
‫所以在这种情况下, 我需要一个样式点触发器｡
‫所以我需要有style triggers标签｡
‫现在我在这里创建一个数据触发器｡
‫如您所见, 我们使用了基于属性的普通触发器｡
‫然后是事件驱动触发器, 它是一个被执行的根事件｡
‫所以这几乎是一样的事情｡
‫但在这种情况下, 你知道, 它是一个鼠标悬停和鼠标进入｡
‫但在这种情况下, 它是一个属性, 是触发它｡
‫在这种情况下, 它是一个实际的事件, 现在它将是数据｡
‫你可以看到三种不同类型的触发器｡
‫因此, 这个数据触发器也将设置一些内容｡
‫但是现在为了运行触发器, 我需要在本例中使用绑定｡
‫所以我将绑定名为CB的元素｡
‫你好, 这是我们的复选框和CB你好｡
‫的路径应该是checked, 所以我将检查它的checked值和｡
‫我将把这个值设置为true｡
‫现在, 如果我｡
‫选中该复选框｡
‫好吧, 应该执行一些setter, 所以应该执行具有text属性的setter, 并且应该将它的值设置为类似这样的值｡
‫当然可以了｡
‫现在, 我想添加的下一个扇区将具有前景属性｡
‫所以它会把foreground属性的值改为绿色, 就这样.
‫这就是我们的数据触发器｡
‫让我们继续运行它｡
‫我们就这样了｡
‫我们有两个触发器, 它们基于鼠标悬停或根事件｡
‫如果我勾选了那个复选框, 我们就开始吧｡
‫轰｡
‫上面写着, 当然｡
‫所以你看, 我们的复选框现在触发了这个, 这不是事件｡
‫所以这不是检查事件｡
‫它是基于它背后的数据｡
‫因此, 我们绑定到KB的is checked值｡
‫你好, 我是
‫我们这里的复选框也是如此｡
‫所以就像我说的, 这很重要, 对吧？
‫所以你可以对一个事件做同样的事情, 只要我们选中它就会触发,
‫因为你知道选中或被选中可以启动一个事件｡
‫所以支票换了还是什么的, 对吧？
‫所以这次我们是基于数据来做的｡
‫所以每当我按下它, 它就会被执行｡
‫好吧, 我会的
‫因此, 这是三种不同类型的触发器, 以及在UI中执行一些非常酷的更改的不同类型｡
‫好极了｡
‫我希望你能理解这一切｡
‫我建议尝试一些额外的数据触发器｡
‫看看有没有短信｡
‫所以如果有人输入了一个特定的文本, 那么就应该改变一些东西或者类似的东西｡
‫因此, 您可以使用XAML做很多事情, 而不必接触后面的代码, 这非常酷｡
‫好吧, 太好了｡
‫下一段视频再见｡