Wpf UI框架 MaterialDesign 的使用記錄

近期公司有桌面客戶端的開發需求，並且對樣式和界面反饋有一定的要求，對比各種開源UI框架後確認使用MaterialDesign 。

1、引入框架MaterialDesignThemes，注意下對應的版本號，我用的2.6.0的。原因嘛視頻教程就是這個版本。

 

 2、App.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.LightBlue.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <!--重寫框架主體色-->
            <SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#3b76ee" />
            <SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#3b76ee"  />
            <SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#3b76ee"  />
            <SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#3b76ee"  />
            <SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#3b76ee"  />
            <SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#3b76ee"  />
        </ResourceDictionary>
    </Application.Resources>

3、在窗體頁面代碼中引入 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 

 

 4、下載官網demo app，官方下載地址：https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases。注意下載和第一步引入框架的版本一致，打開後界面如下：

 

 

舉個栗子，比如你要用某個按鈕的樣式，打開左側菜單，選擇button,找到想要的按鈕，點右下角複製代碼：

 

 這裏面東西很多，需要的可以自己慢慢看。

5、說說第3步註釋下面的配置吧，由於公司設計給的顏色在框架的主體色中沒有，所以我把LightBlue主題的所有顏色重寫了。MaterialDesign 有很多的主題色，都在上面這個demo裏面。

 

這些都是主題名稱，並且在第3步的配置文件中可以直接替換Primary後面的文件名稱。如果你需要的主題顏色在這裏面找不到，那就像我一樣把所有的顏色改成你要得顏色。至於爲什麼知道這麼改，下載MaterialDesign 源碼後，在MaterialDesignColors.Wpf類庫下，打開如圖的文件夾，找到對應的主題配置文件，打開後就是我圖裏這樣。沒仔細看都是什麼意思，直接把9-14行全部複製到自己的項目裏面，把顏色改了，最後就像我那個配置文件一樣。

 

6、框架控件的屬性後臺代碼賦值方式

 

MaterialDesignThemes.Wpf.ButtonAssist.SetCornerRadius(waitPaientBtn, new CornerRadius(10, 0, 0, 0));

 

7、一些效果頁面，公司產品有些不得已打碼了。

登陸頁

 

 業務界面

 

 自己封裝的提醒頁面