锚点布局的典型结构:

<x:Panel Layout="Anchor" runat="server">

             <Items>
                 <x:Panel runat="server" AnchorValue="100% 30%"></x:Panel>
                   <x:Panel runat="server" AnchorValue="100% 70%"></x:Panel>
             </Items>

6         </x:Panel>

有两个关键点:

1.父容器的LayOut属性设置为anchor

2.每个子容器控件设置AnchorValue属性,用来子控件的锚点布局参数。

AnchorValue的取值

有两个值组成,中间空格分割。也可以由一个值,第二个值就是默认值了。

这两个值分布表示水平的锚点值和垂直的锚点值。就是宽度和高度、

AnchorValue可以由百分值或者整形值构成。

  • 百分值
    • AnchorValue="100% 60%",表示此控件占据全部的宽度和60%的高度。
    • AnchorValue="100%",此控件占据全部的宽度,高度自动。
  • 整型值(可以是正值或者负值)
    • AnchorValue="-100 -20",表示此控件右边框距离父控件右边框100px,此控件下边框距离父控件下边框20px。
    • AnchorValue="100 20",表示此控件右边框超出父控件右边框100px,此控件下边框超出父控件下边框20px。

也可以如此:

AnchorValue="100% -20",表示此控件占据父控件全部宽度,此控件下边框距离父控件下边框20px。

FineUI第十二天---锚点布局的更多相关文章

  1. FineUI第十四天---布局之垂直布局和水平布局

    布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...

  2. FineUI第十三天---`列布局

    这是经典的列布局:                  <x:Panel runat=                     <Items>                      ...

  3. ExtJs 添加员工 实例 ---- 锚点布局 anchor 可自动伸缩

    代码如下: <script type="text/javascript"> Ext.onReady(function () { // 创建一条记录行, job 为 di ...

  4. 锚点布局anchorlayout在kv中的引用

    from kivy.app import App from kivy.uix.anchorlayout import AnchorLayout from kivy.uix.button import ...

  5. FineUI页面布局

    使用布局的优势 相对于为控件设置固定的宽度和高度,布局的重要意义在于子控件可以根据父控件的尺寸自动设置自己的尺寸,在页面尺寸改变时同样有效.如果你在项目中遇到类似如下的需求,就需要考虑布局了: 面板填 ...

  6. 第五篇:在SOUI中使用XML布局属性指引(pos, offset, pos2type)

    窗口布局的概念 每一个UI都是由大量的界面元素构成的,在Windows编程,这些界面元素的最小单位通常称之为控件. 布局就是这些控件在主界面上的大小及相对位置. 传统的布局一般使用一个4个绝对坐标来定 ...

  7. 深入浅出ExtJS 第六章 布局

       6.1 布局的用途 6.1 布局的用途 //决定把什么东西放到什么位置; var vieport = new Ext.Viewport({ layout:'border', //使用Border ...

  8. Ext.Net 布局

    Ext.Net 布局 Panel布局类有10种:容器布局,自适应布局,折叠布局,卡片式布局,锚点布局,绝对位置布局,表单布局,列布局,表格布局,边框布局       1,Ext.layout.Cont ...

  9. FineUI属性的简单总结

    .PageManager控件— 页面级别的控制(包括主题.语言 等等) 覆盖web.config中自定义结点的配置 EnablePageLoading:是否启用页面的第一次加载提示,默认居中显示加载图 ...

随机推荐

  1. JS-计算器制作

    不完善,接下来想着把运算符分开成一个一个的按钮... <!DOCTYPE html><html> <head> <meta charset="UTF ...

  2. photobooth.js jquery

    <div id="example" class="photobooth" style="width:758px;height:400px&quo ...

  3. 安装glue,用glue批量处理图片的步骤

     glue批量处理图片:http://glue.readthedocs.io/en/latest/quickstart.html#and-why-those-css-class-names 首先需要安 ...

  4. array_filter移除空数组

    $arr = array( "0"=> "564645", "1"=>"", "2"=& ...

  5. jsp机制基础

    JSP 和Servlet技术一样,JSP也是SUN公司定义的一种开发动态web资源的技术,属于JavaEE技术之一.JSP实际上就是Servlet,它们在一起又称JSP/Servlet规范. Serv ...

  6. .net3.5后新增的 BeginInvoke EndInvoke 异步操作

    protected void Main() { //首先定义一个方法的封装..后边的LongTimeMethod是被封装的方法.. Func<int> longTimeAction = n ...

  7. jquery报错Uncaught ReferenceError: $ is not defined

  8. 【转】随机函数的rand、srand用法

    from:深海的小鱼儿 地址:http://www.cnblogs.com/xmphoenix/archive/2011/04/07/2008622.html 随机函数的rand.srand用法 一& ...

  9. background的css 排列顺序写法?

    可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 background-repeat 背景重复 b ...

  10. [原]发布一个jQuery提示框插件,Github开源附主站,jquery.tooltips.js

    一个简单精致的jQuery带箭头提示框插件 插件写好快一年了,和一个 弹出框插件(点击查看) 一起写的,一直没有整理出来,昨天得功夫整理并放到了github上,源码和网站均可在线看或下载. CSS中的 ...