2022年5月4日【Jiawei_Z】C#WPF的布局介绍 & 控件介绍 & WPF样式与触发器 (1)(2)(3)

WPF布局介绍

课程的课件链接 https://www.cnblogs.com/zh7791/p/11369020.html
视频讲解的链接 https://www.bilibili.com/video/BV1mJ411F7zG?p=3&spm_id_from=pageDriver

WPF布局介绍(1)

https://www.cnblogs.com/zh7791/p/11369020.html
WPF布局的介绍
WPF布局基础
WPF布局原则

一个窗口中只能包含一个元素
不应显示设置元素尺寸
不应使用坐标设置元素的位置
可以嵌套布局容器
WPF布局容器

StackPanel: 水平或垂直排列元素、Orientation属性分别: Horizontal / Vertical
WrapPanel : 水平或垂直排列元素、针对剩余空间不足会进行换行或换列进行排列
DockPanel : 根据容器的边界、元素进行Dock.Top、Left、Right、Bottom设置
Grid : 类似table表格、可灵活设置行列并放置控件元素、比较常用
UniformGrid : 指定行和列的数量, 均分有限的容器空间
Canvas : 使用固定的坐标设置元素的位置、不具备锚定停靠等功能。
布局容器详解
----------------StackPanel--------------
StackPanel主要用于垂直或水平排列元素、在容器的可用尺寸内放置有限个元素，元素的
尺寸总和(长/高)不允许超过StackPanel的尺寸, 否则超出的部分不可见。

----------------WrapPanel----------------

WrapPanel默认排列方向与StackPanel相反、WrapPanel的Orientation默认为Horizontal。
WrapPanel具备StackPanel的功能基础上具备在尺寸变更后自动适应容器的宽高进行换行换列处理。
----------------DockPanel----------------

默认DockPanel中的元素具备DockPanel.Dock属性, 该属性为枚举具备: Top、Left、Right、Bottom。
默认情况下, DockPanel中的元素不添加DockPanel.Dock属性, 则系统则会默认添加 Left。
DockPanel有一个LastChildFill属性, 该属性默认为true, 该属性作用为, 当容器中的最后一个元素时, 默认该元素填充DockPanel所有空间。

----------------Grid----------------

学过web的老弟应该知道table表格, 而Grid与其类似, Grid具备分割空间的能力。
RowDefinitions / ColumnDefinitions 用于给Grid分配行与列。
ColumnSpan / RowSpan 则用于设置空间元素的 跨列与阔行。

----------------Canvas----------------
该容器就相当于一个 “地图”, 包含内的所有控件元素, 则都通过使用XY来定位, 由于不太常用, 所以简单掠过。

WPF控件介绍(2)

https://www.cnblogs.com/zh7791/p/11372473.html
WPF控件的介绍
上一章讲到了布局、

这点就有点类似建筑设计、

第一步是出图纸、整体的结构、
第二步就是堆砌, 建筑学里面也会有很多描述, 例如砖头，水泥、玻璃、瓷板。

而在WPF中, 这一切的基础也就是控件、用于填充结构的UI控件。

各种控件类型详解
ContentControl 类
设置内容的属性为 Content, （控件目录下只允许设置一次Content）

控件目录下只允许设置一次Content, 如下演示给按钮添加一个Image和一个文本显示Label, 错误如下:

正确的使用方式:
<!利用我们上一章说讲到的布局容器装载在其中, 则可避免这种情形>

HeaderedContentControl 类
相对于ContentControl来说、这类控件即可设置Content, 还有带标题的Header。
像比较常见的分组控件GroupBox、TabControl子元素TabItem、它们都是具备标题和内容的控件。

同样,该类控件目录下只允许设置一次Conent和Header, 如下错误所示, 出现2次设置Header与Content报错:

ItemsControl 类
此类控件大多数属于显示列表类的数据、设置数据源的方式一般通过 ItemSource 设置。如下所示:

重点常用的控件介绍:
TextBlock: 用于显示文本, 不允许编辑的静态文本。 Text设置显示文本的内容。
TextBox: 用于输入/编辑内容的控件、作用与winform中TextBox类似, Text设置输入显示的内容。
Button: 简单按钮、Content显示文本、Click可设置点击事件、Command可设置后台的绑定命令
ComboBox: 下拉框控件, ItemSource设置下拉列表的数据源, 也可以显示设置, 如下

