WPF中的StackPanel、WrapPanel、DockPanel(转)

一、StackPanel

StackPanel是以堆叠的方式显示其中的控件

1、可以使用Orientation属性更改堆叠的顺序

Orientation="Vertical"

默认,由上到下显示各控件。控件在未定义的前提下,宽度为StackPanel的宽度,高度自动适应控件中内容的高度

 1: <StackPanel Orientation="Vertical">
 2: <Button>Button A</Button>
 3: <Button>Button B</Button>
 4: <Button>Button C</Button>
 5: <Button>Button D</Button>
 6: <Button>Button E</Button>
 7: <Button>Button F</Button>
 8: </StackPanel>


Orientation="Horizontal"

由左到右显示各控件。控件在未定义的前提下,高度为StackPanel的高度,宽度自动适应控件中内容的宽度

 1: <StackPanel Orientation="Horizontal">
 2: <Button>Button A</Button>
 3: <Button>Button B</Button>
 4: <Button>Button C</Button>
 5: <Button>Button D</Button>
 6: <Button>Button E</Button>
 7: <Button>Button F</Button>
 8: </StackPanel>

2、设置控件的属性,调整控件的显示

Margin属性
定义控件的外边缘,可以通过以下几种方式来设置
1)Margin=”10”:各边缘均为10
2)Margin=”10,20,30,40”:设定左、上、右、下各边缘分别为10、20、30、40
3)使用拆分式方式设定,如上下为10,左右为20

 1: <Button Content="Button A">
 2: <Button.Margin>
 3: <Thickness Top="10" Bottom="10" Left="20" Right="20" />
 4: </Button.Margin>
 5: </Button>

Width、Height属性
设定控件的宽度和高度,取消自动的宽度和高度
HorizontalAlignment、VerticalAlignment属性
设定控件的水平或竖直对齐方式,如整体Orientation="Vertical"的前提下,设置水平对齐为Left、Right或Center,在没有设定宽度的情况下,控件的宽度自动调整
MinWidth、MinHeight、MaxWidth、MaxHeight属性
在调整窗体大小,同时更改控件大小时,控件宽度、高度可变化的最大值和最小值

WPF StackPanel

图1.1

WPF中的StackPanel控件是一种简单常用的布局控件。它可根据orientation属性设置面板里面的每个子元素是依靠在前一个控件的旁边(横向)还是下面(纵向)。对于创建各种类型的列表非常有用。所有的继承于ItemsControls的WPF控件,如ComboBox,ListBox和Menu控件都可以使用StackPanel做为它的内部布局面板。

<StackPanel>

<TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock>
  <Button Margin="10">Black</Button>
  <Button Margin="10">With milk</Button>
  <Button Margin="10">Latte machiato</Button>
  <Button Margin="10">Chappuchino</Button>
</StackPanel>

上面这一段代码将把StackPanel面板里面的每个控件,从上往下排列,如图1.1所示。

Stack Items horizontally

有一个很好的例子,如有一个有“OK"和"Cancel“按钮的对话框,因为按钮上的文字可能因字体的改变而发生大小改变,我们应该避免固定按钮大小的写法。StackPanel会自动根据面板的大小的自动调整内部控件的大小。我们就不用为按钮太大或太小而烦恼了。

  <StackPanel Margin="8" Orientation="Horizontal"> <Button MinWidth="93">OK</Button> <Button MinWidth="93" Margin="10,0,0,0">Cancel</Button> </StackPanel> 

二、WrapPanel

以流的形式由左到右,由上到下显示控件,其功能类似于JavaAWT布局中的FlowLayout

三、DockPanel

以上、下、左、右、中为基本结构的布局方式,类似于Java AWT布局中的BorderLayout。

但与BorderLayout不同的是,每一个区域可以同时放置多个控件,在同一区域放置的多个控件采用的布局方式为StackPanel方式。

如:

 1: <DockPanel >
 2: <Button Content="ButtonA" Width="70" DockPanel.Dock="Top" />
 3: <Button Content="ButtonB" Width="70" HorizontalAlignment="Right" DockPanel.Dock="Top" />
 4: <Button Content="ButtonC" Margin="10" DockPanel.Dock="Top" />
 5: <Button Content="ButtonD" DockPanel.Dock="Left" />
 6: <Button Content="ButtonE" DockPanel.Dock="Right" />
 7: <Button Content="ButtonF" DockPanel.Dock="Bottom" />
 8: <Button Content="ButtonG" />
 9: </DockPanel>  
时间: 2024-11-05 17:24:26

WPF中的StackPanel、WrapPanel、DockPanel(转)的相关文章

