在线演示http://v.youku.com/v_show/id_XNzA5NDk2Mjcy.html

清晰版视频+代码下载http://115.com/lb/5lbeer0m9lad



一、简单介绍

本篇对WPF的布局控件做一个初步的概览,并分别演示Grid、StackPanel、Canvas、DockPanel和WrapPanel五个布局控件。。

主要内容包含:

1、UI布局的方式和关系。

2、WPF的布局理念。

3、五种布局控件的概述和演示。

4、小结。

二、UI布局的方式和关系

1、三种布局方式:绝对定位、相对定位和行列定位。

2、三种布局关系:相领、叠加和包括关系。

对于包括关系,可參加例如以下的演示样例代码,Button控件中包括了Button控件。

  1. <Button Margin="144,50,153,57">
  2. <Button.Content>
  3. <Button Margin="10">
  4. <Button.Content>
  5. <Button Margin="10">
  6. <Button.Content>
  7. <Button Margin="10">
  8. <Button.Content>
  9. <Button Margin="10">
  10. <Button.Content>
  11. <Button Margin="10">
  12. <Button.Content>
  13. <Button Margin="10">
  14. <Button.Content>
  15. <Button Margin="10">
  16. <Button.Content>
  17. <Button Margin="10">
  18. <Button.Content>
  19. <Button Margin="10" Content="OK" />
  20. </Button.Content>
  21. </Button>
  22. </Button.Content>
  23. </Button>
  24. </Button.Content>
  25. </Button>
  26. </Button.Content>
  27. </Button>
  28. </Button.Content>
  29. </Button>
  30. </Button.Content>
  31. </Button>
  32. </Button.Content>
  33. </Button>
  34. </Button.Content>
  35. </Button>
  36. </Button.Content>
  37. </Button>

效果例如以下图所看到的:

三、WPF的布局理念

把一个布局元素作为ContentControl或HeaderedContentControl族控件的Content,再在布局里面加入要被布局的子级控件,假设UI局部须要更复杂的布局,那就在这个区域设置一个子级的布局元素,形成布局元素的嵌套。

四、五种布局控件的概述和演示

Grid:网格布局控件。能够自己定义行和列并通过行列的数量、行高和列宽来调整控件的布局。类似于HTML中Table元素。

StackPanel:栈式面板控件。可将包括的元素在竖直或水平方向上排成一条直线,当移除一个元素后,后面的元素会自己主动向前移动以填充空缺。

Canvas:画布控件。内部元素能够使用以像素为单位的绝对坐标进行定位,类似于传统的WinForm布局方式。

DockPanel:泊靠式面板。内部元素能够选择泊靠方向,类似于传统WinForm的Dock属性。

WrapPanel:自己主动折行面板。内部元素在排满一行后可以自己主动折行,类似于HTML中的流式布局。

 



五、小结

本演示主要介绍的内容包含:

1、控件的布局关系:叠加、相邻和包括。;

2、五种布局控件概述。Grid、StackPanel、Canvas、DockPanel、WrapPanel

具体内容请參加视频演示!

WPF UI布局之概述的更多相关文章

  1. WPF——UI布局

    1.规划整体布局(规划界面结构)——>这样就可以划分出若干区域(区域的控件通常是一些容器控件) 2.针对 上面的 “若干区域” ,制作每个区域的一级用户控件(然后,将该用户控件放入对应的区域中) ...

  2. wpf UI 布局

    1.Grid *号代表百分比,也可以使用固定值,需要预先设置 有几行几列 以及宽度和高度 ,在表格中的控件需要 表明自己所在第几行 第几列 2.StackPanel 重点需要设置 排列方向 水平还是垂 ...

  3. WPF案例 (六) 动态切换UI布局

    原文:WPF案例 (六) 动态切换UI布局 这个Wpf示例对同一个界面支持以ListView或者CardView的布局方式呈现界面,使用控件ItemsControl绑定数据源,使用DataTempla ...

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

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

  5. WPF六个控制概述

    在线演示:http://v.youku.com/v_show/id_XNzA0NjU1Mjk2.html 清晰版视频+代码下载:http://115.com/lb/5lbcftnrfo9s 一.简单介 ...

  6. WPF常用布局介绍

    概述:本文简要介绍了WPF中布局常用控件及布局相关的属性 1 Canvas Canvas是一个类似于坐标系的面板,所有的元素通过设置坐标来决定其在坐标系中的位置..具体表现为使用Left.Top.Ri ...

  7. WPF 之 布局(一)

    WPF的布局控件都在 System.Windows.Controls.Panel 这个基类下面,使用 WPF提供的各种控件在WPF应用程序中界面进行布局,同时对各种子控件(如按钮.文本框,下拉框等)进 ...

  8. [WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画

    1. 前言 这篇文章介绍WPF UI元素的两步布局过程,并且通过Resizer控件介绍只使用Measure可以实现些什么内容. 我不建议初学者做太多动画的工作,但合适的动画可以引导用户视线,提升用户体 ...

  9. UI-WPF_UI:WPF UI - DMSkin官方网站

    ylbtech-UI-WPF_UI:WPF UI - DMSkin官方网站 1.返回顶部 1. QQ: 944095635 DMSkin.com 首页 论坛 定制 博客  联系   DMSkin 3. ...

随机推荐

  1. Android01--开发环境搭建

    1 -- 下载所需软件 Android SDK下载地址:http://developer.android.com/sdk/index.html Eclipse下载地址:http://www.eclip ...

  2. 130道ASP.NET面试题

    转:http://boke.25k5.com/kan88569.html 1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . privat ...

  3. mysql 自旋锁

    自旋(spin)是一种通过不间断地测试来查看一个资源是否变为可用状态的等待操作,用于仅需要等待很短的时间等待所需资源的场景.使用自旋这种“空闲循环(busy-loop)”来完成资源等待的方式要比通过上 ...

  4. 查询MySQL锁等待的语句

    select 'Blocker' role,    p.id,    p.user,    left(p.host, locate(':', p.host) - 1) host,    tx.trx_ ...

  5. [Everyday Mathematics]20150201

    设数列 $\sed{a_n}$ 单调递减趋于零, 证明 $\dps{\vsm{n}a_n}$ 收敛当且仅当 $\dps{\vsm{n}3^k a_{3^k}}$ 收敛.

  6. 如何清除win7开机密码

    一.电脑已经登录到系统,但是忘记了密1对于这种情况是最简单的,其实只需要将密码取消就可以了右键单击桌面上我的电脑,选择管理即可进入计算机管理界面2依次展开系统工具--本地用户和组--用户,在右侧选择要 ...

  7. DateTime.IsLeapYear 方法判断是否是闰年,DaysInMonth判断一个月有几天,Addday取得前一天的日期GetYesterDay

    一:DateTime.IsLeapYear 方法判断是否是闰年 二:代码 using System; using System.Collections.Generic; using System.Co ...

  8. select的option异常的总结

    来源:http://www.ido321.com/1189.html 昨天,在项目中碰到了option显示异常的原因,截图如下: Firefox中用css控制之后效果 chrome和IE中css不奏效 ...

  9. 重读gets()与is函数的用法

    这是从百度百科上查找的资料: gets(): 从stdin流中读取字符串,直至接受到换行符或EOF时停止,并将读取的结果存放在buffer指针所指向的字符数组中.换行符不作为读取串的内容,读取的换行符 ...

  10. DRAM 内存介绍(一)

    转载自博客大神迈克老狼的blog: http://www.cnblogs.com/mikewolf2002/archive/2012/11/13/2768804.html 参考资料:http://ww ...