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

摘要:
为了切中要害,本文来自一个项目的Demo演示版本。当然,为了实现“酷”,我选择了WPF作为项目的概念版本进行演示,包括著名的MahApps Metro、Avalon Dock等开源框架充分发挥了WPF的优势。本文将不深入解释每种技术的详细功能,而是结合项目Demo介绍一个“复合”框架。我希望你喜欢。如果你认为这是值得的,请点击“推荐”。
写在前面

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

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

先睹为快:

 项目笔记---WPF之Metro风格UI第1张

1. 使用MahApps.Metro搭建框架

1.1 快速应用最精简的项目

首先要增加对MahApps.Metro和MahApps.Metro.Resources的引用;

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

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

项目笔记---WPF之Metro风格UI第2张

"Setting"和“About”按钮功能以及左侧GitHub图标功能,扩展了界面上可编辑元素,直接在MetroWindow.LeftWindowCommand中增加内容即可:

项目笔记---WPF之Metro风格UI第3张项目笔记---WPF之Metro风格UI第4张
    <!--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>
View Code

至此,基本框架已经形成,接下来让我们了解MahApps提供的Metro风格的控件吧。

1.2 增加Metro风格的控件

这里最好的参考是官方的Demo,需要使用控件时只需要对应的拷贝一些“代码”即可。直接上图:

项目笔记---WPF之Metro风格UI第5张

 

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》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Linux高级编程--04.GDB调试程序(查看数据)转:ImageMagick +Jmagick安装下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

WPF RichTextBox

FlowDocument RunFlowDoc = new FlowDocument(); Paragraph Runparagraph = new Paragraph(); RunFlowDoc.Blocks.Add(Runparagraph); txtRichBox.Document = RunFlowDoc; Run r = new Run(c...

将WPF UI单元复制到“.NET研究”剪贴板 狼人:

大家在日常工作中应该遇到过这样的问题:需要对应用程序界面进行截屏操作,然后将截屏内容拷贝到其他文档中使用。通常情况下我们会使用一些截屏软件或者“Ctrl+PrtSc ”,本篇将介绍如何在WPF 程序中将UI 单元直接以图片形式复制到剪贴板,以达到为应用程序界面制作快照(Snapshot)的功能。 以我之前做过的一个“WPF 员工卡”的文章为例。首先,要为程...

WPF TextBox/TextBlock 文本超出显示时,文本靠右显示

文本框显示 文本框正常显示: 文本框超出区域显示: 实现方案 判断文本框是否超出区域 请见《TextBlock IsTextTrimmed 判断文本是否超出》 设置文本布局显示 1. FlowDirection 当文本超出显示区域时,设置FlowDirection靠右显示 下面是封装的附加属性ScrollEndWhenTextTrimmed 1...

wpf 中设置DataGridTextColumn的文本对齐方式

DataGrid里面存在着像DataGridColumnHeader、DataGrid、DataGridCell等相关控件的样式设置,例如让一个DataGrid里面某一列的控件内容居中显示,例如: DataGridColumnHeader View Code <Style x:Key="ColumnHeaderStyle" TargetType="{...

WPF 中动态创建和删除控件

动态创建控件 1.容器控件.RegisterName("Name",要注册的控件) //注册控件 2.容器控件.FindName("Name") as 控件类型 //找到控件并转换成相应类型 注意:仅通过 控件.Name来设置是不能通过FindName来找到控件的,必须注册 动态删除控件1.容器控件.Children.Remove(控件) //移除控件 2...

Wpf之Xaml属性值和特性值(一)

其实我一直很好奇在xaml中,通过Attribute=Value这种方式可以进行对元素的描述, 例如: <Rectangle Name=” rectangle” Fill=”Blue”/> 这是一个矩形,并且利用蓝色来填充。我们知道在wpf中给UI元素上色可以用Brush(画刷),在MSDN中得知Rectangle.Fill就是一个Brush类...