WPF布局学习总结

WPF布局学习总结

模仿效果

今天系统学习了一下WPF的布局，模仿做了一个粗糙的CSDN主页，效果如图：

布局Control总结

用简短的话来概括精髓

布局原则

控件的Weight、Height除非需要，不要显示设置，灵活为上，更是为了自适应。

StackPanel

1. 堆栈面板，占据一行或一列的时候使用
2. 属性Orientation（方向），使内嵌所有子元素水平或竖直排列

WrapPanel

环绕面板，功能完全可替代StackPanel

不同的是，如果案例中右上角“搜索”后面还有元素，则会排列到第二行（IOS开发图片那行）

DockPanel

1. 停靠面板，专门用于自适应（WinForm的人知道Dock）
2. 内嵌所有子元素可以使用DockPlane.Dock.……来点出来上下左右四个方向来布局
3. 最后一个元素填充剩余空间，需要在DockPlane上设置LastChildFill = false;

Grid

1.最复杂，设置Row和Colum来布局

 <!--定义列 2列--> 
 <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="80"/>
     <ColumnDefinition/>
 </Grid.ColumnDefinitions> 
 <!--定义行 3行--> 
 <Grid.RowDefinitions> 
     <RowDefinition Height="100"/>
     <RowDefinition />
     <RowDefinition />
 </Grid.RowDefinitions> 

1-1设置Row和Colum的尺寸有三种方式

<ColumnDefinition Width="80"/>  显示设置
<ColumnDefinition Width="Auto"/>设置自动
<ColumnDefinition Width="*"/>   等比例缩放（2*、3*）

1-2跨越行和列
假如我有一个5行3列的Grid，里面有个Button想填充前两3行2列，点出来Grid的属性来设置

<Button Grid.Row = 0 //从0行开始是第一行
        Grid.RowSpan = 3  //跨越3行
        Grid.Row = 0 //从0列开始是第一列
        Grid.ColumSpan = 2 //跨越2列

1-3尺寸共享（技巧）
我有两个Burton，在5行3列的Grid中，要求第一个Button在第一行第一列，第二个Button在第二行第一列，除了位置不同，尺寸是相同的

<Button Grid.Row = 0 Grid.Row = 0 />
<Button Grid.Row = 1 Grid.Row = 0 />
在设置Grid的行列尺寸处设置
 <!--定义行的地方--> 
 <Grid.RowDefinitions> 
     <RowDefinition Height="*" SharedSizeGruop= "设置一个名字"/>
     <RowDefinition Height="*" SharedSizeGruop ="和设置的名字一样便共享"/>

1-4设置行列不用写代码，直接拖（技巧）
新建项目的时候自带的是Grid，鼠标移到界面的上边框或者左边框的时候，鼠标变成三角，你在上部点一下，就是设置一列，在点一下就是设置一列，xaml的代码都省的你写了，行业一样

2.布局舍入
假如你的窗体尺寸是600,800，Grid自适应也是600,800，如果你设置了三行，等比例缩放是：,4：2*，就是1:4:2，但是行总长是600，无法整除7，所以在相邻行的地方是模糊的，因为WPF采用的是反锯齿的功能，在Grid处设置UseLayoutRounding = True关闭反锯齿

Canvas

1.更精确的布局，内嵌子元素可以设置Canvas.Left或者是上右下，就是距离Canvas的距离
2.内嵌子元素可以设置层次, ZIndex，默认是0，在Canvas中两个重叠的控件，Zindex大的显示，小的被遮住（这个属性是点不出来的）

InkCanvas

这个特别有意思，应该都玩过电脑自带附件中的画图工具吧，小时候玩的很嗨，这个控件就是简单的画图，也算是一个布局
1.这个控件在工具箱里找不出来，只能自己写
2.布局功能：放在这个控件中的子元素，也有Canvas的.Left……
还有在InkCanvas 的EditingMode设置为Select，可以在运行的时候修改子元素的尺寸以及删除，还是贴代码吧

<InkCanvas EditingMode="Select" >
   <Button Content="按钮" InkCanvas.Left="100" InkCanvas.Top="100"/>
</InkCanvas>

效果图：
子元素一个按钮初始尺寸
选中时的样子
拖拉后的样子
3.画笔功能：
属性EditingMode =
Ink 正常画画
None 不支持画笔功能
EraseByPoint 像画画中的橡皮一样（左键变成橡皮咯）
EraseByStroke 删除笔画（你画了两下，用一下，就剩下第一笔了）
GestureOnly 画画后左键释放就不保留画的内容
附效果图一张：

结尾

每个控件有三个属性，布局时合理使用，
Marin设置四个方向的间隔 Margin=“0,0,0,0”
VerticalAlignment 垂直方向对齐
HorizontalAlignment水平方向对齐
像布局这些东西，还是自己去试试去玩玩，就心里有数了，别人玩呢，还是