ModernUI教程：第一個ModernUI應用(手動編寫)

這篇文章帶著我們從頭開始建立一個Modern UI應用。有關採用專案模板和項模板建立Modern UI應用請參看  第一個ModernUI應用(採用專案模板)。

1：獲取最新的ModernUI釋出並解壓到磁碟，或者通過Nuget安裝Modern.WPF包。

2：開啟Visual Studio並建立一個WPF應用專案。

3：新增對FirstFloor.ModernUI.dll的引用（如果是WPF4專案，你需要額外引用Microsoft.Windows.Shell.dll）。

4：更改MainWindow使其繼承自ModernWindow.

    開啟MainWindow.xaml，新增ModernUI的xmlns宣告，用mui:ModernWindow替換Window元素，如下所示：

    開啟MainWindow.xaml.cs，新增ModernUI的using引用，替換Window基類為ModernWindow，如下所示：

5：開啟App.xaml並新增如下的資源字典引用。

為淺色主題選擇ModernUI.Light.xaml,為深色主題選擇ModernUI.Dark.xaml。不要同時應用這兩個主題。

重要提示：如果你使用的是WPF4.0版本的ModernUI，你需要在工作區新增一個空的矩形樣式(style)，這是一個bug，如下所示：

在WPF4.5中不需要如此。

6：編譯執行應用，你可以看到如下開啟的窗體：

7：返回MainWindow.xaml，移除<Grid></Grid>內容。

重要提示：ModernWindow.Content屬性將被忽略，所有頁面都是通過頁面連結呈現內容。

8：讓我們定義一個主選單，新增如下的選單連結組：

9：編譯執行應用，你將看到如下窗體：

10：讓我們新增一些實際的內容。新增一個名稱為Page1的WPF使用者控制元件

11：開啟Page1.xaml並新增如下內容：

ContentRoot風格確保內容能夠顯示在螢幕的正確位置。

12：回到MainWindow.xaml修改第一個連結讓它能夠連結到Page1.xaml：

13：另外給ModernWindow新增一個ContentSource屬性指向Page1.xaml。

ContentSource定義了一個在開始時被載入的頁面，在上面這段程式碼中，“/Page1.xaml”將在應用啟動時被載入。

14：編譯並執行應用，你可以看到如下窗體：

以上便是該文章的全部。現在你可以在你的應用新增其他的組和連結到MenuLinkGroups並把他們指向各個頁面。更多的內容請參看其他章節。

 

檢視目錄