一、界面布局

1. 布局原则

• 不用显式的方式设定元素的尺寸

• 不使用屏幕坐标来指定位置

2. 常用布局控件与布局处理

• Grid
• StackPanel
• DockPanel
• WrapPanel
• UniformGrid
• Canvas
• InkCanvas
• Border（装饰控件：背景色/边框 圆角 子对象也只能一个）

3. Grid

• 功能最强大，布局最灵活的容器

• 主要属性配置：

  ColumnDefinitions（ColumnDefinition）、RowDefinitions（RowDefinition）、ShowGridLines、IsSharedSizeScope（SharedSizeGroup）、给子项控件使用：Grid.Row Grid.Column

• 使用场景：广泛，不知道用什么布局，就用Grid，意外（WrapPanel）

4. StackPanel

• 最简单的布局容器之一
• 主要属性配置：Orientation-调整排列方向、FlowDirection
• 使用场景：图文并显、工具栏
• 可以Grid代替

5. WrapPanel

• 唯一一个不能被Grid替代的布局控件，水平方向排列，过程中当前子项出界了，进行折行
• 主要属性配置：Orientation-调整排列方向
• 使用场景：桌面式图标排列、搜索历史关键词排列

6. DockPanel

• 通过设置Dock停靠进行布局
• 主要属性配置：LastChildFill、DockPanel.Dock
• 使用场景：应用的主窗口布局（标题栏、状态栏、工具栏、菜单栏）

7. UniformGrid

• 另一种行列风格布局，自动生成统一一致的行列
• 主要属性配置：Columns、Rows 指定的是当前区域均分多少行和列，不存在指定行高和列宽
• 使用场景：9宫格的功能区域、图表

8. Canvas

• 通过精确坐标定位放置子元素
• 主要属性配置：Canvas.Left、Top、Right、Bottom
• 使用场景：组态、组件封装（仪表）

9. InkCanvas

• 支持任意笔画输入的画布组件
• 主要属性配置：
• 使用场景：手写墨迹识别（不是手写图像识别）：文字、图形

10. Border

• 最基础的装饰控件
• 主要属性配置：
• 使用场景：

二、界面布局处理案例分析

1. 可视化数字看板

• 使用控件总结：Border TextBlock Button ComboBox
• 布局过程：Grid、StackPanel、UniformGrid

2. 布局功能扩展与自定义

• 功能需求：3列子项 多行 行间距 列间距
• 继承Panel的对象，测量与排列

三、布局中的色彩与尺寸

1. 颜色

• RGB # FF 00 00 /16进制 0xFF 255 10 0x10 17 # FF FF AA 00 #FFA0
• 主题色/辅助色/3-4种颜色
• 不用极端色值/刺眼
• 专业：冷色/暖色/对比色/相近色
• 颜色透明

2. 内容

• 内容排版
• 区域大小
• 间距大小
• 字体：宋体 微软雅黑 思源黑体 苹方

3. 样式

• 属性设置

• 样式定义：Style

• 样式基本属性：TargetType、Setters、Key、BaseOn、Triggers

• 样式触发器：根据用户行为，改变控件外观

  Trigger、MultiTrigger、DataTrigger、MultiDataTrigger、EventTrigger

• 访问级别：越接近对象，级别越高

• 样式继承

4. 对象资源

• 参数复用
• 资源的定义
• 使用方式
• 资源统一设置：对象资源属性/向上搜索：APP、系统资源
• C#对象与XAML的对应关系

5. 静态资源与动态资源

• 静态：编译时确定
• 动态：运行时确定
• 使用区别 希望资源在运行过程中指定 使用动态；如果固定资源 使用静态
• 动态 性能上首推静态

6. WPF项目的资源管理

• 常见资源类型：图片(SVG)、字体、音视频（Gif）(只能本地文件访问)、XAML文档（资源字典）、C#对象

• 项目资源存储方式：

• 资源访问：项目资源/本地资源

  pack URL

  pack://application:,,,[/程序集名称;][版本号;][公钥;]component/Images/1.png

  pack://siteoforigin:,,,/Images/zhaoxi.png

• 目的：重用

• WPF项目的资源管理

  • 字体资源的特殊处理过程

    字体打包/字体图标引用/字体合并

  • 动态资源的实时更新

    多语言切换/主题切换