@(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布局。