項目筆記---WPF之Metro風格UI

寫在前面

　　作為新年開篇的文章，當然要選擇比較“Cool”的東西來分享，這自然落到了WPF身上，WPF技術自身可塑性非常強，其強大的繪圖技術以及XAML技術比WinForm而言有本質的飛躍。

 

　　切入正題，本文來自於一個項目的Demo演示版，當然為了做到“Cool”我選擇了WPF作為項目的概念版進行演示，所用到包括大名鼎鼎的MahApps.Metro以及AvalonDock等開源框架完美發揮WPF的優勢，本文不會很深入的講解每個技術的詳細功能，而是結合項目Demo進行一個“組合式”框架的介紹，希望各位讀者喜歡，如果覺得值得還不錯的話，請點擊“推薦一下”。

先睹為快：

 

1. 使用MahApps.Metro搭建框架

1.1 快速應用最精簡的項目

首先要增加對MahApps.Metro和MahApps.Metro.Resources的引用；

其次，窗體要繼承 Metro.MetroWindow (Controls:MetroWindow x:Class="TestDemo.MainWindow")。

這樣，窗體有了基本的樣式風格和主題顏色，另外MahApps.Metro增強了標題欄，可定制“左側功能區域”和“右側功能區域”，例如

"Setting"和“About”按鈕功能以及左側GitHub圖標功能，擴展了界面上可編輯元素，直接在MetroWindow.LeftWindowCommand中增加內容即可：

    <!--Left Window Commands-->
    <Controls:MetroWindow.LeftWindowCommands>
        <Controls:WindowCommands>
            <Button Click="LaunchMahAppsOnGitHub"
                    ToolTip="MahApps.Metro on GitHub">
                <Rectangle Width="22"
                           Height="22"
                           Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Uniform"
                                     Visual="{StaticResource appbar_github}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </Button>
        </Controls:WindowCommands>
    </Controls:MetroWindow.LeftWindowCommands>
    <!--Right Window Commands-->
    <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands>
            <Button Click="MainWindow_Setting"
                    ToolTip="Software Configuration"
                    Content="Setting" />
            <Button Click="MainWindow_About"
                    ToolTip="Software Information"
                    Content="About" />
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>

至此，基本框架已經形成，接下來讓我們了解MahApps提供的Metro風格的控件吧。

1.2 增加Metro風格的控件

這里最好的參考是官方的Demo，需要使用控件時只需要對應的拷貝一些“代碼”即可。直接上圖：

 

2. 使用AvalonDock

2.1 AvalonDock2.0的問題

在這篇文章之前，本人使用的是2.0版本，官網提供了最新的下載，可是在使用的過程中有一個非常嚴重的問題：整合在MahApps框架中，AvalonDock的AutoHide控件持續“透明”，這一BUG在2.0當中存在。

設置AllowsTransparency =“FALSE"也不能解決此問題，最終還原為1.3穩定版。

2.2 如何定制布局

最好的參考還是官方文檔：http://avalondock.codeplex.com/wikipage?title=GettingStarted&referringTitle=Documentation 這里還是1.3版本，官網2.0版本文檔還在建設中。。。總感覺作者已經不在維護此項目了，着實令人寒心。

 

3. 結語及引用

Demo點此下載

有任何問題歡迎大家提問，很多細節之處沒有寫出來，Demo中會有體現。