WPF样式与触发器(3)

https://www.cnblogs.com/zh7791/p/11372623.html
WPF样式于触发器
WPF中的各类控件元素, 都可以自由的设置其样式。 诸如:

字体(FontFamily)
字体大小(FontSize)
背景颜色(Background)
字体颜色(Foreground)
边距(Margin)
水平位置(HorizontalAlignment)
垂直位置(VerticalAlignment) 等等。
而样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML, 通过Styles创建一系列封装所有这些细节的样式。然后通过Style属性应用封装好的样式。这点类似于CSS样式。然而, WPF样式的功能更加强大, 如控件的行为。WPF的样式还支持触发器(后面章节会讲到)。

示例
为了能够直观了解到样式(Style)的使用方法, 下面演示一个从传统的定义控件样式到使用Style组织样式的方法。

下面的例子中, 给4个TextBlock设置同样的样式: 字体、字体大小、字体颜色、加粗设置。
效果图与实际代码如下所示:

上面有讲到, 样式是组织和重用的工具。 而上面的代码, 由于每个元素都是相同的,
但是每个元素XAML都重复定义。

下面将介绍通过样式如何优化上面的代码。

第一步: 在Resources目录下定义一个TextBlockStyle的样式, 完整代码如下:
Style结构定义了一个 x:key 这点类似于Html中定义id和class, 然后css即可对相应的class和id样式生效。
TargetType 的设置为类型TextBlock, 设置目标类型静态文本TextBlock。

**第二步:**通过控件的Style属性 来引用x:key 的样式, 代码如下

注意: 当控件引用了某个样式, 在控件本身并没有定义该属性的情况下,优先使用样式中的定义,否则优先控件本身的定义。如下所示, 样式中设置了颜色为 Red, 但是控件本身又设置了Green, 那么控件的最终效果 Green。

注意：样式中要是定义了，在元素中又重复定义，按照重复定义的为准。

这个是非常重要的一个功能
触发器 资源模板 都是可以用这个样式

继承 — 继承上面的属性

触发器介绍
顾名思义, 触发器可以理解为, 当达到了触发条件, 那么就执行预期内的响应, 可以是样式、数据变化、动画等。
触发器通过 Style.Triggers集合连接到样式中, 每个样式都可以有任意多个触发器, 并且每个触发器都是 System.Windows.TriggerBase的派生类实例, 以下是触发器的类型

Trigger : 监测依赖属性的变化、触发器生效
MultiTrigger : 通过多个条件的设置、达到满足条件、触发器生效
DataTrigger : 通过数据的变化、触发器生效
MultiDataTrigger : 多个数据条件的触发器
EventTrigger : 事件触发器, 触发了某类事件时, 触发器生效。

------------- Trigger --------------
下面以Border为例, 演示一个简单的Trigger触发器。
当鼠标进入Border的范围, 改变Border的背景颜色和边框颜色, 当鼠标离开Border的范围, 还原Border的颜色。
代码如下所示
触发条件
<Style.Trigers>
---------------这是单条件的触发器

				         <Triger >
				         </Triger >

</Style.Trigers>

多条件触发器 MultiTrigger
和Trugger类似, MultiTrigger可以设置多个条件满足时, 触发,

举例一： 下面以TextBox为例, 做一个简单的Demo
当鼠标进入文本框的范围, 并且光标设置到TextBox上, 则把TextBox的背景颜色改变成Red

举例二单击后再有效

事件 触发器 EventTrigger
事件触发器, 故… 是的, 当触发了某类事件, 触发器执行响应。
下面用实例演示, 为了能直观感受到这类触发器的作用, 用动画演示其功能,下面使用了动画相关的知识, 在学习到
后面几个章节, 读者可以进行相关的内容学习。
当鼠标进入按钮的范围中, 在0.02秒内, 把按钮的字体变成18号
当鼠标离开按钮的范围时, 在0.02秒内, 把按钮的字体变成13号 。 代码及效果如下所示: