wpf textblock 样式设置

今天这一章呢，我们来讲解一下 wp f 当中的一个布局和空间啊，那这是 wpf 当中呢非常重要的一节啊，那也是非常简单的一节啊，可也可能有很多朋友啊，就跪在这一节啊，导致他无法进行后面的学习啊， 那其实主要的原因呢，还是因为这个太枯燥的原因导致的啊，那么我可以告诉大家的，就是呢，我们后面设计开发呢，各种复杂的用户见面的时候呢，那么第一步啊，就是我们今天要讲的是这个布局 啊，因为这个布局他很简单啊，所以今天我会给大家简单的过一下啊，因为如果讲的太复杂的话，我怕你们都受不了， 那可以提前告诉大家的，就是呢啊，你们学会了这些内容啊，像我们这个这个后面看到一些这种复杂的界面呢，我们都可以易落反感的做出来，就比如说我们点开随便一个啊，可以看到这种炫 用过的啊，界面呢，我们 wp f 啊都可以轻松的一个解决，这里有很多啊，那后面的学完一个阶段之后呢，我会再带着大家啊，做一些这种界面啊，来锻炼一下大家对这个布局啊 啊，容器还有空间的一些熟练度啊啊，这样呢，我们在后面的开发当中啊，我们就可以啊，游刃有余的啊啊，进行开发各种复杂的一个用户界面啊，那么我们就今天进入这个主题啊， 今天的内容主要有三个部分呢，也就是说啊，我们会讲到一些常用的布局属性，还有常用的布局容器，包括我们那个常用的一些 空间，他们的一个空间结构啊，首先呢我们来介绍一下常用的布局属性啊，那常用的布局属性呢，对于我们这个布局系统，无论是说还有元素来说啊， 他们能用到这些属性都是我们啊用的非常多的一些基础的属性我都列出来了啊，主要是一些设置一些元素或者容器的一个水平位置或者垂直位置啊，包括他的编剧啊，还有长宽，还有最大长宽和最小长宽，包括一些 元素内的一些内编剧啊，像这种常用的属性我们列出来啊，因为很多啊，新能玩家啊， 他们看到这个按钮里面啊，他有各种各样的属性，就我们随便敲一下，这里很多啊，大家不必为这么烦恼啊，大家需要先掌握这些啊， 我们常用的属性即可啊，像那种复杂的一些属性呢，我们到后面的开发当中啊，慢慢的接触呢，他就会啊逐渐的熟悉啊。那我们今天就首先来介绍一下啊常用的一些布局容器，那这里呢我列举了五种 布局容器啊，也就是我们非常常用的一个布局容器。那首先呢我们来介绍第一个国内的啊，那国内的呢啊，作为这个啊， wp f 当中啊，最常用的一个布局容器啊啊，主要是负责我们这个整体的一个框架当中的一个页面布局啊，他可以把有限的空间啊，切割成多 多行或者多列啊，那多行多列呢，我们可以进行一个啊，固定按比例，或者是说自动的一个设置的一个 啊长宽来进行我们界面的一个动态布局啊，就比如说我们现在想要给这个界面啊来一个两行两列，这个时候我们就可以创建啊对应的两行两列。 首先呢我们这里已经创建了两行，那这里呢我们就可以通过他他列啊直接写出两列出来啊， 那我们啊默认不给这个每一列啊显示的指定他的一个长宽啊，长 高或者宽的时候呢，他会自动的均分当前整个容器的一个空间啊，我们可以看到这里有四个大小相等的一个矩形， 如果我们呢去显示的指定啊某一行的高度，比如说我们指定为四十的时候呢，那么另外一行就会填充剩余容器的空间 啊，包括这个裂也是啊，我们裂的话我们就指定为这个宽，那比如说我们指定四十，那可以注意到这个龙这个界面的容器呢，就是 被划分了四个区域啊啊，你看这里面有四个啊啊大小不等的一个格子，那我们可以让这个鼓励的呢显示一些线条出来，这个时候我们就可以啊 看到当前的一个页面的一个啊布局的一个状态啊，容器的一个状态啊有四个格子。这个时候呢是因为我们这个两行两列啊指定了这个宽高啊， 从而导致他现在效果。那我们这个其实也可以删掉啊，删掉之后他就会把这个默认的空间啊来进行一个均分， 这是一个国内的容器，他穿着这个容器之后，比如说我们非常常见的例子啊，比如说我们打开这个搜索引擎，我们搜索一下微软啊， 那微软的图标呢，他就有四个这种方格组成。像我们呢其实可以用一个取色器把它四个颜色拿出来，我们来这个给这四个格子啊，创建四个对应的一个空间， 比如说我们给他一个这个颜色啊，这个时候呢啊，另外一个格子呢，我们取下另外一个格子的颜色啊，我们取下来之后再创建一个边框啊，我们这个颜色只定为这个颜色，然后呢我们把它放到第一点啊，古瑞的 点开了，对吧？设置为第一列， 这个时候就他就到第一列了，然后呢我们再复制两条， 分别把他的颜色拿过来，我们要啊指定他的一个位置啊， 因为默认呢，我们创建的一个容器啊，他会在第一行第一列啊，除非我们显示的去给他指定这个行或者列啊，他就会到对应的位置，比如说我们这里 指定呢他是第一行啊，因为他这个是第一列，所以他就会走到这里来啊，因为这个是默认的，我们也可以显示的去写他啊，默认的话他会是默认的林 是这个意思。然后呢这里我们也需要指定一下啊，第一行啊，我们给他一个颜色啊，这个时候我们来给他一个颜色 啊，这个时候我们就写好了一个这样的，一个给他一个八百，这个是 就像一个正方形，对吧？然后呢我们啊为了给他营造出这种有编剧的一个图标，这个时候我们就给每一个啊编框，给他加一点编剧啊，这个就是一个外编剧啊，加完之后呢，我们就可以看到他这里其实有一个编 根据了，对吧？那这是这个效果，那这是一个鼓励的布局，我们就可以轻轻松动做出一个图标出来。 那介绍完这个国内的容器之后呢，我们来介绍一下啊，三个喷呢，像这个容器呢，他就是一个啊，可以水平啊摆放啊，元素，或者是说垂直方向摆放元素的一个空间啊，一个容器， 那我们删除这部分代码啊，我们注视掉，然后呢我们来创建一个 steam， 像这个容器呢，它默认呢，它是一个垂直方向啊。布局 这个时候我们可以给里面，比如说我们添加一些吧台按钮啊，给他指定一个宽高，那指定完之后我们可以看到 这有个按钮，对吧？然后呢我们再给他不停的叠加，那我们可以看到这个大个盘呢，他默认的是从上往下布局，所以说我们的空间呢，他也是从上往下慢慢往下加啊，那这里面有一个啊， 那我们可以通过一个属性啊来试来改变这个空间的一个摆放的方向啊，他有一个属性叫奥特逊，对吧？我们可以设置为水平摆放，所以说他所有的空间都是水平摆放，那这是一个大概喷的一个容器啊，那是与他 啊对应的，还有一个容器叫外部喷的，对吧？像这个这个容器呢，他和这个十三个喷呢，他有一个区别啊，他就是说我们可以创建一个，比如说我们删掉，那可以注意到外部判断呢，他是默认的，他的方向和十三个判断不同， 他是啊水平方向摆放的，所以说我们可以显显示的指定他啊垂直方向摆，这是这个空间。当然这个空间和四十三个判断还有一个啊，非常明显的区别啊，就是他可以自动去换行或者换列，就是在有限的 容器当中啊，如果那个容器啊不足以摆放我们的空间，我们的空间就会自动换行，这个时候我们我们可以，比如说我们现在把宽度对吧缩小，可以发现这个按钮啊，他都往下走了，他自己换行了啊，那我们用十三个拍呢，我们可以试一下 让他水平摆放，可以看到这里我们只能看到四个空间了，他有些空间已经在我们的容器之外了啊，这就是一个十三个判断和外部判断的一个区别啊，除了他们默认的一个排列的方式方向 啊，主要就是这个区别啊，这个区别我们可以让他垂直啊，比如说我们设置一个垂直垂直摆放是一样的，我们把这个高度也缩小， 可以看到他同样的哈，这个整个容器的一个空间啊，不足以摆放这些空间，他就会自动去换裂或者换行，那这是一个外部喷的一个啊容器啊，介绍完这个容器之后呢，我们就来介绍一个多个喷的啊，多个喷的，他的容器呢啊，我们可以写一个多个喷的，对吧？ 我们是吧首先把这个注射掉，然后呢我们写一个多个判断，然后呢多个判断呢？只要是放在这个多个判断容器里面的一个空间啊，他都具备这个一个属性啊，我们可以把他啊设置到他 他的位置，他有四个方向啊，上下左右， 然后呢我们可以创建四个，然后呢上下左右， 我们可以通过设置这个属性呢，他就可以往往每个方向靠啊，这就是一个道口，一个停靠的意思 啊，当我们给这个刀客半天里面放了一些空间啊，但是我们没有指定下这种刀客的一个属性啊，他默认呢就是向左， 那可以追到啊，我们这个容器整体是从那个左边一直排过去啊啊，除非我们去显示指定他，他就会每个方向不同，那之所以最后这个空间呢啊，他停留在中间，只因为他填充了整个空间啊，这个我们可以通过一个 啊最后这个属性啊来设置，这个时候呢他就会啊描定到这个最右边啊，这是一个刀客判断属性容器啊，我们可以通过这个刀客判断来创建一些灵活的一个用户空间啊， 那这里呢介绍的是一个多个喷的啊，多个喷的呢，介绍完之后我们再来介绍一个这个幽灵凤母谷类的啊，这个呢啊，这个空间呢就其实用的也蛮多啊，我们可以给大家首先创建一个幽灵凤母谷类的， 那这个空间呢，我们就可以装，比如说我们在里面放进一些按钮， 像这个按钮呢，他已经在这个位置了，然后我们创建多个他，你可以看到他创建了四个啊，他就 会默认的啊，均分的整个空间啊，他其实是默认的分了两行两列，那我们可以其实显示的给他指定列， 你看我们也可以指定多列啊，指定多列这个意思就是什么呢？我们当前这个容器啊，他具备这个两行啊，三行两列， 那么我们空间的话呢，就会从左然后往，从左往右，然后从上往下的不停的追加空间，直到这个整个容器充满，如果没充满的话呢，这个空间容器本身呢，他会预留对应的空间，在这里可以看到这两个空白，比如说我们如果再创建两个按钮， 他就会填充剩余的空间，那我们也可以创建三行，可以注意到三行三内的话呢，他就是九个空间，对吧？那 这里我们只创建了六个，所以说他只是两行，占了两行了，两行三列的一个空间，还剩下一行呢，就是一个他会给我们保留的一个空间，那我们可以自己去选择性的填充他，那这是这个空间，这个空间呢，主要是我们用来啊，把这个 一个有限的空间的容器啊，均分成多个一个空间，比如说我们现在指定这个容器啊，为三裂，但我们当前这这个 空间呢，他就会分成三个相等的容器，相三粒啊，放置我们三个空间，我们可以做到他的位置啊，都是，呃，相同的，那这是一个幽灵凤母谷类的一个容器。

