在本例中我们使用Dialog进行锚定式布局的说明，以下所做的说明和展现的效果对于dorado中所有支持layout特性的控件都是一样的。
我们首先看本例的操作效果，打开示例我们可以看到三个按钮，分别代表三种不同方式的锚定效果，分别单击每个按钮，会有弹出页面.
我们尝试着缩放这个弹出窗口或最大化这个窗口，并注意查看其效果。
场景一
在窗口大小发生变化时，其中的1,2的左边距和上边距保持不变，3和4的下边距保持不变。
如图：
其布局定义代码为:
<Dialog id="dialog1" caption="场景1" layout="Anchor" width="600" height="300" center="true" modal="true" maximizeable="true"
contentOverflow="hidden">
<HtmlContainer content="1) left:20; top:20" layoutConstraint="left:20; top:20" style="${argument.layoutRegion}" />
<HtmlContainer content="2) left:10; top:20; anchorLeft:previous" layoutConstraint="left:10; top:20; anchorLeft:previous"
style="${argument.layoutRegion}" />
<HtmlContainer content="3) right:20; bottom:20" layoutConstraint="right:20; bottom:20" style="${argument.layoutRegion}" />
<HtmlContainer content="4) right:10; bottom:20; anchorRight:previous" layoutConstraint="right:10; bottom:20; anchorRight:previous"
style="${argument.layoutRegion}" />
</Dialog>
场景二
在窗口大小发生变化时，其中1的上左右边距一直不变，而宽度可以自适应,2的上下左右边距一直不变，而区域的高度和宽度会自适应
如图:
其布局定义代码为:
<Dialog id="dialog2" caption="场景2" layout="Anchor" width="600" height="300" center="true" modal="true" maximizeable="true"
contentOverflow="hidden">
<HtmlContainer content="1) left:10; top:10; right:10" layoutConstraint="left:10; top:10; right:10" style="${argument.layoutRegion}" />
<HtmlContainer content="2) left:10; top:10; right:10; bottom:10; anchorTop:previous" layoutConstraint="left:10; top:10; right:10; bottom:10; anchorTop:previous"
style="${argument.layoutRegion}" />
</Dialog>
场景三
在窗口大小发生变化时，其中1上边距保持20像素，并且一直居中。2上下左右一直都居中，且宽度一直都是60%，3一直贴着右边，且宽度保持不变
如图:
其布局定义代码为:
<Dialog id="dialog3" caption="场景3" layout="Anchor" width="600" height="300" center="true" modal="true" maximizeable="true"
contentOverflow="hidden">
<HtmlContainer content="1) left:50%; top:20" layoutConstraint="left:50%; top:20" style="${argument.layoutRegion}" />
<HtmlContainer content="2) left:50%; top:50%; width:60%" layoutConstraint="left:50%; top:50%; width:60%" style="${argument.layoutRegion}" />
<HtmlContainer content="3) left:100%; bottom:0; width:300" layoutConstraint="left:100%; bottom:0; width:300" style="${argument.layoutRegion}" />
</Dialog>
