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