应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局。你可以使用这些面板控件来排布元素。如果内置布局控件不能满足需要的话,还可以创建自定义的布局元素。

面板(Panel)
WPF用于布局的面板主要有6个,StackPanel(栈面板)、WrapPanel(环绕面板)。DockPanel(停靠面板)、Canvas(画布)、Grid(网格面板)和UniformGrid(均布网格)。

StackPanel:栈面板

栈面板,可以将元素排列成一行或者一列,其特点是:每个元素各占一行或者一列,Orientation属性指定排列方式:Vertical(垂直)【默认】、Horizontal(水平),默认情况下,水平排列时,每个元素都与面板一样高;垂直排列时,每个元素都与面板一样宽。如果包含的元素超过了面板空间,它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

1、垂直方向排列

界面运行效果:

使用XAML代码实现:

 <Window x:Class="WpfDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StackPanel面板" Height="" Width="" WindowStartupLocation="CenterScreen">
<StackPanel x:Name="stackpanel" Margin="" Orientation="Vertical">
<Button Content="第一个"></Button>
<Button Content="第二个"></Button>
<Button Content="第三个"></Button>
<Button Content="第四个"></Button>
</StackPanel>
</Window>

2、水平方向排列

界面运行效果:

使用XAML代码实现:

 <Window x:Class="WpfDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StackPanel面板" Height="" Width="" WindowStartupLocation="CenterScreen">
<StackPanel x:Name="stackpanel" Margin="" Orientation="Horizontal">
<Button Content="第一个"></Button>
<Button Content="第二个"></Button>
<Button Content="第三个"></Button>
<Button Content="第四个"></Button>
</StackPanel>
</Window>

注: 当把StackPanel的FlowDirection属性设置为RightToLeft,Orientation属性设置为Horizontal,StackPanel将从右向左排列元素。

WPF教程二:布局之StackPanel面板的更多相关文章

  1. WPF教程二:理解WPF的布局系统和常用的Panel布局

    WPF的布局系统 了解元素的测量和排列方式是理解布局的第一步.在测量(measure)阶段容器遍历所有子元素,并询问子元素它们所期望的尺寸.在排列(arrange)阶段,容器在合适的位置放置子元素.理 ...

  2. WPF之旅(三)- 布局之StackPanel

    说到WPF的界面布局,相信很多朋友都写过Html代码.在WPF中,大多数程序都使用类似Web的(flow)流布局.在使用流布局模型时,各种控件可以按特定的要求来排列,在窗口内容发生变化时,比如窗口大小 ...

  3. WPF系列教程——(二)使用Prism实现MVVM设计模式 - 简书

    原文:WPF系列教程--(二)使用Prism实现MVVM设计模式 - 简书 本文假设你已经知道MVVM设计模式是什么,所以直接进入正题,今天我们就用Prism来实现WPF的MVVM设计模式,百度上关于 ...

  4. WPF 入门《布局面板》

    常见的几个布局面板 1.StackPanel面板 StackPanel面板能够简单根据单行或者单列进行元素排列, StackPanel 默认的布局方向为垂直方向(Vertical), 由Orienta ...

  5. Windows 8实例教程系列 - 布局控制

    原文:Windows 8实例教程系列 - 布局控制 与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Windows8布局设计控制. Windows 8布 ...

  6. 3、WPF学习之-布局

    一.基础知识 1.所有WPF布局容器都派生自System.Windows.Controls.Panel抽象类的面板: 2.WPF种核心布局面板有StackPanel(栈面板).WrapPanel(环绕 ...

  7. WPF的UI布局(Layout)WPF读书笔记(第三天)

        WPF的布局元素有一下几个 Grid:网格.可以自定义行和列并且通过行列的数目.行高和列宽来调整控件的布局. StackPanel:格式面板.可将包含的元素在水平方向或者竖直方向排成一条线. ...

  8. WPF教程002 - 实现Step步骤条控件

    原文:WPF教程002 - 实现Step步骤条控件 在网上看到这么一个效果,刚好在用WPF做控件,就想着用WPF来实现一下 1.实现原理 1.1.该控件分为2个模块,类似ComboBox控件分为Ste ...

  9. WPF属性(二)附加属性

    原文:WPF属性(二)附加属性 附加属性是说一个属性本来不属于某个对象,但由于某种需求而被后来附加上,也就是把对象放入一个特定环境后对象才具有的属性就称为附加属性,附加属性的作用就是将属性与数据类型解 ...

随机推荐

  1. [Python]网络爬虫(五):urllib2的使用细节与抓站技巧(转)

    1.Proxy 的设置 urllib2 默认会使用环境变量 http_proxy 来设置 HTTP Proxy. 如果想在程序中明确控制 Proxy 而不受环境变量的影响,可以使用代理. 新建test ...

  2. ceph 之recovery machhine

    一.概述 ceph recovery状态机的变化过程:

  3. python解压压缩包的几种方法

    这里讨论使用Python解压例如以下五种压缩文件: .gz .tar  .tgz .zip .rar 简单介绍 gz: 即gzip.通常仅仅能压缩一个文件.与tar结合起来就能够实现先打包,再压缩. ...

  4. python bs4 + requests4 简单爬虫

    参考链接: bs4和requests的使用:https://www.cnblogs.com/baojinjin/p/6819389.html 安装pip:https://blog.csdn.net/z ...

  5. Latex 环境下“中文字体”的使用

    Latex 环境下“中文字体”的使用 使用CTex自带编辑器WinEdt,在该环境下如何使用中文字体呢?作为一个菜鸟,折腾了好几天,最终基本解决了这个问题.现在整理下,分享给后来者. 对于使用中文字体 ...

  6. intellij IDEA开发node.js

    现在网上好像关于IDEA开发node.js的讲解不是太多,今天试了一下,竟然成功了.... 1.安装nodejs http://nodejs.org/download/  自动根据系统下载自己的版本n ...

  7. Nginx+mysql+php(待补全)

    先安装 Nginx 通过源码安装可以指定目录(/usr/local/Nginx/) yum或源码安装Mysql yum或源码安装php(记得命令一定要全,别忘了安装php-fpm) 待补全

  8. [转]WCF类型共享技巧

    调用过WCF服务的同学可能都会遇到这样的问题,同一个实体类型,不同的服务Visual Studio生成了不同的版本,例如Service1.User和Service2.User,对于C#来说,这是两个不 ...

  9. linux c:关联变量的双for循环

    举例说明: 比如打印一个倒三角形. * * * * * * * * * * 第一层循环为行数,第二层循环为每行打印的*数,且随着行数的变化,打印的*数也随着改变. 这就是关联变量的双层循环.我的做法是 ...

  10. 使用cat命令添加或附加多行文本

    覆盖原有文本: cat>test<<EOF the 1 line the 2 line the 3 line EOF 追加的原有文本尾部: cat>>test<&l ...