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