‫欢迎回来｡
‫在本视频中, 我们将讨论堆栈､ 面板列表､ 框, 然后是逻辑树和可视化树｡
‫首先, 让我们去掉这个网格, 因为我们还没有接触过网格,
‫所以还没有正确使用网格, 但我们会在下一个视频中这样做｡
‫所以我想用一个堆栈面板代替网格｡
‫例如, 堆栈面板允许我将元素堆叠在彼此的顶部, 这样我就可以在这里添加一个文本块｡
‫我会简单地写这段文字, 就像, 你好, 世界, 简单的文字｡
‫如您所见, 这是我文本'Hello World'
‫现在我还想做的是, 我想把它对齐, 所以水平对齐, 我在这里使用中心｡
‫所以现在我把文字放在中间, 就像你们看到的｡
‫现在文本是居中的, 也可能是一个小的空白向所有方向, 这是20｡
‫如你所见, 我使用了边距, 只要说20, 就会说,
‫或者, 这会在四个方向上创建20像素的边距｡
‫接下来是一个列表框, 我想使用一个列表框, 这样你就可以看到它的样子｡
‫因此, 这个列表框目前是空的, 但我们可以通过在其中创建一个列表框项来很容易地改变它｡
‫因此, 让我们继续创建一个列表框项｡
‫这个项目的内容应该是比如说内容等于项目一｡
‫而现在不是有一个开始和结束标签, 我只想有这个较短的版本｡
‫所以我去年用了这个, VisualStudio很聪明, 自动为我去掉了结束标记｡
‫现在这个列表框中有一个项目, 我将多次复制粘贴它｡
‫所以我要第一第二第三项｡
‫现在这个列表框占据了整个宽度｡
‫正如你所看到的, 它需要整个父节点, 它只需要和它所需要的一样高｡
‫因此, 这意味着只需要与其内部元素的高度一样多的空间｡
‫所以, 我们假设第一项､ 第二项和第三项, 它们的高度都是30像素｡
‫所以整个盒子只有90像素高｡
‫但我们可以通过调整高度来改变它｡
‫我将使用高度100｡
‫如你所见, 它比之前的物体要高｡
‫现在让我们创建一个宽度也是100像素｡
‫所以现在你可以看到这个盒子小了很多, 正好可以放进去｡
‫好吧, 我会的
‫现在, 如果我想在所有方向上都有边距, 我也可以给予这个元素加上边距｡
‫但是,
‫正如您所看到的, 因为这个Helloworld文本块在所有方向上都有20的边距, 所以在这两个列表元素之间或者在列表框和文本块之间也有一个距离｡
‫现在, 如果我们运行这段代码, 我们会看到这个小的主窗口, 它很漂亮,
‫有我们的列表框和它的元素｡
‫正如你在这里看到的, hello world到文本块, 然后是那些列表元素, 你可以点击它们,
‫甚至可以选择它们｡
‫但不会发生其他任何情况, 因为我们尚未出库使用事件, 我们将在下一个视频中出库使用事件｡
‫所以我要再次关闭它｡
‫现在, 让我们快速讨论一下逻辑树和可视化树｡
‫所以我们在这里看到的是一个逻辑树, 或者我们可以在XAML中看到逻辑树｡
‫所以逻辑树是一个窗口在那个窗口里面｡
‫我们有一个堆栈面板｡
‫就在那堆木板里面｡
‫我们有一个文本框块和一个列表框｡
‫在列表框中, 我们实际上有列表框, 第一项列表框, 第二项和第三项｡
‫这就是逻辑树｡
‫你几乎有多个分支｡
‫越陷越深｡
‫所以这个窗口有一个stack panel的分支, 它有两个分支, 其中一个是List Box, 它也有分支,
‫依此类推｡
‫正如我所说, 这是逻辑树｡
‫现在让我们看一下可视化树, 因为如果我, 例如, 在这里添加一个按钮,
‫我将需要它在一秒钟内的东西｡
‫因此, 我创建了一个新按钮, 并将“单击我”的内容给予它｡
‫我还将在这里添加一个方法, 只要有人点击, 就会调用它｡
‫所以我在这里使用了click, 并创建了一个新的事件处理程序｡
‫它创建了一个新的方法叫做Button Click｡
‫如果您现在看这里, 我们可以看到有一个名为Button Click的方法,
‫它有一个对象发送方和一个名为E的路由事件参数｡
‫这个方法的作用就是调用这个方法｡
‫每当我们点击按钮以及这个方法中的任何内容时, body都将被执行｡
‫假设我们使用了一个消息框, 一个我们还没有使用过的东西, 我们把它的方法叫做show｡
‫我们可以简单地显示一个框或一个框将出现像一个小弹出, 这将显示我们一些文本｡
‫比如“感谢您点击我”, 然后显示“点击我”, 然后显示这样的文字｡
‫感谢点击消息框将显示一些美丽的东西, 如感谢点击我｡
‫如您所见, 这个“单击我”按钮就在我们的列表框下面｡
‫所以现在请继续在它们之间增加一点距离｡
‫好吧, 我会的
‫我希望你试着去做｡
‫我们可以给予按钮留一个边距, 我将再次使用20, 或者我们可以给列表框留一个边距｡
‫但是给按钮一个余量应该完全没问题｡
‫现在如果我们运行代码, 就会看到这个漂亮的“单击我”按钮｡
‫所以我们有hello world, 文本等等或者列表框｡
‫现在, 如果我们单击“Click Me”（单击我）, 则会弹出此消息框并选中｡
‫说类似“感谢您点击我”这样的话, 我们就可以单击“确定”再次关闭该消息框｡
‫所以我们打开它｡
‫如您所见, 点击我谢谢您点击我｡
‫这是一个消息框, 我们可以使用它,
‫就像我们在控制台应用程序中使用控制台右行进行测试一样｡
‫所以, 如果我们想在一个事件后打开一些东西, 我们只需打开一个消息框, 这样我们就知道, 好吧,
‫它工作得很好｡
‫这就是按钮和逻辑3｡
‫现在, 让我们来看看可视化树｡
‫因此, 为了获得可视化树, 有多种方法｡
‫但我要使用的是在这里添加一个点, 一个调试点｡
‫因此, 每当执行这行代码时, 它都会进入调试状态｡
‫现在让我开始代码或者开始我们的程序｡
‫现在, 我单击按钮, 我们的程序停止, 进入调试模式｡
‫然后, 我可以在这里转到WPF树可视化工具｡
‫我接下来要做的就是单击它, 它将打开WPF可视化工具, 其中包含可视化树,
‫在右上角或右手边也包含这些属性｡
‫正如你所看到的, 有这么多的属性为我们的按钮, 例如, 或为我们的列表框,
‫也有大量的属性, 甚至告诉我所有这些属性的值｡
‫我们甚至没有设置任何这些｡
‫好吧, 也许除了利润｡
‫但除此之外, 我们什么也没做｡
‫如你所见, 背景是白色的｡
‫那总是好的｡
‫所以我们也可以在代码中改变它｡
‫顺便说一下, 现在重要的是我们的可视化树｡
‫您还可以在这里看到我们的逻辑树的某些方面｡
‫例如, 您可以看到主窗口, 然后看到堆栈面板, 在那里您可以看到文本块列表框和按钮｡
‫但还有很多｡
‫正如您所看到的, 主窗口有一个边框, 我们在逻辑树中看不到, 但在单独的树中可以看到｡
‫然后它有一个捐赠者装饰器, 一个内容展示器, 它实际上展示了内容, 然后是堆栈面板｡
‫堆栈面板也有一个文本块, 一个有边框的列表框, 这个框有一个滚动视图｡
‫因此, 如果有太多的元素显示在高度, 它有, 那么它将有一个滚动的能力｡
‫然后有一个网格, 其中包含一个矩形和滚动内容表示器, 其中有一个项目表示器可视化堆栈面板｡
‫然后在那里我们找到了列表框项目一, 它也有一个边框, 边框上有一个内容表示器｡
‫最后我们可以找到文本块｡
‫所以你看这是一棵非常非常长的树, 有很多分支｡
‫但最终你能找到的是所有不同的元素, 这些元素在你的程序中是可视的｡
‫如果你想了解更多关于你的程序中所表示或使用的内容, 以及你在程序中添加了什么, 这会很有帮助｡
‫但这通常是您可以找到有关可视化树的所有信息的方法｡
‫如您所见, 我们的列表框中有一个网格, 我们没有自己设置它, 但它就在那里, 对吗？
‫如果您单击该网格, 您还可以在右侧找到该网格的属性｡
‫好的
‫这就是可视化树, 逻辑树｡
‫我们使用了堆栈面板和列表框｡
‫我们将在未来更多地使用技术面板｡
‫所以你要习惯这点｡
‫是的, 在下一个视频中, 我们将检查事件｡
‫那到时见｡