项目笔记---WPF之Metro风格UI

写在前面

　　做为新年开篇的文章，固然要选择比较“Cool”的东西来分享，这天然落到了WPF身上，WPF技术自身可塑性很是强，其强大的绘图技术以及XAML技术比WinForm而言有本质的飞跃。html

 

　　切入正题，本文来自于一个项目的Demo演示版，固然为了作到“Cool”我选择了WPF做为项目的概念版进行演示，所用到包括大名鼎鼎的MahApps.Metro以及AvalonDock等开源框架完美发挥WPF的优点，本文不会很深刻的讲解每一个技术的详细功能，而是结合项目Demo进行一个“组合式”框架的介绍，但愿各位读者喜欢，若是以为值得还不错的话，请点击“推荐一下”。git

先睹为快：github

 

1. 使用MahApps.Metro搭建框架

1.1 快速应用最精简的项目

首先要增长对MahApps.Metro和MahApps.Metro.Resources的引用；app

其次，窗体要继承 Metro.MetroWindow (Controls:MetroWindow x:Class="TestDemo.MainWindow")。框架

这样，窗体有了基本的样式风格和主题颜色，另外MahApps.Metro加强了标题栏，可定制“左侧功能区域”和“右侧功能区域”，例如ide

"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风格的控件吧。post

1.2 增长Metro风格的控件

这里最好的参考是官方的Demo，须要使用控件时只须要对应的拷贝一些“代码”便可。直接上图：ui

 

2. 使用AvalonDock

2.1 AvalonDock2.0的问题

在这篇文章以前，本人使用的是2.0版本，官网提供了最新的下载，但是在使用的过程当中有一个很是严重的问题：整合在MahApps框架中，AvalonDock的AutoHide控件持续“透明”，这一BUG在2.0当中存在。spa

设置AllowsTransparency =“FALSE"也不能解决此问题，最终还原为1.3稳定版。

2.2 如何定制布局

最好的参考仍是官方文档：http://avalondock.codeplex.com/wikipage?title=GettingStarted&referringTitle=Documentation 这里仍是1.3版本，官网2.0版本文档还在建设中。。。总感受做者已经不在维护此项目了，着实使人寒心。

 

3. 结语及引用

Demo点此下载

有任何问题欢迎你们提问，不少细节之处没有写出来，Demo中会有体现。