WPF 项目版本控制以及布局控件

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、布局实践

上一篇:WPF ListBox控件


下一篇:WPF 布局 在有限空间内让两个元素尽可能撑开的例子