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,当然也可以自己写。

代码请点击这里下载。

感谢您的阅读。







ModernUI(http://mui.codeplex.com/)是一个开源的WPF界面库,利用该界面库,我们可以创建很酷的应用程序。下面是ModernUI官方示例,你可以从官方网站直接下载源码运行,如果是.NET 4.0的话,记得要声明“NET4”预编译变量,否则无法编译通过。 这个界面框架是基于ModernUI来实现的,在该文我将分享所有的源码,并详细描述如何基于ModernUI来构造一个非常通用的、插件化的WPF开发框架。下载源码的同志,希望点击一下推荐。 本文将按照以下四点来介绍: (1)ModernUI简介; (2)构建通用界面框架的思路; (3)基于ModernUI和OSGi.NET的插件化界面框架实现原理及源码分析; (4)其它更有趣的东西~~。 要编写这样的WPF界面,我们需要在一个Window上声明菜单和Tab页面,下图是定义菜单的声明。 此外,每一个Tab风格页面,你也需要手动的为菜单创建这样的界面元素。 直接用这样的方式来使用ModernUI,显然不太适合团队协作性的并行开发,因为在一个团队的协作中,不同的人需要完成不同的功能,实现不同页面,每个人都需要来更改主界面。 我非常希望模块化的开发方法,因为这可以尽可能的复用现有资产,使程序员可以聚焦在自己关注的业务逻辑上,不需要关心UI的使用。下面,我将来描述基于ModernUI实现的一个通用界面框架,这个界面框架允许程序员在自己的业务模块中配置需要显示的界面元素。 通用界面框架实现思路: 我希望能够实现这样的通用界面框架: (1)程序员可以直接实现需要展现业务逻辑的界面,不需要关注如何使用ModernUI; (2)程序员可以通过简单的配置就可以将自己实现的业务逻辑页面显示在主界面中; (3)这个界面框架可以完全复用。 当我看到ModernUI这个界面库时,我希望将应用程序做成模块化,每一个模块能够: (1)通过以下配置能够直接显示二级菜单。 (2)通过以下配置能够直接显示三级菜单。 这样做的好处是,开发插件的时候可以不需要关心界面框架插件;团队在协作开发应用的时候,可以独立开发并不需要修改主界面;团队成员的插件可以随时集成到这个主界面;当主界面无法满足我们的布局时或者用户需求无法满足时,可以直接替换主界面框架而不需要修改任何插件代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值