需初步認知 Visual Studio wpf project、material-design
使用 Visual Studio2013版本開發,要是2015版本沒遇到的問題,歡迎加入討論
就我認知像是 Wordpress 的佈景主題
可以把 Material-design 直接套在妳想使用的(工具箱)控制項上!
使用 Visual Studio 拖曳出妳要的工具,呈現大部分是無縫接軌的!
好了說這麼多﹐看一下標題連結官網的demo影片,Get start後面也會提到
如何安裝此套件在 Visual Studio 上?
首先讚嘆偉大的開源主:[Github]ButchersBoy/MaterialDesignInXamlToolkit
知道開源原始碼在哪就好,因為我們要用 studio上的nuget管理套件來下載
三步驟
1.open you Visual Studio wpf專案
2.打開你的Nuget管理套件介面,新專案已安裝部分應該會是空的
3.下載Materialdesigntheme套件
到已安裝檢查,會發現下載兩個套件
管理color(version1.1.2)
Materialdesignthemes(version2.1.0.657)
確認這兩個版本是否為官方釋出最新的
如何初步的實現在工具箱的控制向上?
在官方網站上有提到get start,很清楚說明安裝後,該如何把套件引入你的介面
二步驟
1.複製代碼,放到 App.xaml(官方copy)
App.xaml1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <Application x:Class="MaterialDesignColors.WpfExample.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" <!--Dragablz套件引入,後面會提到--> xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
|
2.複製代碼,放到Mainwindow.xmal裡的 <Wndow>
Mainwindow.xaml1 2 3 4 5 6 7 8 9 10 11
| <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" <!--material套件引入--> xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" TextElement.Foreground="{DynamicResource MaterialDesignBody}" Background="{DynamicResource MaterialDesignPaper}" TextElement.FontWeight="Medium" TextElement.FontSize="14" FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto" Title="MainWindow" Height="725.306" Width="967.248">
|
以上才是真正的完成,套用在工具箱的控制向上
由於工具箱裡的item太多(想知道可以在下方提問)
番外篇
2013版本上,拖曳出,無法順利實現material-design!
所以參考MaterialDesignInXamlToolkit官網部落格
似乎需要靠額外的一個套件叫Dragablz來實現
三步驟
(檔案連結上述內容,後續)
1.安裝套件,不多贅述(同上教學)
2.將dragablz引入到MainWindow.xaml、App.xaml
xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
並將dragablz:TabablzControl實現在Mainwindow.xaml
Mainwindow.xaml1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <Window x:Class="MaterialDesignTabExample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" <!--Dragablz套件引入--> xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" TextElement.Foreground="{DynamicResource MaterialDesignBody}" Background="{DynamicResource MaterialDesignPaper}" TextElement.FontWeight="Medium" TextElement.FontSize="14" FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto" Title="MainWindow" Height="725.306" Width="967.248">
<dragablz:TabablzControl> <dragablz:TabablzControl.InterTabController> <dragablz:InterTabController /> </dragablz:TabablzControl.InterTabController> <TabItem Header="HELLO"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</TextBlock> </TabItem> <TabItem Header="MATERIAL"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Material Design</TextBlock> </TabItem> <TabItem Header="DESIGN"> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Looks Quite Nice</TextBlock> </TabItem> </dragablz:TabablzControl> </Window>
|
App.xaml1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <Application x:Class="MaterialDesignColors.WpfExample.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" <!--Dragablz套件引入--> xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary>
<ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" /> <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /> <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/> </ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" /> </ResourceDictionary> </Application.Resources> </Application>
|
3.客製化─不要擁有拖曳出新視窗的功能!移除下面這段即可
Mainwindow.xaml1 2 3
| <dragablz:TabablzControl.InterTabController> <dragablz:InterTabController /> </dragablz:TabablzControl.InterTabController>
|
此版本當使用 <dragablz:TabablzControl>
時 <TableItem>
內容無法點選,且無法拖曳方式編輯!
這就像機車沒有排氣管,還是可以騎?
速度慢一點而已,還有很吵改很大,頂多驗車而已
好啦~ 原因不明,我的處理方式:
- 是先將
<dragablz:TabablzControl>
註解掉
- 用回
<TabControl>
就可以了