WPF IOS风格UI

  WPF的布局功能是它的核心功能之一，今天我们来认识一下WPF布局常用元素，分别是Grid、StackPanel、Canvas、DockPanel、WrapPanel。

 

Grid

一、特点：

1、可以定义行和列。

2、行与列的高度宽度可以使用绝对值、相对比列、或者自己调整的方式进行设定，可设置最大值和最小值。

3、内部元素可以设定自己在几行几列，跨行或者跨列。

4、设置children元素的对齐方向。

基于以上特点Grid布局适合大框架设计、大量UI元素需要成行或成列对齐、后期UI有较大的变更或者扩展。

 

二、使用方法：

 <Grid><!--使用Grid控件-->

               

<Grid.ColumnDefinitions><!--定义Grid的列，定义3列  设置高度-->
                            <ColumnDefinition  Height="30px"></ColumnDefinition>
                            <ColumnDefinition  Height="2*"></ColumnDefinition>
                            <ColumnDefinition Height="*"></ColumnDefinition>                  </Grid.ColumnDefinitions>
                   <Grid.RowDefinitions><!--定义Grid的行，定义3行-->
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>                  </Grid.RowDefinitions>
         </Grid>
<Button Content="Test" Grid.Row="1"  Grid.Column="1"></Button><!--定义Button 位置-->
<Button Content="Test" Grid.RowSpan="2"  Grid.ColumnSpan="2"></Button> <!--定义Grid的附加属性，跨行跨列-->

 

 

 

 

 

StackPanel

一、特点：

1、从左边到右或者从上到下以堆叠的方式显示控件。（默认是从上到下）并且宽度为StackPanel的宽度，高度自动适应控件中内容的高度（未对控件进行设置时）

 二、使用方法：

<Grid>
＜GroupBox Header＝“请选择没有错别字的成语＂BorderBrush＝＂Black＂Margin＝＂5＂＞
<StackPanel Margin="5"><!--默认从上往下排列-->
＜CheckBox Content-＂A.迫不急待＂／＞
＜CheckBox Content-＂B.陈词烂调”／＞
＜CheckBox Content＝＂C.首曲一指＂／＞
＜CheckBox Content＝”D.哀声叹气＂＞
＜CheckBox Content＝＂E.不可礼喻＂＞
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"><!--Orientation="Horizontal" 设定排序方式从左到右-->
＜Button Content＝＂清空＂Width＝＂60＂Margin＝＂5＂／＞
＜Button Content＝＂确定＂Width＝＂60＂Margin＝＂5＂／＞
</StackPanel>
</StackPanel>
</GroupBox>
</Grid>

 

实际工作中，我们可以使用Orientation、HorizontalAlignment 和VerticalAlignment 三个属性

合出各种排列和对齐方式。

 

 

 

 

 

Canvas

一、特点：

   Canvas是最基本的面板，只是一个存储控件的容器，它不会自动调整内部元素的排列及大小，它仅支持用显式坐标定位控件，它也允许指定相对任何角的坐标，而不仅仅是左上角。可以使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。通过设置Left和Right属性的值表示元素最靠近的那条边，应该与Canvas左边缘或右边缘保持一个固定的距离，设置Top和Bottom的值也是类似的意思。实质上，你在选择每个控件停靠的角时，附加属性的值是作为外边距使用的。如果一个控件没有使 用任何附加属性，它会被放在Canvas的左上方（等同于设置Left和Top为0）。

      Canvas的主要用途是用来画图。Canvas默认不会自动裁减超过自身范围的内容，即溢出的内容会显示在Canvas外面，这是因为默认 ClipToBounds=”False”；我们可以通过设置ClipToBounds=”True”来裁剪多出的内容。

 

二、使用方法：

<Window x:Class="WpfApp1.WindowCanvas"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowCanvas" Height="400" Width="500">
<Grid>
<Canvas Margin="0,0,0,0" Background="White">
<Rectangle Fill="Blue"
Stroke="Azure"
Width="250"
Height="200"
Canvas.Left="210" Canvas.Top="101"/>
<Ellipse Fill="Red"
Stroke="Green"
Width="250" Height="100"
Panel.ZIndex="1"
Canvas.Left="65" Canvas.Top="45"/>
</Canvas>
<Canvas>
<Button Name="btnByCode" Click="btnByCode_Click">后台代码实现</Button>
</Canvas>
</Grid>
</Window>

 

 

 

 

DockPanel

一、特点：

 DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

 DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。Dock 没有Fill值。作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，除非DockPanel的LastChildFill属性为false，它将朝某个方向停靠。

 

 

 

 

 

WrapPanel 

一、特点：

wrappanel将控件从左到右布局，当长度不够的时候回自动换行。 Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。