1. 程式人生 > >一個Metro風格的開源項目 MahApps.Metro

一個Metro風格的開源項目 MahApps.Metro

edt sources windows 寬度 主題 examples sin 寫到 width

目錄:

Metro風格控件

Metro主題

MahApps.Metro文檔地址:http://mahapps.com/MahApps.Metro/

源碼地址:https://github.com/MahApps/MahApps.Metro

在VS中可以裝一個NuGet插件來下載MahApps.Metro.dll和MahApps.Metro.Resources.dll。

MahApps.Metro文檔寫的很詳細了。可以先了解下如何使用。在往下看這篇文章。

文檔也給出了一些Examples:

  • Windows Phone Power Tools
  • XamlSpy
  • MahChats
  • MarkPad
  • Carnac

Metro風格控件

MahApps.Metro大概有16個自定義控件。

技術分享

1、AppBarButton繼承Button,在Button上增加了Visual類的屬性。用來改變可視化界面。

2、LayoutInvalidationCatcher在邏輯樹中測繪Child所需的空間。

3、MetroContentControl這個控件主要是在TabControl切換的時候,給它一些切換的動畫。同時必須配合ReloadBehavior.OnSelectedTabChanged這個附加屬性。

4、MetroImage這個AppBarButton類似,只是模板Style不同。

5、MetroProgressBar繼承ProgressBar,也就是對進度條模板重寫。加了動畫,類似於Loading效果。

6、Panorama繼承於ItemsControl,設置Item的高度,寬度還有動畫效果。

7、PanoramaItem是一個繼承於ContentControl自定義控件,他增加了header,HeaderOpacity,HeaderTemplate,Orientation的依賴屬性。

8、Planerator控制子控件的旋轉。

9、ProgressIndicator和MetroProgressBar類似,效果圖技術分享,也是一種加載動畫控件。ProgressIndicator主要是以xaml來寫的,而MetroProgressBar主要是以代碼來寫的。

10、ProgressRing和上面的類似技術分享

11、RevealImage給ImageSource增加些鼠標移動到上面的動畫效果。

12、Title 繼承於Button,多了幾個依賴屬性(Title,Count,KeepDragging,TitleFactor)

13、ToggleSwitch繼承於ToggleButton,技術分享

14、ToggleSwitchButton和ToggleSwitch類似技術分享主要實現這種開關效果。

15、TransitioningContentControl控件內容動態出現和消失。

16、WindowCommands實現了窗體的最小化,還原,最大化,關閉功能。就是Window窗體上面的邊框。這裏文檔上也寫到不能自動綁定Caliburn.Macro的事件命令。必須寫cal:Message.Attach來綁定。x:Name自動綁定的寫法失效了。

Metro主題

ThemeManager這個類,來改變主題風格。源碼裏面有白色和黑色兩套背景主題(BaseLight.xaml和BaseDark.xaml)

通過ThemeManager.ChangeTheme改變主題顏色。

一個Metro風格的開源項目 MahApps.Metro