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

本文主要是介绍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 项目版本控制以及布局控件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程