wpf教程-metro扁平化樣式UI控制元件庫推薦：MahApps.Metro
wpf雖然做出來的ui效果已經很好了，但是還是會有很多客戶要求在完善。不如在win8出來後，很多使用者就喜歡metro的樣式。
今天給大家推薦metro扁平化樣式UI控制元件庫：MahApps.Metro 。
官方地址：http://mahapps.com/guides/quick-start.html
效果圖：
支援控制元件：
-
Buttons
-
DataGrid
-
Dialogs
-
FlipView
-
Flyouts
-
MetroWindow
-
NumericUpDown
-
ProgressBar
-
ProgressRing
-
RangeSlider
-
Slider
-
SplitButton and DropDownButton
-
TabControl
-
TextBox
-
Tile
-
ToggleButton
-
ToggleSwitch
-
TransitioningContentControl
這裡不一一截圖了。大家直接去官網看。
安裝使用步驟：
通過NuGet GUI(右鍵單擊您的專案,點選NuGet包管理中,選擇線上和搜尋MahApps.Metro)或包管理器控制檯:
PM> Install-Package MahApps.Metro
如果你想使用MahApps的預釋出包 ,您需要啟用包括預映GUI:
或使用包管理器控制檯:
pm> Install-PackageMahApps.Metro -Pre
樣式的視窗
有兩種方法可以使用MahApps.Metro樣式視窗:
您可以使用包括在內MetroWindow控制或,
設計你自己的視窗
現在我們將使用MetroWindow,因為這種方法將一個好的比例的應用程式和工作是最快和最容易的方法。 如果你想了解自己的視窗,檢視該指南。
使用MetroWindow控制
修改XAML檔案
在安裝MahApps.Metro:
開放MainWindow.xaml
新增該屬性在開啟視窗標記。 (這是你如何引用其他在XAML名稱空間):
xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
改變<Window ...標籤<controls:MetroWindow ...(記得改變關閉標籤!)
| 1 |
|
修改後臺程式碼檔案
你還需要修改MainWindow.xaml.cs檔案的基類MainWindow匹配的MetroWindowXAML檔案的類。 訪問MetroWindow首先,新增以下參考。
using MahApps.Metro.Controls public partial class MainWindow : MetroWindow { }
但在大多數情況下你可以把基類(因為這是一個partial類的XAML應該照顧):
public partial class MainWindow { }
最終的結果會是這樣的:
使用內建的樣式
所有MahApp.metro的資源都包含在單獨的資源字典。 為了讓大多數的控制採用MahApps。 地鐵主題,您將需要新增以下ResourceDictionaries你App.xaml
app.xaml
<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>
最後的結果看起來是這樣的。 如果你想知道更多關於控制是如何工作的,下面可以找到更多的資訊。
什麼是MetroWindow ?
預設的MetroWindow由幾部分組成:
如果你不喜歡的元素標籤,不要害怕,他們都是可選的。
titlebar是集MetroWindow除了你自己的。ShowTitleBar="true|false"
不是大小的控制只有方法來調整MetroWindow——所有的稜角都可以抓住,但考慮到MetroWindow沒有明顯的視窗“鉻”像一個航空視窗,調整控制可以幫助安撫使用者。
而不是使用靜態影象、最小化、最大化/關閉的圖示字型Marlett。 解釋為什麼這是如此需要重溫記憶,或者至少訪問維基百科的文章關於它。
你甚至可以隱藏標題欄上的圖示設定ShowIconOnTitleBar="true|false"
定製
WindowCommands
WindowCommands最小化、最大化/還原、關閉按鈕。 您可以新增自己的控制WindowsCommands——預設情況下,按鈕樣式自動應用到他們讓他們適應的其餘部分WindowsCommands。 0.9,你不再侷限於按鈕,但任何控制。 請注意,你負責樣式按鈕。
包括這MetroWindow標籤:
<Controls:MetroWindow.RightWindowCommands> <Controls:WindowCommands> <Button Content="settings" /> <Button> <StackPanel Orientation="Horizontal"> <Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"> <Rectangle.OpacityMask> <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cupcake}" /> </Rectangle.OpacityMask> </Rectangle> <TextBlock Margin="4 0 0 0" VerticalAlignment="Center" Text="deploy cupcakes" /> </StackPanel> </Button> </Controls:WindowCommands> </Controls:MetroWindow.RightWindowCommands>
一定要包括圖示把蛋糕
產生這個視窗titlebar:
前臺(連結)的顏色WindowCommands永遠是白色,除非titlebar是禁用的,在這種情況下,它將是您選擇相反的任何主題。 例如,使用白色/光主題,前景顏色是黑色的。
還有LeftWindowCommands,orientates titlebar左邊的命令。
在WPF中要想使用Metro風格是很簡單的，可以自己畫嘛..
但是為了節省時間，哈，今天給大家推薦一款國外Metro風格的控制元件庫。
本文只起到拋磚引玉的作用，有興趣還是推薦大家上官網，Thanks，官網地址 我會在底部發出。
實現效果
其實下面僅僅是對窗體的一個簡單設定，以及放了些簡單的按鈕，這是本文拋磚引玉的示例程式，其實還有非常多的好玩的樣式，包括動畫效果。
安裝 MahApps.Metro
這裡依然推薦使用NuGet來進行安裝，如下圖所示。
然後在NuGet中搜索 MahApps.Metro ，然後進行安裝即可，如下圖所示。
安裝好之後就已經在我們的引用中完成了。
實現Metro樣式三部曲
1.首先將資源引入App.xaml
- <Application x:Class="MetroWPF.App"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- StartupUri="MainWindow.xaml">
- <Application.Resources>
- <ResourceDictionary>
- <ResourceDictionary.MergedDictionaries>
- <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
- <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
- <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
- <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
- <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
- </ResourceDictionary.MergedDictionaries>
- </ResourceDictionary>
- </Application.Resources>
- </Application>
引入之後幾乎我們所有的控制元件都具備了Metro樣式了。
2.再把窗體換成Metro風格
在XAML狀體中進行如下 xmlns 引用。
- xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
然後將Window標籤替換為如下標籤
- <controls:MetroWindow ...
就ok了。
看看我的窗體的XAML完整程式碼吧，我加了三個控制元件做示例，如下所示。
- <controls:MetroWindow x:Class="MetroWPF.MainWindow"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
- GlowBrush="{DynamicResource AccentColorBrush}"
- Title="MainWindow" Height="350" Width="525">
- <controls:MetroWindow.RightWindowCommands>
- <controls:WindowCommands>
- <Button Content="settings" />
- <Button Content="設定" />
- </controls:WindowCommands>
- </controls:MetroWindow.RightWindowCommands>
- <Grid>
- <StackPanel>
- <Label Margin="20">www.wxzzz.com</Label>
- <TextBox Margin="40,10,40,10"></TextBox>
- <Button>Metro Style Button</Button>
- </StackPanel>
- </Grid>
- </controls:MetroWindow>
3.最後一步修改窗體cs程式碼中的繼承
- //引用
- using MahApps.Metro.Controls;
- namespace MetroWPF
- {
- /// <summary>
- /// MainWindow.xaml 的互動邏輯
- /// </summary>
- public partial class MainWindow : MetroWindow
- {
- public MainWindow()
- {
- InitializeComponent();
- }
- }
- }
至此，我們的示例就完成了，我們順便再來看看官方的窗體示例吧！其實都是很簡單的設定，非常好用。
本文示例原始碼下載：MetroWPF
官方示例地址：http://mahapps.com/guides/quick-start.html
官方控制元件示例地址：http://mahapps.com/controls/
MahApps.Metro 專案原始碼：https://github.com/MahApps/MahApps.Metro