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

WPF 总结一、内容版本控制1、项目内容管理的必要性项目开发：项目立项–>代码开发–>运维产生很多文档2、常见的版本控制工具Git/SVN3、Git与GitHub/GitLab4、代码管理实操二、界面布局控件1、从应用开发流程说起WPF：业务逻辑

@@神农

698人浏览 · 2022-01-09 17:18:49

@@神农 · 2022-01-09 17:18:49 发布

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

两个过程：测量+排列

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

白盒测试体系的探索 [ 光影人像东海陈光剑的博客 ]

什么是白盒测试？很多人都听说过白盒测试。通常的说法是，白盒测试是能看到全部产品源代码的测试。常常，白盒测试都是和牛人绑在一起的。个人认为这是一种比较狭隘的说法。然而究竟什么是白盒测试呢？可能有很多的人在做了很长时间的白盒测试以后发现，自己其实不是在做白盒测试，而是在做灰盒测试，原因是不够“白”，因为他没有看到全部的产品代码。其实，我个人认为，这是做白盒测试的误区。从广义来说，个人认为，白...

开放原子开发者工作坊

现代程序设计 homework-01

搞了6个小时individual project...看看博客做一做第一次现代程序设计作业1) 建立 GitHub 账户, 把课上做的 “最大子数组之和” 程序签入我的github地址是https://github.com/oldoldb,以前没有用过各种不熟练啊....代码我放到<现代程序设计课后作业>这个repository里了,是昨天完成的在hdu和poj上找的5道关于一...

开放原子开发者工作坊

精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解

原文：Chalarangelo 译文：IT168https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates该项目来自于 Github 用户 Chalarangelo，目前已在 Github 上获得了 5000 多Star，精心收集了多达 48 个有用的 JavaS...