WPF 自定义Metro Style窗体

简介: 原文:WPF 自定义Metro Style窗体为了使WPF程序在不同版本的操作系统上保持一致的显示效果,我们需要重写WPF控件样式。这篇博客将展示如何创建一个Metro Style的WPF窗体。 首先先看一下最终窗体的效果图, 通过截图我们可以看出来这个窗体由两部分组成,顶部为最小化和关闭按钮,其他区域为窗体的显示区域。
原文: 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,当然也可以自己写。

代码请点击这里下载。

感谢您的阅读。

目录
相关文章
|
C# 虚拟化 索引
【WPF】UI虚拟化之------自定义VirtualizingWrapPanel
原文:【WPF】UI虚拟化之------自定义VirtualizingWrapPanel 前言 前几天QA报了一个关于OOM的bug,在排查的过程中发现,ListBox控件中被塞入了过多的Item,而ListBox又定义了两种样式的ItemsPanelTemplate。
2085 0
|
C# 数据安全/隐私保护
【WPF】右下角弹出自定义通知样式(Notification)——简单教程
原文:【WPF】右下角弹出自定义通知样式(Notification)——简单教程 1.先看效果 2.实现 1.主界面是MainWindow 上面就只摆放一个Button即可。
2872 0
|
11月前
|
C#
WPF控件和窗体一起放大一起缩小
WPF控件和窗体一起放大一起缩小
193 0
|
11月前
|
C# 容器
WPF框架下,窗体的嵌套显示
WPF框架下,窗体的嵌套显示
189 0
|
前端开发 C# 图形学
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
Wpf开发过程中,最经常使用的功能之一,就是用户控件(UserControl)了。用户控件可以用于开发用户自己的控件进行使用,甚至可以用于打造一套属于自己的UI框架。依赖属性(DependencyProperty)是为用户控件提供可支持双向绑定的必备技巧之一,同样用处也非常广泛。
825 0
【WPF】WPF开发用户控件、用户控件属性依赖DependencyProperty实现双向绑定、以及自定义实现Command双向绑定功能演示
|
C#
WPF 控件自定义背景
<!--控件要设置尺寸的话,设置的尺寸必须比下面的图形的尺寸要小,不然显示不开--> <Label Content="直角测试" Width="90" Height="90" HorizontalContentAlignment="Center" Vert...
992 0
|
C#
WPF开发-Label自定义背景-Decorator
首先在App.xaml文件当中添加样式和模板
1983 0
|
C#
wpf 开发 -TextBox背景自定义-Decorator
首先在app.xaml文件的下面添加以下样式
1647 0
|
C# 前端开发
WPF 中style文件的引用
原文:WPF 中style文件的引用 总结一下WPF中Style样式的引用方法: 一,内联样式: 直接设置控件的Height、Width、Foreground、HorizontalAlignment、VerticalAlignment等属性。
925 0
|
C# 前端开发
【C#】wpf自定义calendar日期选择控件的样式
原文:【C#】wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图,看下样式 原理 1. 总览: Calendar本质上是一个6x7的列表,这个列表可以用ItemsControl来实现。
1096 0