@(Html.X().Window()
.Width(600)
.Height(400)
.Layout(LayoutType.Border)
.Items(p
=>
{
p.Add(Html.X().Panel().Title("North")
.Height(100)
.Region(Region.North)
.Items(i => { }));
p.Add(Html.X().Panel().Title("South")
.Height(100)
.Region(Region.South)
.Items(i => { }));
p.Add(Html.X().Panel().Title("Center")
.Region(Region.Center)
.Items(i => { }));
p.Add(Html.X().Panel().Title("West")
.Width(100)
.Region(Region.West)
.Items(i => { }));
p.Add(Html.X().Panel().Title("East")
.Width(100)
.Region(Region.East)
.Items(i => { }));
}));
效果如下：
Border布局是我们常用的布局，这里我们是创建了一个Window，设置他的布局Layout属性为LayoutType.Border，这样就创建好了一个布局为Border的Window；接下来我们给当前布局为Border的Window添加相应的元素：这里已Panel为例，我们只需定义每个Panel的Region属性即可定义Panel所处的位置（可以设置的位置有Center（中心）、North（北部）、South（南部）、West（西部）、East（东部）、None(无）），这样就完成了简单的Border布局。