WPF布局

WPF在布局方式,根据项目的类型可以分为两种:

A:WPF应用程序布局根元素是Window,这是和Winform相对应的。

B:WPF浏览器程序布局根元素是Page,这是和ASP.NET对应的。

每种布局方式下面,可以放置形式各异的容器和控件。其中主要的几个

布局容器有:

  • StackPanel              以线性方式排列,其中控件可以水平或者垂直排列
  • DockPanel               以上、下、左、右、填充的方式排列控件
  • Grid                       以网格形式排列,可以按照行、列方式排列控件
  • CanVas                  根据Canvas确定子元素的精确位置
  • WrapPanel              根据排列属性可以从上到下,从左到右排列子元素

下面将依次介绍这几个容器。

1.StackPanel

这个容器对控件排列方式是竖着。即:Orientation="Vertical",通过它实现

子控件的对齐方式是水平还是垂直。

这个容器默认的排列方式是水平拉伸、垂直拉伸,即:

VerticalAlignment="Stretch" HorizontalAlignment="Stretch"

这两个属性是设置子控件所在容器中的位置,上、下、左、右、中、拉伸

示例

    <StackPanel Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <Label>1</Label>
        <Label>2</Label>
        <Label>3</Label>
        <Label>4</Label>
    </StackPanel>

结果

1

2

3

4

可以设置其中控件的排列状态,水平和垂直都有四个值:(上,下)或者(左,右),中间,拉伸。

水平拉伸相当于整行,垂直拉伸相当于整列。

2.DockPanel

这个容器对控件排列方式是横着。

默认最后一个控件设置填充,即:LastChildFill="True"

通过Dock属性来设置上、下、左、右。

这个容器默认的排列方式是水平拉伸、垂直拉伸,

示例 

    <DockPanel LastChildFill="True" >
        <Label DockPanel.Dock="Top">1</Label>
        <Label DockPanel.Dock="Left">2</Label>
        <Label DockPanel.Dock="Right">3</Label>
        <Label DockPanel.Dock="Bottom">4</Label>
        <Label >5</Label>
    </DockPanel>

3.Grid

这个容器通过网格的形式对子元素进行布局。

默认不显示分割线,即ShowGridLines="False"

 <Grid.ColumnDefinitions> 

   这里放置列,有多少ColumnDefinition就代表多少列,

</Grid.ColumnDefinitions>

行的规则和列想同,最后网格数就是行*列。

对于宽和高度设置,可以用绝对数字和相对数字

,20代表精确数字,20*是按照比例设置的。

同时还可以设置控件的位置和跨行、列显示。

示例

    <Grid ShowGridLines="False">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10*"></ColumnDefinition>
            <ColumnDefinition Width="20*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Label Grid.ColumnSpan="1" Grid.Column="0" Grid.Row="1">1</Label>
        <Label Grid.Column="1" Grid.RowSpan="2">2</Label>
    </Grid>

4.Canvas

这个容器排列子控件,是按照子控件相对于

Canvas的距离对子控件布局的。

示例

    <Canvas  ClipToBounds="False" >
        <Label Canvas.Top="1">1</Label>  

        <Label Canvas.Bottom="10" >2</Label>
        <Label Canvas.Left="20">3</Label>
        <Label Canvas.Right="10">4</Label>
        <Label Canvas.Top="70">5</Label>
    </Canvas>

5.WrapPanel

这个容器是以流的方式排列子控件的,

默认为Orientation="Horizontal",控件从左到右排列,然后从上到下依次排列。

根据属性Orientation="Vertical",则控件先从上到下,然后从左到右。

你可能感兴趣的:(WPF)