WPF 自定义Metro Style窗体
2015-08-08 10:19
417 查看
为了使WPF程序在不同版本的操作系统上保持一致的显示效果,我们需要重写WPF控件样式。这篇博客将展示如何创建一个Metro Style的WPF窗体。
首先先看一下最终窗体的效果图,
通过截图我们可以看出来这个窗体由两部分组成,顶部为最小化和关闭按钮,其他区域为窗体的显示区域。请看下面的具体实现代码,
MetroWindow样式:
新建一个ModernWindow类,
C#
现在我们就完成了Metro Style窗体了,现在对其进行应用。请看MainWindow实现:
XAML:
C#:
现在就完成了Metro Style窗体的制作。
自Win8发布以来,越来越多的桌面应用开始实现Metro样式。现在也有很多WPF MetroUI库,例如:http://mui.codeplex.com/。我们可以根据项目的实际情况选择现有的Metro UI/Control,当然也可以自己写。
代码请点击这里下载。
感谢您的阅读。
首先先看一下最终窗体的效果图,
通过截图我们可以看出来这个窗体由两部分组成,顶部为最小化和关闭按钮,其他区域为窗体的显示区域。请看下面的具体实现代码,
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,当然也可以自己写。
代码请点击这里下载。
感谢您的阅读。
相关文章推荐
- 注册表里的猫腻
- C++总结
- 【剑指Offer面试题】 九度OJ1372:最大子向量和(连续子数组的最大和)
- WPF 自定义Metro Style窗体
- HDU2108和HDU2036(叉乘)
- HDU1561 树形DP The more, The Better
- HDU2108和HDU2036(叉乘)
- 基于MVC框架实现权限控制简介
- 南邮 OJ 2030 收购计划
- MySQL性能优化的最佳20+条经验
- JS学习笔记(五):关于$(function(){});里面的函数不执行问题
- js 时间戳转为日期
- Java 如何得到 JVM 虚拟机的 System Properties
- WPF 自定义Metro Style窗体
- 九度oj 1205
- WPF 自定义Metro Style窗体
- Codeforces 235B Let's Play Osu!
- 南邮 OJ 2029 节奏大师
- HDU 1498 50 years, 50 colors 二分图最小点覆盖(基础题)
- Codeforces Round #Pi (Div. 2) E. President and Roads(无向图缩点(有重边)+最短路)