布局包括視圖相同的組件 （標記、 隱藏的代碼和樣式表），區別在于布局包含呈現視圖內容的占位符，當使用布局的應用程序需要顯示一個視圖時，它的內容會都合并到布局，并顯示得到的標記。占位符可以有關聯的視覺過渡效果，主要是在視圖更改的時候使用，使得布局達到以下的效果，今天就來看一下DXTREME ENTERPRISE布局設置的使用教程：

1、布局允許你布局允許您一次寫入共同標記 （類似于在 ASP.NET 的一個主頁）。不需要重復的為每個視圖使用相同的標記。

2、布局幫助你的應用程序實現真正的跨平臺，一個視圖主要是由針對不同布局的占位符的標記組成。這些塊的可視化主要是由一個特定的布局來決定的，因此，你可以使用多個布局，來為一個單一的視圖實現在不同設備上擁有本機的外觀和感覺。

創建一個布局,將其用一個div元素標記，設置元素的data-dx-role屬性來布局，同時通過設置data-dx-name屬性來設置布局的名稱。

<div data-dx-role="layout" data-dx-name="myLayout"> 
</div>

你也可以通過應用程序的視圖來設置使用默認的布局，設置defaulLayout產權配置對象遞給構造函數的HtmlApplication布局的名字。

myApp = new DevExpress.framework.html.HtmlApplication({ 
  defaultLayout: "myLayout"
   //... 
});

應用到一個特定的視圖布局，設置在在根上的div 視圖元素的data-dx-layout屬性到布局名稱。

<div data-dx-role="view" data-dx-name="index" data-dx-layout="myLayout"> 
    <h1 data-bind="text: message"></h1> 
</div>

為了聲明占位符，創建一個div元素，同時設置它的data-dx-placeholder屬性到一個占位符的名字上。

<div data-dx-role="layout" data-dx-name="myLayout"> 
    <div data-dx-placeholder="content"></div> 
</div>

如果要使用一個占位符，必須通過div元素的占位符顯示視圖標記。設置元素的data-dx-target-placeholder屬性到占位符名稱上。

<div data-dx-role="view" data-dx-name="index" data-dx-layout="myLayout">

 &nbsp; <div data-dx-target-placeholder="content">

    &nbsp; <h1 data-bind="text: message"></h1>

   </div>

</div>

以視覺過渡效果關聯一個占位符，設置占位符的div元素的data-dx-transition屬性為下滑，褪色或溢出。

<div data-dx-role="layout" data-dx-name="myLayout"> 
   <div data-dx-placeholder="content" data-dx-transition="slide"></div> 
</div>

需要注意的是布局標記可以包含占位符數據用于綁定ViewModel。

<div data-dx-role="layout" data-dx-name="myLayout"> 
    <h1 data-bind="text: message"></h1> 
    <div data-dx-placeholder="content" data-dx-transition="slide"></div>
</div>

標簽：