码迷,mamicode.com
首页 > Windows程序 > 详细

WPF布局

时间:2015-11-29 16:26:50      阅读:354      评论:0      收藏:0      [点我收藏+]

标签:

目录:

Grid布局 

Canvas布局

DockPanel布局

StackPanel布局

WrapPanel布局

Gird:

特点:

1)可以定义任意数量的行和列

2)行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式,可设置最大值和最小值

3)内部元素可以设置自己所在的行、列,还可以设置跨越几行、几列

4)可以设置内部元素的对齐方向

Grid类具有ColumnDefinitions和RowDefinitions两个属性,它们分别是ColumnDefinition和RowDefinition的集合,表示Grid定义了多少列、多少行,下面这段代码定义了一个3行4列的表格

 

 
  1. <Grid>  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="*" />  
  4.         <RowDefinition Height="20" />  
  5.         <RowDefinition Height="*" />  
  6.     </Grid.RowDefinitions>  
  7.     <Grid.ColumnDefinitions>  
  8.         <ColumnDefinition Width="*" />  
  9.         <ColumnDefinition Width="30" />  
  10.         <ColumnDefinition Width="*" />  
  11.         <ColumnDefinition Width="*" />  
  12.     </Grid.ColumnDefinitions>  
  13. </Grid>  
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="20" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>

 

 

对于Grid 的行高和列宽,可以设置3类值:

1)绝对值:double数值加单位后缀,默认为像素

2)比例值:double数值后加*

3)自动值:字符串Auto

设置内部控件的起始行用Grid.Row属性,起始列用Grid.Column属性,跨越行使用Grid.RowSpan属性,跨越列使用Grid.ColumnSpan属性


上面代码结果如下

技术分享

 

如果希望列宽可以拖动,Grip布局本身是不支持的,需要用Grid布局加上GridSplitter来实现,GridSplitter会改变Grid初始的行高、列宽,代码如下

 
  1. <Grid>  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition Height="25"></RowDefinition>  
  4.         <RowDefinition></RowDefinition>  
  5.     </Grid.RowDefinitions>  
  6.     <Grid.ColumnDefinitions>  
  7.         <ColumnDefinition Width="150"></ColumnDefinition>  
  8.         <ColumnDefinition Width="Auto"></ColumnDefinition>  
  9.         <ColumnDefinition></ColumnDefinition>  
  10.     </Grid.ColumnDefinitions>  
  11.     <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Black" />  
  12.     <TextBox Grid.Row="1" Grid.Column="0" BorderBrush="Black" />  
  13.     <GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="5" Background="Gray" ShowsPreview="True"></GridSplitter>  
  14.     <TextBox Grid.Row="1" Grid.Column="2" BorderBrush="Black" />  
  15. </Grid>  
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Black" />
        <TextBox Grid.Row="1" Grid.Column="0" BorderBrush="Black" />
        <GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="5" Background="Gray" ShowsPreview="True"></GridSplitter>
        <TextBox Grid.Row="1" Grid.Column="2" BorderBrush="Black" />
    </Grid>

技术分享

Canavs布局:

使用Canvas布局与在Windows Form窗体上布局基本上是一样的,当控件放置在Canvas里时附加上Canvas.X和Canvas.Y属性

示例代码:

  1. <Canvas>  
  2.     <TextBlock Text="用户名: " Canvas.Left="12" Canvas.Top="12" />  
  3.     <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="9" />  
  4.     <Button Content="确定" Width="80" Height="22" Canvas.Left="186" Canvas.Top="38"></Button>  
  5. </Canvas>  
    <Canvas>
        <TextBlock Text="用户名: " Canvas.Left="12" Canvas.Top="12" />
        <TextBox Height="23" Width="200" BorderBrush="Black" Canvas.Left="66" Canvas.Top="9" />
        <Button Content="确定" Width="80" Height="22" Canvas.Left="186" Canvas.Top="38"></Button>
    </Canvas>


效果如图

技术分享

DockPanel:

