Modern UI for WPF 開源項目（2）：我的第一個Modern UI App

1.獲取最新版本的modern UI for WPF

2.打開vs並創建一個新的WPF應用程序名為：MuiTest

3.添加FirstFloor.ModernUI.dll

4.定義ModernWindow繼承於MainWindow

打開MainWindows.xaml，添加ModernUI 的 xmlns 名稱空間和使用mui來替換Window標簽，如下：

<mui:ModernWindow x:Class="MuiTest.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mui="http://firstfloorsoftware.com/ModernUI"
  Title="MainWindow" Height="350" Width="525">
</mui:ModernWindow

打開MainWindow.xaml.cs，添加ModernUI的引用和使用ModernWindow作為基類

using FirstFloor.ModernUI.Windows.Controls;
public partial class MainWindow : ModernWindow {  ..  }

5.打開App.xaml並添加如下資源字典引用

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
  <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

選擇ModernUI.Light.xaml作為明亮風格或ModernUI.Dark.xaml作為黑暗風格.別兩個同時添加。

6.編譯運行程序。你可以看到如下效果：

7.返回到MainWindow.xaml和移除<Grid></Grid>的內容。

注意：ModernWindow.Content屬性被忽略，所有內容被指定的頁面連接展示，如下：

8.讓我們定義主菜單吧。添加如下菜單鏈接組：

<mui:ModernWindow.MenuLinkGroups>
  <mui:LinkGroup DisplayName="group 1" >
    <mui:LinkGroup.Links>
      <mui:Link DisplayName="link 1" />
      <mui:Link DisplayName="link 2" />
      <mui:Link DisplayName="link 3" />
    </mui:LinkGroup.Links>
  </mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>

9.編譯遠行，你可以看到如下效果：

10.讓我們添加一些實際的內容，添加一個WPF用戶控件，名為Page1

11.打開Page1.xaml並添加以下內容

<Grid Style="{StaticResource ContentRoot}">
  <TextBlock Text="Hello Modern UI!" />
</Grid>

ContentRoot風格是為了確保內容可以正常顯示在屏幕指定位置。

12.回到MainWindow.xaml並修改第一個鏈接以便它可以指向Page1.xaml

<mui:Link DisplayName="link 1" Source="/Page1.xaml" />

13.另外添加一個ContentSource特性給ModernWindow元素

<mui:ModernWindow ...
  ContentSource="/Page1.xaml"
 />

ContentSource定義了頁面一開始被加載，在上面例子中，/Page1.xaml會被在啟動時被加載。

14.編譯運行程序，你可以看到如下效果：

沒錯，就是它。你現在可以在你的應用程序中添加另外的組和鏈接到菜單鏈接組里並指向到不同的頁面。更多定義內容，請看下一篇。

翻譯自：http://mui.codeplex.com/wikipage?title=My%20first%20Modern%20UI%20app&referringTitle=Documentation