Modern UI for WPF 開源項目（4）：使用預定義的頁面布局

Modern UI for WPF實質就是使用了一套預先義的頁面布局。一個Modern UI 頁面是一個繼承於control的用戶控件，用於在Modern Window的內容區展示內容。頁面常在Modern Window 菜單中通過使用ModernWindow.MenuLinkGroups屬性來引用。本篇將介紹各類布局並展示如何使用它們。

提示：描述頁面布局作為visual studio 2012 項模板也是很有用的，更多內容請看：Modern UI for WPF Templates

基本布局

基本布局使用所有可能的內容空間。所有必須的都通過設置頁面的根風格設置為ContentRoot來完成,這確保了內容適當校正。使用一個ScrollViewer控件以確保所有內容可以訪問。

<Grid Style="{StaticResource ContentRoot}">
  <ScrollViewer>
    <StackPanel>
      <TextBlock Text="LOREM IPSUM" Style="{StaticResource Heading2}" />
    </StackPanel>
  </ScrollViewer>
</Grid>

Split layout

分割布局將頁面的內容分成兩列。資源的SplitLeft和SplitRight提供了適當的邊距。

<Grid Style="{StaticResource ContentRoot}">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="6"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <ScrollViewer Margin="{StaticResource SplitLeft}">
    .. left content ..
  </ScrollViewer>
  <GridSplitter Grid.Column="1" />
  <ScrollViewer Grid.Column="2 " Margin="{StaticResource SplitRight}">
    .. right content ..
  </ScrollViewer>
</Grid>

List layout

列表布局特點是提供一個列表選項在頁面左邊，選擇后的頁面被顯示在右邊的ModernFrame里。使用ModernTab控件並指定一個列表鏈接。確保ModernTab.Layout已經設置到列表里了。

<Grid Style="{StaticResource ContentRoot}">
  <mui:ModernTab SelectedSource="/Content/LoremIpsum.xaml#1" Layout="List">
    <mui:ModernTab.Links>
      <mui:Link DisplayName="Lorem Ipsum 1" Source="/Content/LoremIpsum.xaml#1" />
      <mui:Link DisplayName="Lorem Ipsum 2" Source="/Content/LoremIpsum.xaml#2" />
    </mui:ModernTab.Links>
  </mui:ModernTab>
</Grid>

Tab layout

tab布局顯示tab項目到頁面的右邊。它用於完成相同的ModernTab控件左為列表布局，唯一不同的是布局必須設置到Tab。你可以使用tab布局到主頁面，它有一個基礎的，分割的或列表布局,如下所示：

<Grid Style="{StaticResource ContentRoot}">
  <mui:ModernTab SelectedSource="/Content/LoremIpsum.xaml#1" Layout="Tab">
    <mui:ModernTab.Links>
      <mui:Link DisplayName="Lorem Ipsum 1" Source="/Content/LoremIpsum.xaml#1" />
      <mui:Link DisplayName="Lorem Ipsum 2" Source="/Content/LoremIpsum.xaml#2" />
    </mui:ModernTab.Links>
  </mui:ModernTab>
</Grid>