WPF 总结
一、内容版本控制
1、项目内容管理的必要性
项目开发：项目立项-->代码开发-->运维 产生很多文档
2、常见的版本控制工具
Git/SVN
3、Git与GitHub/GitLab
4、代码管理实操
二、界面布局控件
1、从应用开发流程说起
WPF：业务逻辑
UI：窗口/控件
2、桌面应用的窗口布局
3、WPF布局原理与够原则
- 不用显示的方式设定元素的尺寸
- 不用屏幕坐标来指定位置
4、WPF常用布局控件与布局构成
-
Gride
特点：
功能强大，布局灵活的容器
两行四列表格
<Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> <ColumnDefinition Width="auto"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto"></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Button Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Grid.RowSpan="2">提交</Button> </Grid> 属性备注： Width= "auto" 列宽自适应 MinWidth 最小宽度 MaxWidth 最大宽度 Height="auto" 行高自适应 MinHeight 最小高度 MaxHeight 最大高度 Grid.Column 按钮所在哪列 从0开始 Grid.Row 按钮所在哪行 从0开始 Grid.ColumnSpan 跨列 从当前列往右跨 Grid.RowSpan 跨行 从当前行往下跨项目中常用的列表数据布局：
<Grid Background="Orange" Grid.IsSharedSizeScope="True"> <Grid.RowDefinitions> <RowDefinition Height="30"></RowDefinition> <RowDefinition Height="30"></RowDefinition> </Grid.RowDefinitions> <!--表头--> <Grid > <Grid.ColumnDefinitions> <ColumnDefinition Width="100" SharedSizeGroup="A"> </ColumnDefinition> <ColumnDefinition ></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> </Grid.ColumnDefinitions> <Border VerticalAlignment="Center" > <TextBlock FontSize="15" VerticalAlignment="Center">用户名</TextBlock></Border> <Border Grid.Column="1"> <TextBlock VerticalAlignment="Center" FontSize="15">邮箱号</TextBlock> </Border> <Border Grid.Column="2"> <TextBlock VerticalAlignment="Center" FontSize="15">状态</TextBlock> </Border> <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" ></GridSplitter> <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" Grid.Column="1"></GridSplitter> </Grid> <!--数据--> <Grid Grid.Row="1" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="A"></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> <ColumnDefinition ></ColumnDefinition> </Grid.ColumnDefinitions> <Border VerticalAlignment="Center" > <TextBlock FontSize="15" VerticalAlignment="Center">小明</TextBlock> </Border> <Border Grid.Column="1"> <TextBlock VerticalAlignment="Center" FontSize="15">1142105884@qq.com</TextBlock> </Border> <Border Grid.Column="2"> <TextBlock VerticalAlignment="Center" FontSize="15" >注销</TextBlock> </Border> </Grid> </Grid> 备注： Grid.IsSharedSizeScope="True" :允许尺寸共享 SharedSizeGroup="A" ：设置尺寸共享列 （哪一列和哪一列共享 [表头和数据列都得加]） //设置列拖动块 <GridSplitter HorizontalAlignment="Right" Width="5" Background="Black" VerticalAlignment="Stretch" ></GridSplitter> -
StackPanel
-
<StackPanel Orientation="Horizontal"> <Border> <TextBlock>首页</TextBlock></Border> <Border> <TextBlock>首页</TextBlock> </Border> <Border> <TextBlock>首页</TextBlock> </Border> </StackPanel> 备注： Orientation="Horizontal" ：横向排列 Orientation="Vertical" ：竖向排列使用场景：无处不在，工具栏 ToolBar、菜单栏
缺点：不换行
-
DockPanel 【容器】
通过Dock停靠进行布局。
附加属性：
DockPanel.Dock Top/
LastChildFill ：true/false 最后一个控件是否填充剩余的空间。
<DockPanel LastChildFill="True"> <Button Content="button1" DockPanel.Dock="Top"></Button> <Button Content="button2" DockPanel.Dock="Bottom"></Button> <Button Content="button3" ></Button> <Button Content="button4" DockPanel.Dock="Right"></Button> <Button Content="button5" ></Button> </DockPanel> 备注：DockPanel.Dock="Top" ：button 顶部 这个属性是DockPanel里面的。 LastChildFill="True" : 最后一个控件是否填充剩余的空间。使用场景：功能区域划分
-
WrapPanel
唯一一个不能被gride替代的布局控件。
主要属性：Orientation ：Horizontal/Vertical 可以换行
使用场景: 界面图标式布局
<WrapPanel Orientation="Horizontal"> <Button Content="button" Width="100"></Button> <Button Content="button1" Width="150"></Button> <Button Content="button2" Width="50"></Button> <Button Content="button3" Width="80"></Button> </WrapPanel> -
UniformGride
另一种风格布局，自动生成统一一致的行列
主要属性：Rows="5" Columns="2"
使用场景：仪表盘 驾驶舱
<UniformGrid Rows="5" Columns="2"> <Button Content="button1"></Button> <Button Content="button2"></Button> <Button Content="button3"></Button> <Button Content="button4"></Button> <Button Content="button5"></Button> <Button Content="button6"></Button> <Button Content="button7"></Button> <Button Content="button8"></Button> <Button Content="button9"></Button> </UniformGrid> -
Canvas
通过精确坐标定位子元素
主要配置属性：Canvas.Top/Left/Right/Bottom
使用场景：编辑场景（组态）
<Canvas > <Button Content="button1" Canvas.Top="200" ></Button> <Button Content="button2" Canvas.Top="20" Canvas.Left="400"></Button> <Button Content="button3"></Button> </Canvas>
InkCanvas
支持任意笔画的输入控件
使用场景：画板
<InkCanvas EditingMode="Ink">
<InkCanvas.DefaultDrawingAttributes>
<DrawingAttributes Color="Red" Width="10"></DrawingAttributes>
</InkCanvas.DefaultDrawingAttributes>
<Button Content="button1" InkCanvas.Top="50"></Button>
<Button Content="button2" InkCanvas.Left="100"></Button>
<Button Content="button3"></Button>
</InkCanvas>
EditingMode="Ink" 手写笔画
EditingMode="Select" 放大控件
EditingMode="GestureOnly"
Strokes ：获取笔画
DefaultDrawingAttributes ：设置笔画的颜色与宽度
Border
最基础的装饰控件
主要属性配置： CornerRadius 设置圆角
使用场景：绘制边线以及背景色 圆角 使用频繁
<Border CornerRadius="4">
<Grid>
</Grid>
</Border>
扩展布局控件
TabControl TabItem TabPanel
Toolbar Panel ToolbarOverflowPanel
VirtualizingStackPanel（虚拟化的StackPanel） 性能优
特殊容器
Scrollviewer
GroupBox
Expander
5、布局原理与自定义实践
从布局原理到布局过程
所有布局控件都有自己的特定方式
都是继承自Panel
两个过程：测量+排列
6、布局实践