WPF 自定义Metro Style窗体

为了使WPF程序在不同版本的操作系统上保持一致的显示效果，我们需要重写WPF控件样式。这篇博客将展示如何创建一个Metro Style的WPF窗体。

首先先看一下最终窗体的效果图，

通过截图我们可以看出来这个窗体由两部分组成，顶部为最小化和关闭按钮，其他区域为窗体的显示区域。请看下面的具体实现代码，

MetroWindow样式：

%26lt;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"%26gt;    %26lt;!--最小化按钮样式--%26gt;    %26lt;Style x:Key="WinMinBtnStyle" TargetType="Button"%26gt;        %26lt;Setter Property="SnapsToDevicePixels" Value="True"/%26gt;        %26lt;Setter Property="OverridesDefaultStyle" Value="True"/%26gt;        %26lt;Setter Property="Width" Value="25"/%26gt;        %26lt;Setter Property="Height" Value="25"/%26gt;        %26lt;Setter Property="VerticalAlignment" Value="Top"/%26gt;        %26lt;Setter Property="Template"%26gt;            %26lt;Setter.Value%26gt;                %26lt;ControlTemplate TargetType="Button"%26gt;                    %26lt;Border x:Name="MainBorder" Background="Transparent"%26gt;                        %26lt;Grid%26gt;                            %26lt;ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/%26gt;                        %26lt;/Grid%26gt;                    %26lt;/Border%26gt;                    %26lt;ControlTemplate.Triggers%26gt;                        %26lt;Trigger Property="IsMouseOver" Value="True"%26gt;                            %26lt;Setter TargetName="MainBorder" Property="Background" Value="#33a58d"/%26gt;                        %26lt;/Trigger%26gt;                    %26lt;/ControlTemplate.Triggers%26gt;                %26lt;/ControlTemplate%26gt;            %26lt;/Setter.Value%26gt;        %26lt;/Setter%26gt;    %26lt;/Style%26gt;    %26lt;!--关闭按钮样式--%26gt;    %26lt;Style x:Key="WinCloseBtnStyle" TargetType="Button"%26gt;        %26lt;Setter Property="SnapsToDevicePixels" Value="True"/%26gt;        %26lt;Setter Property="OverridesDefaultStyle" Value="True"/%26gt;        %26lt;Setter Property="Width" Value="25"/%26gt;        %26lt;Setter Property="Height" Value="25"/%26gt;        %26lt;Setter Property="VerticalAlignment" Value="Top"/%26gt;        %26lt;Setter Property="Template"%26gt;            %26lt;Setter.Value%26gt;                %26lt;ControlTemplate TargetType="Button"%26gt;                    %26lt;Border x:Name="MainBorder" Background="Transparent"%26gt;                        %26lt;Grid%26gt;                            %26lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/%26gt;                        %26lt;/Grid%26gt;                    %26lt;/Border%26gt;                    %26lt;ControlTemplate.Triggers%26gt;                        %26lt;Trigger Property="IsMouseOver" Value="True"%26gt;                            %26lt;Setter TargetName="MainBorder" Property="Background" Value="#d44c45"/%26gt;                        %26lt;/Trigger%26gt;                    %26lt;/ControlTemplate.Triggers%26gt;                %26lt;/ControlTemplate%26gt;            %26lt;/Setter.Value%26gt;        %26lt;/Setter%26gt;    %26lt;/Style%26gt;    %26lt;!--窗体控件模板--%26gt;    %26lt;ControlTemplate x:Key="MetroWindowTemplate" TargetType="{x:Type Window}"%26gt;        %26lt;Border BorderBrush="#2a927c" BorderThickness="1" Background="White"%26gt;            %26lt;Grid%26gt;                %26lt;Grid.RowDefinitions%26gt;                    %26lt;RowDefinition Height="30"/%26gt;                    %26lt;RowDefinition Height="*"/%26gt;                %26lt;/Grid.RowDefinitions%26gt;                %26lt;Grid Grid.Row="0" Background="#2a927c"%26gt;                    %26lt;Grid.ColumnDefinitions%26gt;                        %26lt;ColumnDefinition Width="Auto"/%26gt;                        %26lt;ColumnDefinition Width="*"/%26gt;                        %26lt;ColumnDefinition Width="Auto"/%26gt;                        %26lt;ColumnDefinition Width="Auto"/%26gt;                    %26lt;/Grid.ColumnDefinitions%26gt;                    %26lt;TextBlock x:Name="WindowTitleTbl" Grid.Column="0" Text="" FontFamily="Microsoft YaHei" VerticalAlignment="Center"                                        FontSize="12" FontWeight="Bold" Margin="10,0" Foreground="White"/%26gt;                    %26lt;Button x:Name="MinWinButton" Grid.Column="2" Style="{StaticResource WinMinBtnStyle}"                                         VerticalContentAlignment="Center"                                         HorizontalContentAlignment="Center"%26gt;                        %26lt;Button.Content%26gt;                            %26lt;StackPanel%26gt;                                %26lt;Path Stroke="White" StrokeThickness="2" Data="M1,6 L18,6"/%26gt;                            %26lt;/StackPanel%26gt;                        %26lt;/Button.Content%26gt;                    %26lt;/Button%26gt;                    %26lt;Button x:Name="CloseWinButton" Grid.Column="3" Style="{StaticResource WinCloseBtnStyle}" Margin="2,0,8,0"                                         HorizontalContentAlignment="Center"                                         VerticalContentAlignment="Center"%26gt;                        %26lt;Button.Content%26gt;                            %26lt;StackPanel%26gt;                                %26lt;Path Stroke="White" StrokeThickness="2" Data="M2,2 L16,16 M2,16 L16,2"/%26gt;                            %26lt;/StackPanel%26gt;                        %26lt;/Button.Content%26gt;                    %26lt;/Button%26gt;                %26lt;/Grid%26gt;                %26lt;AdornerDecorator Grid.Row="1"%26gt;                    %26lt;ContentPresenter/%26gt;                %26lt;/AdornerDecorator%26gt;            %26lt;/Grid%26gt;            %26lt;Border.Effect%26gt;                %26lt;DropShadowEffect/%26gt;            %26lt;/Border.Effect%26gt;        %26lt;/Border%26gt;    %26lt;/ControlTemplate%26gt;    %26lt;Style x:Key="MetroWindowStyle" TargetType="{x:Type Window}"%26gt;        %26lt;Setter Property="SnapsToDevicePixels" Value="True"/%26gt;        %26lt;Setter Property="OverridesDefaultStyle" Value="True"/%26gt;        %26lt;Setter Property="AllowsTransparency" Value="True"/%26gt;        %26lt;Setter Property="Background" Value="Transparent"/%26gt;        %26lt;Setter Property="WindowStyle" Value="None"/%26gt;        %26lt;Setter Property="Template" Value="{StaticResource MetroWindowTemplate}"/%26gt;    %26lt;/Style%26gt;%26lt;/ResourceDictionary%26gt;

新建一个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;        }        /// %26lt;summary%26gt;        /// 实现窗体移动        /// %26lt;/summary%26gt;        /// %26lt;param name="e"%26gt;%26lt;/param%26gt;        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)        {            DragMove();            base.OnMouseLeftButtonDown(e);        }    }

现在我们就完成了Metro Style窗体了，现在对其进行应用。请看MainWindow实现：
XAML:

%26lt;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"%26gt;    %26lt;Grid%26gt;            %26lt;/Grid%26gt;%26lt;/local:ModernWindow%26gt;

C#：

    public partial class MainWindow : ModernWindow    {        public MainWindow()        {            InitializeComponent();        }    }

现在就完成了Metro Style窗体的制作。
自Win8发布以来，越来越多的桌面应用开始实现Metro样式。现在也有很多WPF MetroUI库，例如：http://mui.codeplex.com/。我们可以根据项目的实际情况选择现有的Metro UI/Control，当然也可以自己写。

代码请点击这里下载。

感谢您的阅读。