編輯器 / Visual Studio
0 visits

Use MaterialDesignInXamlToolkit wpf

需初步認知 Visual Studio wpf project、material-design
使用 Visual Studio2013版本開發，要是2015版本沒遇到的問題，歡迎加入討論

何謂 MaterialDesignInXamlToolkit ?

就我認知像是 Wordpress 的佈景主題
可以把 Material-design 直接套在妳想使用的(工具箱)控制項上!
使用 Visual Studio 拖曳出妳要的工具，呈現大部分是無縫接軌的!
好了說這麼多﹐看一下標題連結官網的demo影片，Get start後面也會提到

如何安裝此套件在 Visual Studio 上?

首先讚嘆偉大的開源主：[Github]ButchersBoy/MaterialDesignInXamlToolkit
知道開源原始碼在哪就好，因為我們要用 studio上的nuget管理套件來下載

三步驟

1.open you Visual Studio wpf專案
2.打開你的Nuget管理套件介面，新專案已安裝部分應該會是空的
Screen Capture on 09-09-2016 (1).gif
3.下載Materialdesigntheme套件
下載.gif
到已安裝檢查，會發現下載兩個套件
管理color(version1.1.2)
Materialdesignthemes(version2.1.0.657)

確認這兩個版本是否為官方釋出最新的

如何初步的實現在工具箱的控制向上?

在官方網站上有提到get start，很清楚說明安裝後，該如何把套件引入你的介面

二步驟

1.複製代碼，放到 App.xaml(官方copy)

App.xaml
1
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>
<!--此4個為可以更換的調色盤，light、default、DeepPurple、Lime-->
                <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.xaml
1
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來實現
Screenshot on 9.9.2016 at 1.17.26 PM.png

三步驟

(檔案連結上述內容，後續)
1.安裝套件，不多贅述(同上教學)

2.將dragablz引入到MainWindow.xaml、App.xaml
xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
並將dragablz:TabablzControl實現在Mainwindow.xaml

Mainwindow.xaml
1
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"
<!--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">
<!--置入TabablzControl-->
    <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.xaml
1
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" />
 <!-- Include the Dragablz Material Design style -->
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
            </ResourceDictionary.MergedDictionaries>
<!--Tell Dragablz tab control to use the Material Design theme -->
            <Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
        </ResourceDictionary>
    </Application.Resources>
</Application>

3.客製化─不要擁有拖曳出新視窗的功能!移除下面這段即可

Mainwindow.xaml
1
2
3
<dragablz:TabablzControl.InterTabController>
    <dragablz:InterTabController />
</dragablz:TabablzControl.InterTabController>

此版本當使用 <dragablz:TabablzControl> 時 <TableItem> 內容無法點選，且無法拖曳方式編輯!
這就像機車沒有排氣管，還是可以騎?
速度慢一點而已，還有很吵改很大，頂多驗車而已
好啦~ 原因不明，我的處理方式：

  1. 是先將 <dragablz:TabablzControl> 註解掉
  2. 用回 <TabControl> 就可以了
# material-design, visual-studio, wpf

Like this article? Support the author with

在 WP 上客製化 RSS 的 xml and url (下)
Linux centos 架多個 Wordpress 網站

Comments

Follow

Recent

Categories

Tag Cloud

PostgreSQL apache2 api array async auto aws beautify-ruby benchmark bloomfilter bot branch bucket bug build build_stubbed centos chrome class collection command commit compass cookie count css databases db domain enum error es5 es6 eth exists extend factorybot factorygirl feeling figaro fixed font-size git godaddy hangzhou heroku hexo index install instance ios javascript jquery json lazy-loading learn lendbot lending length linode linux load-more logdown mariadb material-design meetup member migration modal mysql mysql@5.7 notify package-install pakogi performance poloniex pq preventDefault problm psql rails rake redis remote resource rollback routes rspec rss ruby ruby-on-rails s3 sass sass-convert screen scroll scss seo session setting share shell-script size spec speed stash stopPropagation string sublime symbol telegram test ubuntu url utf utf8mb4 version visual-studio wallet wget wordpress wpf xml youtube

Recommend Links

Categories

Tag Cloud

PostgreSQL apache2 api array async auto aws beautify-ruby benchmark bloomfilter bot branch bucket bug build build_stubbed centos chrome class collection command commit compass cookie count css databases db domain enum error es5 es6 eth exists extend factorybot factorygirl feeling figaro fixed font-size git godaddy hangzhou heroku hexo index install instance ios javascript jquery json lazy-loading learn lendbot lending length linode linux load-more logdown mariadb material-design meetup member migration modal mysql mysql@5.7 notify package-install pakogi performance poloniex pq preventDefault problm psql rails rake redis remote resource rollback routes rspec rss ruby ruby-on-rails s3 sass sass-convert screen scroll scss seo session setting share shell-script size spec speed stash stopPropagation string sublime symbol telegram test ubuntu url utf utf8mb4 version visual-studio wallet wget wordpress wpf xml youtube

Recommend Links

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×