WPF布局

WPF 布局原理：

　　WPF窗口，也是Window类，是一个内容控件，派生出自ContentControl

布局容器：

面板功能  说明
StackPanel 使用水平或者垂直堆叠的方式放置元素，简单有用，适用于小范围布局
WarpPanel 当方向水平时，从左到右布局，当宽度不够时，重新开一个行从左到右布局，垂直同理
DockPanel 使子元素依赖于特定边缘，很灵活的布局控件　　
Grid Grid是WPF中最好用的布局控件，类似一个不可见的HTML表格，将子元素放置于特定的行列
UniformGrid 将子元素放置在一个不可见的表格中，但是强制所有的表格具有相同的尺寸
Canvas 使用固定坐标来绝对定位子元素

一：使用stackPanel布局　　

<StackPanel>
<Button>按钮1</Button>
<Button>按钮2</Button>
<Button>按钮3</Button>
<Button>按钮4</Button>
<Button>按钮</Button>

</StackPanel>

 

哈哈 现在看起来挺丑的吧

默认情况下 Stackpanel 从上到下排列控件，控件高度与其内容高度相匹配。

Stackpanel属性:Orientation    取值:  Horizontal (从左到右)    Vertical (从上到下)    

Stackpanel内元素属性：HorizontalAlignment 枚举属性  获取或设置在父元素中构成此元素时应用于此元素的水平对齐特征.

　　　　　　　　　　　 VerticalAlignment 枚举属性 获取或者设置在父元素中构成此元素时应用于此元素的垂直对齐特征。

还是举例子说吧   俗话说No picture Say a J8  所以上图：

<StackPanel Orientation ="Horizontal">
<Button VerticalAlignment="Bottom">按钮1</Button>
<Button VerticalAlignment="Stretch">按钮2</Button>
<Button VerticalAlignment="Top">按钮3</Button>
<Button VerticalAlignment="Center">按钮4</Button>
<Button VerticalAlignment="Bottom">按钮</Button>
</StackPanel>

    StackPanel 布局属性: stackpanle 提供了一些设定子元素在父元素中的呈现方式的属性。使用这些属性开发人员可以控制子元素在stackpanel中的布局方式，除了上面的对齐属性外，还具有如下的布局属性：

属性名称 属性说明
Margin 可以在子元素四周增加空白，Margin是 System.Windows.thickness结构的属性，也可以只定义一个值，则上下左右都具有同样的值。
MinWidth和MinHeight 设置元素最小尺寸，如果元素大于容器大小，则会被剪裁
MaxWith和MaxHeight 设置元素的最大尺寸，如果元素大于容器大小 ，则会被剪裁　　
Width和Height 设置固定的元素大小  这个属性会覆盖HorizontalAligment 和 VerticalAligment属性的设置

 

例：

<StackPanel Orientation ="Horizontal">
<Button Margin="0">按钮1</Button>
<Button Margin="1">按钮2</Button>
<Button Margin="5">按钮3</Button>
<Button Margin="6,20,5,120" >按钮4</Button>
<Button name="btn5" Margin="20" Width="50" Height="50">按钮</Button>
</StackPanel>

 

当然这个布局也可以在程序里修改：
　　  btn5.Margin = new Thickness(80);    

　　　或者

 　　 btn5.Margin = new Thickness(5,5,5,5);    

在调整页面大小时，可以使用最大化和最小化尺寸来锁定控件在的正确大小范围哦。

二 使用WarpPanel 和 DockPanel

1.WarpPanel 改控件根据Orientation 属性，在垂直放控件或者在行中放置控件方面，WarpPanel 和 Stack类似。除了叠放外 还为包含的控件提供了换行支持 因此 如果在WarpPanel中纺入超过其容器宽度的内容时，这些控件被换行显示为形成换行的效果。

上代码:

<WrapPanel>
        <Button Height="60">按钮一</Button>
        <Button VerticalAlignment="Top">按钮二</Button>
        <Button VerticalAlignment="Center">按钮三</Button>
        <Button VerticalAlignment="Center">按钮四</Button>
        <Button VerticalAlignment="Bottom">按钮五</Button>
    </WrapPanel>

　　

 

2.DockPanel DockPanel提供停靠支持 以便让工具栏或者用户希望停靠在面板的一侧容易定位。

DockPanel 控件提供了附加属性Dock  这是一个枚举类型   控制要停靠的容器边缘

  • Left 　　   
  • Top
  • Right
  • Bottom
    <DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top">上</Button>
        <Button DockPanel.Dock="Left">左</Button>
        <Button DockPanel.Dock="Right">右</Button>
        <Button DockPanel.Dock="Bottom" Height="60">下</Button>
        <Button>剩余空间</Button>
    </DockPanel>

　　

LastChildFill="True"
这个是默认设置  无论DockPanel最后一个子元素设置的停靠值是什么  该子元素都
始终填充满剩余的空间 如果是False  则需要对最后一个元素设置停靠方向

　　　 如果设置为

 LastChildFill="Flase"  上图：

如果想要让左侧占满整个高度  需要改变左在XAML中的定义顺序。开发人员也可以通过调节Margin，HorizontalAligment,VerticalAligment等属性来控制元素的显示方式   上图：

<DockPanel LastChildFill="True">
        <Button DockPanel.Dock="Top">上</Button>
        <Button DockPanel.Dock="Top" HorizontalAlignment="Center">上</Button>
        <Button DockPanel.Dock="Top" HorizontalAlignment="Left">上</Button>
        <Button DockPanel.Dock="Left">左</Button>
        <Button DockPanel.Dock="Right">右</Button>
        <Button DockPanel.Dock="Bottom" Height="60">下</Button>
        <Button>剩余空间</Button>
    </DockPanel>

　　

怎么样简单吧!!  接下来练习一下：

 

posted on 2014-12-04 22:15  卤肉饭  阅读(205)  评论(0)    收藏  举报

导航