zoukankan      html  css  js  c++  java
  • WPF 使用MahApps.Metro UI库

    在WPF中要想使用Metro风格是很简单的,可以自己画嘛..

    但是为了节省时间,哈,今天给大家推荐一款国外Metro风格的控件库。

    本文只起到抛砖引玉的作用,有兴趣还是推荐大家上官网,Thanks,官网地址 我会在底部发出。

    实现效果

    其实下面仅仅是对窗体的一个简单设置,以及放了些简单的按钮,这是本文抛砖引玉的示例程序,其实还有非常多的好玩的样式,包括动画效果。

    MetroWPF_3

    安装 MahApps.Metro

    这里依然推荐使用NuGet来进行安装,如下图所示。

    MetroWPF_1

    然后在NuGet中搜索 MahApps.Metro ,然后进行安装即可,如下图所示。

    MetroWPF_2

    安装好之后就已经在我们的引用中完成了。

    实现Metro样式三部曲

    1.首先将资源引入App.xaml

    1. <Application x:Class="MetroWPF.App"
    2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.              StartupUri="MainWindow.xaml">
    5.     <Application.Resources>
    6.         <ResourceDictionary>
    7.             <ResourceDictionary.MergedDictionaries>
    8.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
    9.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
    10.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
    11.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
    12.                 <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
    13.             </ResourceDictionary.MergedDictionaries>
    14.         </ResourceDictionary>
    15.     </Application.Resources>
    16. </Application>
    17.  

    引入之后几乎我们所有的控件都具备了Metro样式了。

    2.再把窗体换成Metro风格

    在XAML状体中进行如下 xmlns 引用。

    1.  xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

    然后将Window标签替换为如下标签

    1.  <controls:MetroWindow ...

    就ok了。

    看看我的窗体的XAML完整代码吧,我加了三个控件做示例,如下所示。

    1. <controls:MetroWindow  x:Class="MetroWPF.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    5.         GlowBrush="{DynamicResource AccentColorBrush}"
    6.         Title="MainWindow" Height="350" Width="525">
    7.     <controls:MetroWindow.RightWindowCommands>
    8.         <controls:WindowCommands>
    9.             <Button Content="settings" />
    10.             <Button Content="设置" />
    11.         </controls:WindowCommands>
    12.     </controls:MetroWindow.RightWindowCommands>
    13.  
    14.     <Grid>
    15.         <StackPanel>
    16.             <Label Margin="20">www.wxzzz.com</Label>
    17.             <TextBox Margin="40,10,40,10"></TextBox>
    18.             <Button>Metro Style Button</Button>
    19.         </StackPanel>
    20.     </Grid>
    21. </controls:MetroWindow>

    3.最后一步修改窗体cs代码中的继承

    1. //引用
    2. using MahApps.Metro.Controls;
    3.  
    4. namespace MetroWPF
    5. {
    6.     /// <summary>
    7.     /// MainWindow.xaml 的交互逻辑
    8.     /// </summary>
    9.     public partial class MainWindow : MetroWindow
    10.     {
    11.         public MainWindow()
    12.         {
    13.             InitializeComponent();
    14.         }
    15.     }
    16. }

    至此,我们的示例就完成了,我们顺便再来看看官方的窗体示例吧!其实都是很简单的设置,非常好用。

    ExplainedStyledWindow

    本文示例源码下载:MetroWPF

    官方示例地址:http://mahapps.com/guides/quick-start.html

    官方控件示例地址:http://mahapps.com/controls/

    MahApps.Metro 项目源码:https://github.com/MahApps/MahApps.Metro

  • 相关阅读:
    0593. Valid Square (M)
    0832. Flipping an Image (E)
    1026. Maximum Difference Between Node and Ancestor (M)
    0563. Binary Tree Tilt (E)
    0445. Add Two Numbers II (M)
    1283. Find the Smallest Divisor Given a Threshold (M)
    C Primer Plus note9
    C Primer Plus note8
    C Primer Plus note7
    C Primer Plus note6
  • 原文地址:https://www.cnblogs.com/happyyftk/p/6904766.html
Copyright © 2011-2022 走看看