WPD布局元素

  • Grid

  Grid会以网格的形式对内容元素进行布局,其特点如下:

  1. 可以定义任意数量的行和列,非常灵活;
  2. 行的高度和列的宽度可以使用绝对数值、相对比例或自动调整的方式进行精确设定,并可设置最大值和最小值;
  3. 内部元素可以设置自己所在的行和列,还可以设置自己纵向跨几行、横向跨几列;
  4. 可以设置Children元素的对齐方向。

  Grid使用场合有:

  1. UI布局的大框架设计;
  2. 大量UI元素需要成行或者成列对齐的情况;
  3. UI整体尺寸改变时,元素需要保持固有的高度和宽度比例;
  4. UI后期可能有较大变更或扩展。

  定义Grid

  Grid有ColumnDefinitions和RowDefinitions两个属性,来定义列和行,代码如下:

 <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
    </Grid>

  也可通过代码动态添加,代码如下:

this.MyGrid.RowDefinitions.Add(new RowDefinition());
this.MyGrid.ColumnDefinitions.Add(new ColumnDefinition());

  • StackPanel
  • DockPanel
  • Canves
  • WraperPanel
时间: 2024-11-03 18:07:11

WPD布局元素的相关文章

css -- 布局元素

默认情况下拥有布局的元素:HTML ,table,tr,td,img,hr,input,select,textarea,button,iframe,embed,object,applet,marquee 设置以下css属性会自动让元素拥有布局:float,display:inline-block,width,height,zoom 拥有布局的元素不会收缩 布局元素对浮动自动清理 相对定位的元素没有布局 拥有布局元素之间的外边距不会叠加 在没有布局的块级链接上,单击区域只覆盖文本 在滚动时,列表项

[译]Polymer官方文档-布局元素

原文链接: Layout elements(注:有时需翻墙或换hosts)翻译日期: 2014年8月2日翻译人员: 铁锚 译注: 点击下载本教程的示例代码: Polymer布局元素Demo相关的代码文件在 layout 目录下. 0. 准备- Chrome浏览器模拟移动设备Chrome浏览器(要求最新版,如34以上版本)模拟移动设备的方法: 打开一个标签页,按 F12,(或者在页面空白区域点鼠标右键,审查元素),打开调试窗口. 然后在将光标移动到调试窗口中, 按 ESC键,或者点击右上角的 dr

第六十四节,html文档布局元素

html文档布局元素 学习要点:     1.文档元素总汇     2.文档元素解析     本章主要探讨HTML5中文档元素,文档元素的主要作用是划分各个不同的内容,让整个布局清晰明快.让整个布局元素具有语义,进一步替代div. 一.文档元素总汇     文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念.         元素名称                                 说明          h1~h6       表示标题         

如何用CSS快速布局(一)—— 布局元素详细

要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快速布局思路. 一.什么是块级元素和内联元素 1,块级元素: display:block表现出来的特点是折行的, 一般来说可以包含块级元素和内联元素: 例外: P 元素,只能包含内联元素,而不能包含块级元素. "form"这个块元素比较特殊,它只能用来容纳其他块元素. 2,内联元素: dis

CSS布局元素

一.display(元素显示模式) display属性用来设置元素的显示方式.如果display设置为none,float及position属性定义将生效. 语法:display: block | none | inline | inline-block 1)block:块对象值的是元素显示为一个方块,默认显示状态下将占据整行,其它元素只能另起一行显示.(块元素) 2)inline:行间对象与block刚好相反,它允许其它元素在同一行显示.(内联元素) 3)inline-block:指定对象为内

HTML5 1.9 新的布局元素

1.header元素(标签) a.通常用于设置一个页面的标题部分,通常包含标题,LOGO,导航 b.通常会放在文章的头部 2.footer元素(标签) a.通常用于设置一个网页的底部区域,会包含友情链接,版权声明,文件建立日期,联系方式等 b.通常会放在页面的页脚 3.article a.用于定义一个独立的内容区块,比如一篇文章.帖子.论坛的一段用户评论.一篇新闻消息等 b.可以嵌套其他元素,他可以有自己的头.尾.主题等,使用时要特别注意内容的独立性,一般对于独立完整的内容才使用article元

CSS Transform让百分比宽高布局元素水平垂直居中

很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法.但如果这个元素的宽高是用百分比表示呢? 如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的transform的translate转换属性.下面来看代码实例: HTML代码 <div class="

html5-新布局元素header,footer

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>header/footer</title>    <style type="text/css">        body{height: 708px}        header{background: red;wid

07 带语义的布局元素

-------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------