WPF 自定义Metro Style窗体
为了使WPF程序在不同版本的操作系统上保持一致的显示效果,我们需要重写WPF控件样式。这篇博客将展示如何创建一个Metro Style的WPF窗体。
首先先看一下最终窗体的效果图,
通过截图我们可以看出来这个窗体由两部分组成,顶部为最小化和关闭按钮,其他区域为窗体的显示区域。请看下面的具体实现代码,
MetroWindow样式:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MetroWindow.Resources.Styles">
<!--最小化按钮样式-->
<Style x:Key="WinMinBtnStyle" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Width" Value="25"/>
<Setter Property="Height" Value="25"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="MainBorder" Background="Transparent">
<Grid>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainBorder" Property="Background" Value="#33a58d"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <!--关闭按钮样式-->
<Style x:Key="WinCloseBtnStyle" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Width" Value="25"/>
<Setter Property="Height" Value="25"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="MainBorder" Background="Transparent">
<Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainBorder" Property="Background" Value="#d44c45"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style> <!--窗体控件模板-->
<ControlTemplate x:Key="MetroWindowTemplate" TargetType="{x:Type Window}">
<Border BorderBrush="#2a927c" BorderThickness="1" Background="White">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions> <Grid Grid.Row="0" Background="#2a927c">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions> <TextBlock x:Name="WindowTitleTbl" Grid.Column="0" Text="" FontFamily="Microsoft YaHei" VerticalAlignment="Center"
FontSize="12" FontWeight="Bold" Margin="10,0" Foreground="White"/> <Button x:Name="MinWinButton" Grid.Column="2" Style="{StaticResource WinMinBtnStyle}"
VerticalContentAlignment="Center"
HorizontalContentAlignment="Center">
<Button.Content>
<StackPanel>
<Path Stroke="White" StrokeThickness="2" Data="M1,6 L18,6"/>
</StackPanel>
</Button.Content>
</Button> <Button x:Name="CloseWinButton" Grid.Column="3" Style="{StaticResource WinCloseBtnStyle}" Margin="2,0,8,0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center">
<Button.Content>
<StackPanel>
<Path Stroke="White" StrokeThickness="2" Data="M2,2 L16,16 M2,16 L16,2"/>
</StackPanel>
</Button.Content>
</Button>
</Grid> <AdornerDecorator Grid.Row="1">
<ContentPresenter/>
</AdornerDecorator>
</Grid>
<Border.Effect>
<DropShadowEffect/>
</Border.Effect>
</Border>
</ControlTemplate> <Style x:Key="MetroWindowStyle" TargetType="{x:Type Window}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="Template" Value="{StaticResource MetroWindowTemplate}"/>
</Style>
</ResourceDictionary>
新建一个ModernWindow类,
C#
public class ModernWindow : Window
{
private Button CloseButton;
private Button MinButton;
private TextBlock WindowTitleTbl; public ModernWindow()
{
this.Loaded += ModernWindow_Loaded;
} private void ModernWindow_Loaded(object sender, RoutedEventArgs e)
{
// 查找窗体模板
ControlTemplate metroWindowTemplate
= App.Current.Resources["MetroWindowTemplate"] as ControlTemplate; if (metroWindowTemplate != null)
{
CloseButton = metroWindowTemplate.FindName("CloseWinButton", this) as Button;
MinButton = metroWindowTemplate.FindName("MinWinButton", this) as Button; CloseButton.Click += CloseButton_Click;
MinButton.Click += MinButton_Click; WindowTitleTbl = metroWindowTemplate.FindName("WindowTitleTbl", this) as TextBlock;
}
} private void CloseButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
Close();
} private void MinButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
this.WindowState = System.Windows.WindowState.Minimized;
} /// <summary>
/// 实现窗体移动
/// </summary>
/// <param name="e"></param>
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
DragMove(); base.OnMouseLeftButtonDown(e);
}
}
现在我们就完成了Metro Style窗体了,现在对其进行应用。请看MainWindow实现:
XAML:
<local:ModernWindow x:Class="MetroWindow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MetroWindow"
Style="{StaticResource MetroWindowStyle}"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid> </Grid>
</local:ModernWindow>
C#:
public partial class MainWindow : ModernWindow
{
public MainWindow()
{
InitializeComponent();
}
}
现在就完成了Metro Style窗体的制作。
自Win8发布以来,越来越多的桌面应用开始实现Metro样式。现在也有很多WPF MetroUI库,例如:http://mui.codeplex.com/。我们可以根据项目的实际情况选择现有的Metro UI/Control,当然也可以自己写。
代码请点击这里下载。
感谢您的阅读。
WPF 自定义Metro Style窗体的更多相关文章
- WPF:自定义Metro样式文件夹选择对话框FolderBrowserDialog
1.前言 WPF并没有文件选择对话框,要用也就只有使用Winform版的控件.至今我也没有寻找到一个WPF版本的文件选择对话框. 可能是我眼浊,如果各位知道有功能比较健全的WPF版文件选择对话框.文件 ...
- WPF 自定义按钮 Style
<Style TargetType="{x:Type Button}" x:Key="DefaultButton"> <Setter Prop ...
- [WPF]使用WindowChrome自定义Window Style
1. 前言 做了WPF开发多年,一直未曾自己实现一个自定义Window Style,无论是<WPF编程宝典>或是各种博客都建议使用WindowStyle="None" ...
- [WPF自定义控件]使用WindowChrome自定义Window Style
1. 为什么要自定义Window 对稍微有点规模的桌面软件来说自定义的Window几乎是标配了,一来设计师总是克制不住自己想想软件更个性化,为了UI的和谐修改Window也是必要的:二来多一行的空间可 ...
- [WPF自定义控件]?使用WindowChrome自定义Window Style
原文:[WPF自定义控件]?使用WindowChrome自定义Window Style 1. 为什么要自定义Window 对稍微有点规模的桌面软件来说自定义的Window几乎是标配了,一来设计师总是克 ...
- WPF自定义Window样式(1)
1. 引言 WPF是制作界面的一大利器.最近在做一个项目,用的就是WPF.既然使用了WPF了,那么理所当然的,需要自定义窗体样式.所使用的代码是在网上查到的,遗憾的是,整理完毕后,再找那篇帖子却怎么也 ...
- wpf 自定义圆形按钮
wpf 自定义圆形按钮 效果图 默认样式 获取焦点样式 点击样式 下面是实现代码: 一个是自定义控件类,一个是控件类皮肤 using System; using System.Collections. ...
- WPF自定义窗口基类
WPF自定义窗口基类时,窗口基类只定义.cs文件,xaml文件不定义.继承自定义窗口的类xaml文件的根节点就不再是<Window>,而是自定义窗口类名(若自定义窗口与继承者不在同一个命名 ...
- WPF 自定义 MessageBox (相对完善版)
WPF 自定义 MessageBox (相对完善版) 基于WPF的自定义 MessageBox. 众所周知WPF界面美观.大多数WPF元素都可以简单的修改其样式,从而达到程序的风格统一.可是当 ...
随机推荐
- window下安装mongodb及php mongo扩展
1.安装mongoDB 下载最新版本的 MongoDB 下载地址:http://www.mongodb.org/downloads 解压文件到 D:\mongodb 解压后的文件列表如下: 创建数据存 ...
- 【GoLang】GoLang 中 make 与 new的区别
make.new操作 make用于内建类型(map.slice 和channel)的内存分配.new用于各种类型的内存分配. 内建函数new本质上说跟其它语言中的同名函数功能一样:new(T)分配了零 ...
- c3p0 config
c3p0-config.xml<?xml version="1.0" encoding="UTF-8"?> <c3p0-config> ...
- centos 7 python2.7.5升级到3.5.2
centos 7 python2.7.5升级到3.5.2 下载python3.5.2 wget https://www.python.org/ftp/python/3.5.2/Python-3.5.2 ...
- SQL Server 2005中的分区表
记录笔记: 转自 猪八戒学做网站 SQL Server 2005中的分区表(一):什么是分区表?为什么要用分区表?如何创建分区表? SQL Server 2005中的分区表(二):如何添加.查询.修改 ...
- MySQL 利用SQL线程对Binlog操作
背景: 对于MySQL的binlog的查看都是用其自带的工具mysqlbinlog进行操作的,其实还有另一个方法来操作binlog,就是Replication中的SQL线程去操作binlog,其实bi ...
- ffmpeg-20160718-git-bin.7z
官方 2016-07-18 发布的bin,彻底不支持 xp. ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] + ...
- WPF ListView 排序
代码如下: list为ListView组件.Score为要排序的列,也是绑定的属性. CollectionViewSource.GetDefaultView(list.ItemsSource).Sor ...
- [转]Android 学习资料分享(2015 版)
转 Android 学习资料分享(2015 版) 原文地址:http://www.jianshu.com/p/874ff12a4c01 目录[-] 我是如何自学Android,资料分享(2015 版) ...
- OSG osgDB FileUtils FileNameUtil操作文件名相关函数
/** Gets the parent path from full name (Ex: /a/b/c.Ext => /a/b). */extern OSGDB_EXPORT std::stri ...