WPF中的导航框架(一)——概述

有的时候,我们需要一个支持页面跳转的UI,例如文件浏览器,开始向导等.对于这样的界面,简单的可以使用ContentControl + ContentTemplateSelector的方式来实现,但是有的时候我们会需要一些更加高级的跳转功能,如前进,回退等.这个时候,用这个方式就稍微有点力不从心了,此时,我们可以使用WPF的导航框架帮助我们快速实现这一功能. WPF 的Page框架主要包括两个部分,容器和页面, 下面就以一个简单的例子来介绍WPF的Page框架,首先我们创建第一个页面: <Page

WPF中的导航框架

有的时候,我们需要一个支持页面跳转的UI,例如文件浏览器,开始向导等.对于这样的界面,简单的可以使用ContentControl + ContentTemplateSelector的方式来实现,但是有的时候我们会需要一些更加高级的跳转功能,如前进,回退等.这个时候,用这个方式就稍微有点力不从心了,此时,我们可以使用WPF的导航框架帮助我们快速实现这一功能. WPF 的Page框架主要包括两个部分,容器和页面, 下面就以一个简单的例子来介绍WPF的Page框架,首先我们创建第一个页面: <Page

在WPF中使用CefSharp嵌入浏览器(转)

在WPF中使用CefSharp嵌入浏览器 日常开发中,我们需要将一些Web页面嵌入到桌面客户端软件中.下面我们使用CefSharp嵌入浏览器来实现. 首先先介绍一下CefSharp嵌入式浏览器,它是基于Google浏览器的一个组件,我们可以在WPF/WinForm客户端软件中使用它.CefSharp的代码托管在GitHub上,.NET (WPF and Windows Forms) bindings for the Chromium Embedded Framework. 目前最新版本的CefS

转:WPF中ListBox的创建和多种绑定用法

先从最容易的开始演示ListBox控件的创建. Adding ListBox Items下面的代码是向ListBox控件中添加多项ListBoxItem集合.XAML代码如下:<ListBox Margin="10,10,0,13" Name="listBox1" HorizontalAlignment="Left"         VerticalAlignment="Top" Width="194"

WPF中使用MVVM创建一个简单的框架

MVVM模式 一.MVVM模式概述 MVVM Pattern : Model\View\ViewModel View:视图.UI界面 ViewModel:ViewModel是对Model的封装,通过一系列属性暴露Model的状态,提供给View进行显示 Model:数据模型 使用MVVM模式可以将代码逻辑和UI进行分离,因此开发团队可以关注创建健壮的ViewModel类,而设计团队可以关注设计界面友好的View.要融合两个团队输出只需要在View的xaml上进行正确的绑定即可. 二.演示程序 下

WPF中ComboBox用法

The ComboBox control is in many ways like the ListBox control, but takes up a lot less space, because the list of items is hidden when not needed. The ComboBox control is used many places in Windows, but to make sure that everyone knows how it looks

[转]WPF中的导航框架

有的时候,我们需要一个支持页面跳转的UI,例如文件浏览器,开始向导等.对于这样的界面,简单的可以使用ContentControl + ContentTemplateSelector的方式来实现,但是有的时候我们会需要一些更加高级的跳转功能,如前进,回退等.这个时候,用这个方式就稍微有点力不从心了,此时,我们可以使用WPF的导航框架帮助我们快速实现这一功能. WPF 的Page框架主要包括两个部分,容器和页面, 下面就以一个简单的例子来介绍WPF的Page框架,首先我们创建第一个页面: <Page

WPF中使用VisualBrush的实例

本文实现一个名为"你来我往"的小程序,该程序管理着"张三"和"李四"两位童鞋拥有的现金,一开始,两人均拥有100美元的现金,随着将现金从其中一人转移至另外一人,两人拥有的现金数在不断变化,程序可以跟踪这种变化,并正确显示每人拥有的现金数.每次最多可以转移三张纸币,纸币的金额可以是5美元.10美元或者20美元. 程序运行后的效果如图1所示,我们点击"张三"右边的"5美元""10美元"&qu

在WPF中使用fortawesome之类的字体图标

我之前在博客中介绍过几个矢量图库网站,在WPF程序中,一般接触到的矢量图标资源有XAML.SVG.字体这三种格式.XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression Design可以非常方便我们将其转换为XAML格式的资源.而对于字体,虽然WPF是直接支持的,但由于字体图标其特殊性,要将其显示为图标还是需要费点劲的.本文这里就以Font-Awesome为例,介绍一下如何在WPF中使用字体图标. 首先添加一个样式,为了使用方便,建议直接做为全局样式: <Styl