原文:
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，当然也可以自己写。
代码请点击这里下载。
感谢您的阅读。