抖音， 抖 音号。

这一课我们来完成虚拟灯出使画清空功能的界面绑定，打开上一节课的项目，这里我们先使用 listview 来显示验证后期界面美化阶段再改改。就是 这里，我们需要先添加设计师的数据上下文示意，方便绑定操作时的代码提示，实际上就是 mainview model 运行时的数据，上下文时域就是后台代码直接创建。 我们尝试将 listview 的 项目绑定到集合，这里找不到，应该是设计上下文时域写错了，我们来修改下 命名空间不对， ok， 我 们再来绑定试试。设置一下像的模板， 我们就采用默认的看看， 忘记添加按钮的命令了，我们来添加下 运行，看看状态，已经显示出来了， id 未显示，我们后期美化的时候不会用到。先不管清空功能有问题， 打个断点看看。眼花竟然没看到， 修改下 再试试看看。 ok， 没问题了，我们下期继续。

啊，各位同学大家好，我是龚凤光老师。那上一节课呢，我们把这个样式的使用给同学们介绍了一下，关于我们这个样式的这个 呃定义啊，然后还有样式的这个继承啊，但是我们之前提到了，就是如果说当前这个样式，假如说这个样式一和样式二，对吧？只能在我们当前的这个 windows 窗口当中调用，那么我们假设说有个新的一个窗口，对吧？ 叫 window 一，在这个 window 一当中呢，我们这边呢也给它写一个这个 button， 那这个 button 我们能不能调用到我们之前那个页面定义的这个 button style 一呢？我们可以在这里试一下， 同学们看一下，他根本就没有给你提示，对吧？说明我们根本调用不了，那么在这里 上节课，老师提到了，那么就是说我们在当前窗口当中定义的这个 style 呢，只能在当前的这个窗口当中调用，那如果说你想定义的这个 style 在多个窗口当中都能被访问的话，那么我们要用到什么呀？要用到这个，对吧？全局的一个资源， 那么全局的资源怎么样来调用呢？我们一样啊，我们在这里呢先添加一个什么呢？添加一个这个资源字典， 对吧？假如说就叫这个字典一， ok， 然后呢我们在这里呢再添加一个字典二，字典二，那么在这个字典一当中呢？嗯，我们把上也 课啊，这些东西我们先全给他注视掉啊，先全给他注视掉， 然后呢这些资源呢，我们全给他先全都给他删掉啊， 然后我们重新在这里面字典里面写一下我们的资源，对吧？一样一上来呢，写我们这个 style， 然后这个 style 呢？关于我们的这个 types， 针对于我们这个 button 的，然后呢我们就开始写一样， 然后呢先对我们的这个背景颜色，假如说背景颜色我们给他一个黑色， 然后前景色呢？ 前景色我们给他一个黄色， 然后在这样的同学们可以看一下啊？我当前这个，然后给他一个 key， 对吧？给他一个 key， 假如说这个 key 呢？叫这个 style 一，对吧？那这个时候我在这个界面当中呢，我可以调用吗？我们可以看一下，咱们看一下还是他访问不到，对吧？访问不到，然后我们还需要做一件什么事情呢？我们在这个字典一当 当中定义了这个，然后呢假设说我们现在有多个样式的字典，对吧？假如说在这个字典二当中呢，我们也写一个叫这个 style 二，对吧？老师特意给他分开。当然你只需要一个字典的话，我们都在这里面写，也可以在这里假如说写个 style 二，然后在这里呢我们写个 style 三，对吧？ 然后呢这个呢我们给他改成一个背景，给他改成白色，然后前台呢给他改成红色，然后这个呢背景给他改成绿色， 前台呢？是这个，嗯，灰色吧，或者是黑色。 ok， 现在这三个样式我们都有了，然后我们需要什么呀？我们需要在这个全局的资源这里面啊，写上这个东西，同学们可以看一下 resource diction， 对吧？就是我们这个资源字典，然后在这里我们要用到一个什么呢？ resource dictionary 点儿，对吧？这里面有个 merged dictionaries， 什么意思呢？ merged 就是合并，对吧？合并我们的一个资源字典，那么在这里呢，如果你有一个的话，你就写一个，如果你有多个的话呢？你可以合并多个这个资源字典，那么在这里呢， 对吧？我们这波 sauce， 那么 sauce， 对吧？资源字典来源于哪儿？那么它首先来于我们当前那个命名空间，对吧？ still， 然后在这里呢 有分号，然后我们一个分号，然后 component 表示这是一个主见，然后把我们这个字典名称给拿过来点 张某，然后这个时候呢一个反括号，这个时候呢，我们就把这个第一个资源字典呢给引用过来了，这个时候我们在我们当前的窗口当中呢，这时候我们再来写哈， 同学可以看一下，现在这个 style 一呢，就可以被引用过来了，对吧？我们启动运行一下， 对吧？然后呢假如说我们想用第二个，对吧？这个想用第二个，然后这个时呢我们想用第三个，同学们可以看一下，第三个呢，他就报错了，对吧？因为我们第三个这个资源文件呢，还没有被合并进来，对吧？第三 三个是在这个字典二当中，然后这个时候呢，我们需要把这个字典二呢也给它合并过来， 这时候我们看，对吧？三种样式就都过来了，然后如果说这三个样式呢，我想在其他的页面当中，假设说我把这些我给复制一下，复制到这个 windows 一当中，对吧？这个 windows 一当中呢，我们这边也有一个 button， 然后给他一个这个宽度吧， 然后再给他一个高度，然后这个样式呢，我们给他一个，看，他自动就有提示了，对吧？我们假如说用样式三 六六六字体再大一点， 对吧？这个就是关于我们这个全局样式跟这个资源字典的这么一个用法啊，同学们一定要会会用，对吧？那么在这个资源字典里呢，同样我们这边也可以继承，对吧？ 假设说这个第一个我们给他一个没有给的 key， 对吧？是一个默认的一个样式，然后在这里呢，我们可以给他继承 based on， 对吧？ static， 然后呢 x type button， 这样的话呢，我们这个样式二就继承了默认的这个样式，同样是可以用的，对吧？同样是可以的 啊，这个时候呢，他报错了，对吧？没，没法找到这个资源，一来因为我们现在这个刚才把名字给改 改了一些，对吧？已经没有那个 style 一那个名字了，对吧？这个时候我们就不要 style 一了，这是 style 二 style 二，或者说这边呢，同学们可以看一下，我这边呢，不给他样式，对吧？ 我们不给他样式，看看他默认样式过没过来，对吧？我们可以看一下，默认的这个样式呢，就是我们当前的背景是黑色，前景是黄色，我们可以看一下，对吧？ 那这就是关于我们这个全局的一个用法。好了，那这节课讲到这，同学们下句好好练习一下，谢谢大家。