DockPanel内的元素会被附加上DockPanel.Dock这个属性,这个属性的数据类型为Dock枚举。Dock枚举可取Left、Top、Right和Bottom四个值,根据Dock的值,DockPanel内的元素会向指定方向累积、切分DockPanel内部剩余的空间,DockPanel的LastChildFill属性,用于设置DockPanel内最后一个元素是否会填充满全部的剩余空间

示例:

  1. <Grid>  
  2.     <DockPanel>  
  3.         <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"></TextBox>  
  4.         <TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Black"></TextBox>  
  5.         <TextBox BorderBrush="Black"></TextBox>  
  6.     </DockPanel>  
  7. </Grid>  
    <Grid>
        <DockPanel>
            <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"></TextBox>
            <TextBox DockPanel.Dock="Left" Width="150" BorderBrush="Black"></TextBox>
            <TextBox BorderBrush="Black"></TextBox>
        </DockPanel>
    </Grid>


效果如图:

技术分享

StackPanel:

StackPanel可以把内部元素在纵向或横向上紧凑排列,形成栈式布局

StackPanel的三个属性
属性名称 数据类型 可取值 描述
Orientation Orientation枚举
Horizontal
Vertical
决定内部元素是横向累积还是纵向累积
HorizontalAlignment HorizontalAlignment枚举
Left
Center
Right
Stretch
决定内部元素水平方向上的对齐方式
VerticalAlignment VerticalAlignment
Top
Center
Bottom
Stretch
决定内部元素竖直方向上的对齐方式

 

实例代码

 
  1. <Grid>  
  2.     <GroupBox Header="请选择没有错别字的成语"  BorderBrush="Black" Margin="5">  
  3.         <StackPanel Margin="5" Height="271">  
  4.             <CheckBox Content="A.迫不及待" />  
  5.             <CheckBox Content="B.首屈一指" />  
  6.             <CheckBox Content="C.陈词滥调" />  
  7.             <CheckBox Content="D.不可理喻" />  
  8.             <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">  
  9.                 <Button Content="清空" Width="60" Margin="5" />  
  10.                 <Button Content="确定" Width="60" Margin="5" />  
  11.             </StackPanel>  
  12.         </StackPanel>  
  13.     </GroupBox>  
  14. </Grid>  
    <Grid>
        <GroupBox Header="请选择没有错别字的成语"  BorderBrush="Black" Margin="5">
            <StackPanel Margin="5" Height="271">
                <CheckBox Content="A.迫不及待" />
                <CheckBox Content="B.首屈一指" />
                <CheckBox Content="C.陈词滥调" />
                <CheckBox Content="D.不可理喻" />
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="60" Margin="5" />
                    <Button Content="确定" Width="60" Margin="5" />
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </Grid>


效果如图:

技术分享

WrapPanel

 WrapPanel内部采用流式布局,使用orientation属性控制流延伸方向,用HorizontalAlignment和VerticalAlignment两个属性控制内部控件的对齐,例子如下

  1. <WrapPanel>  
  2.     <Button Width="50" Height="50" Content="OK" />  
  3.     <Button Width="50" Height="50" Content="OK" />  
  4.     <Button Width="50" Height="50" Content="OK" />  
  5.     <Button Width="50" Height="50" Content="OK" />  
  6.     <Button Width="50" Height="50" Content="OK" />  
  7.     <Button Width="50" Height="50" Content="OK" />  
  8.     <Button Width="50" Height="50" Content="OK" />  
  9.     <Button Width="50" Height="50" Content="OK" />  
  10.     <Button Width="50" Height="50" Content="OK" />  
  11.     <Button Width="50" Height="50" Content="OK" />  
  12. </WrapPanel>  
    <WrapPanel>
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
        <Button Width="50" Height="50" Content="OK" />
    </WrapPanel>


效果如下,改变窗口大小,内部控件的位置会自动调整

技术分享

 

同样的代码,改成垂直布局后的效果

技术分享

 

WPF布局

标签:

原文地址:http://www.cnblogs.com/Huaran1chendu/p/5004768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!