写在前面

  作为新年开篇的文章,当然要选择比较“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=""
Height=""
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中会有体现。

项目笔记---WPF之Metro风格UI的更多相关文章

  1. 项目笔记---WPF之Metro风格UI(转)

    写在前面 作为新年开篇的文章,当然要选择比较“Cool”的东西来分享,这自然落到了WPF身上,WPF技术自身可塑性非常强,其强大的绘图技术以及XAML技术比WinForm而言有本质的飞跃. 切入正题, ...

  2. 项目笔记---WPF多语言方案

    近期由于朋友邀请帮忙给一个开源的游戏“外挂”做一个I18N的解决方案,恰好也是WPF做的,之前有过相关经验,就忙了一个星期终于搞定了,已经提交给作者了,现在这里做一个分享. 这里分享下我个人Fork的 ...

  3. [转载] Android Metro风格的Launcher开发系列第一篇

    前言:从毕业到现在已经三年多了,回忆一下这三年基本上没有写过博客,总是觉得忙,没时间写,也觉得写博客没什么大用.但是看到很多大牛们都在写博客,分享自己的东西,所以嘛本着向大牛看齐,分享第一,记录第二的 ...

  4. Android Metro风格的Launcher开发系列第一篇

    前言:从毕业到现在已经三年多了,回忆一下这三年基本上没有写过博客,总是觉得忙,没时间写,也觉得写博客没什么大用.但是看到很多大牛们都在写博客,分享自己的东西,所以嘛本着向大牛看齐,分享第一,记录第二的 ...

  5. Droptiles - 炫酷的 Metro 风格的层叠式 Web 面板

    介绍 Droptiles是一套Metro风格的类似Win8的Web2.0控制面板.它采用图块(tiles)建立用户体验.图块(tiles)是一些可以从外部资源中获取数据的迷你应用.点击图块(tile) ...

  6. Metro风格的Android界面应用

    最近项目中需要一个选择月份查询客户余额的功能,原先的android只能满足查询当月,不可以查询任意月份.当然改起来还是很简单的,服务端增加一个月份参数,客户端传入这个参数即可.闲来无事,月份的选择风格 ...

  7. 【转载】Android Metro风格的Launcher开发系列第二篇

    前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客Android Metro风格的Launcher开发系列第一篇写了如 ...

  8. Android Metro风格的Launcher开发系列第二篇

    前言: 各位小伙伴们请原谅我隔了这么久才开始写这一系列的第二篇博客,没办法忙新产品发布,好了废话不说了,先回顾一下:在我的上一篇博客http://www.cnblogs.com/2010wuhao/p ...

  9. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

随机推荐

  1. eclipise快捷键,留给以后备用

    快捷键无效解决办法: 1.考虑是否被其他应用占用,如QQ,QQ音乐,千千动听等 2.在eclispe查看是否被修改:Window->Preferences->General->Key ...

  2. 43. Multiply Strings (String)

    Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...

  3. SSH框架整合思想

    --------------------siwuxie095                                 SSH 框架整合思想         1.SSH 框架,即 Struts2 ...

  4. 设置网站默认用IE7打开

    head中加入以下内容 <meta http-equiv="X-UA-Compatible" content="IE=7" />

  5. Golang之定时器,recover

    滴答滴答……定时器的使用 package main import ( "fmt" "time" ) //定时器的使用 func main() { t := ti ...

  6. xmlhttp

    File an issue about the selected textFile an issue about the selected text XMLHttpRequest Living Sta ...

  7. Laravel 上使用 phpexcel的两种方式

    原创 2017年06月24日 20:24:31 1229 文章采集与网上 方式1.使用原生的phpexcel , http://blog.csdn.net/CSwfe/article/details/ ...

  8. HTML5 history详解

    最近研究vue-router单页转跳而不向服务器请求的原理, 主要是HTML5 history以及hash的应用,支持history时使用history模式 下面详细学习了一下常用的history相关 ...

  9. maven web 项目 打入 jar 包 , 和编译入 java 文件到 web-inf 下

    <outputDirectory>src\main\webapp\WEB-INF\classes</outputDirectory> 可以把 类文件编译到 web-inf 下 ...

  10. js 和 css 中 不能使用 jsp 页面中一些 标签 和 java 代码等,应注意

    js  和 css 中 不能使用 jsp  页面中一些 标签 和 java 代码等,应注意 如 ${ }  <%%>  等