Material Design In XAML Toolkit v3.2 の紹介

# 概要
この記事は C# Advent Calendar 2020 21日目の記事です。

Material Design In XAML ToolkitはWPFで簡単に見た目をカッコ良くするライブラリです。
2020/09/21にVersion 3.2がReleaseされました。
今回はVersion 3.1~3.2で追加されたいくつかの機能について紹介します。

基本的な説明は
[Material Design In XAML ToolkitでWPFアプリにモダンなUIを！](
http://qiita.com/smbkrysk14/items/3423c3202974ef21d1c0)
[Material Design In XAML Toolkitでお手軽にWPFアプリを美しく](http://neue.cc/2015/09/10_515.html)
[Material Design In XAML Toolkit v3.0 の紹介](https://qiita.com/soi/items/81abd346400ddca790df)
等をご参考にしてください。
# TextFieldAssist.SuffixText, .PrefixText, .HasClearButtonなど

テキストボックスに付属的な文字列を付ける機能と、テキストボックスに入力された文字を消去するボタン機能です。
`.SuffixText`は単位を書くときに便利です。`.PrefixText`は`HintAssist.Hint`と似ていますが、テキストボックスが空かどうかに関わらず左側に配置されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/9b45010a-0ab1-d6f5-ee9a-82a7d2e44e43.png)


```xml
<TextBox
   materialDesign:HintAssist.Hint="敷地面積"         
   materialDesign:TextFieldAssist.HasClearButton="True"
   materialDesign:TextFieldAssist.PrefixText="東京ドーム "
   materialDesign:TextFieldAssist.SuffixText="個分"
   Style="{StaticResource MaterialDesignFloatingHintTextBox}"
   Text="10" />
```

# Chips Style

`Chips`というコントロールは元々ありましたが、新しくコントロールの見た目をChipsにするStyleが追加されました。
対象となるコントロールは、`CheckBox`, `ListBox`, `RadioButton`です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/145eb2a3-2c20-475c-73c5-ce5a82a08b24.png)


```xml
<CheckBox Content="べんとう" Style="{StaticResource MaterialDesignFilterChipPrimaryCheckBox}" />
<CheckBox Content="すいとう" Style="{StaticResource MaterialDesignFilterChipAccentOutlineCheckBox}" />
<CheckBox Content="かさ" Style="{StaticResource MaterialDesignFilterChipAccentCheckBox}" />
```

# NavigationRail

VisualStudioCodeの左側にあるようなナビゲーションレールです。中身はTabコントロールです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/c7a458ff-f438-02ff-4c43-1281d92065cc.png)

```xml
<TabControl materialDesign:ColorZoneAssist.Mode="PrimaryMid" Style="{StaticResource MaterialDesignNavigatilRailTabControl}">
   <TabControl.Resources>
      <Style BasedOn="{StaticResource MaterialDesignNavigationRailTabItem}" TargetType="TabItem" />
   </TabControl.Resources>
   <materialDesign:NavigationRailAssist.FloatingContent>
      <Button Content="{materialDesign:PackIcon Kind=ArrowExpandLeft}" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" />
   </materialDesign:NavigationRailAssist.FloatingContent>
   <TabItem Header="{materialDesign:PackIcon Kind=Files}">
      <TextBlock Text="TAB1" />
   </TabItem>
   <TabItem Header="{materialDesign:PackIcon Kind=Search}">
      <TextBlock Text="TAB2" />
   </TabItem>
   <TabItem Header="{materialDesign:PackIcon Kind=Puzzle}">
      <TextBlock Text="TAB3" />
   </TabItem>
</TabControl>
```

# カレンダーのローカライズ

`DatePicker`は元々あったコントロールですが日付の表記などがローカライズされていなかったので使いづらかったです。これが改善されて表記が正しくなりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/b1ce8656-a9bf-f866-c473-15792dfcdc1b.png)


```xml
<DatePicker
   materialDesign:HintAssist.Hint="アドベントカレンダー"
   Language="ja-JP" />
```

# 右クリックメニューに全選択が追加

あると地味に便利

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/1f558bdf-bf00-7a66-652f-c6a7d39b83b1.png)


# WindowsのLight/Darkテーマ設定に追従

アプリケーション起動時にWindowsの設定＞個人用設定＞色
の設定によって、テーマ色をLight/Darkで切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/98bfe7f3-35af-c83b-2584-29fde2c59111.png)

`materialDesign:BundledTheme BaseTheme="Inherit"`と指定すると、Windowsの設定を継承するようになります。

```xml:App.xaml
<Application
...
   xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
   StartupUri="MainWindow.xaml">
   <Application.Resources>
      <ResourceDictionary>
         <ResourceDictionary.MergedDictionaries>
            <materialDesign:BundledTheme BaseTheme="Inherit" PrimaryColor="DeepPurple" SecondaryColor="Amber" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
         </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>
   </Application.Resources>
</Application>
```

# VisualStudioのツールボックスへ追加
VisualStudioのツールボックスに各コントロールが追加されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120077/9452710b-e7ff-01a2-5981-b06795f60955.png)

# ソースコード
今回の完全なソースコードをGithubにおいておきます。
https://github.com/soi013/MaterialTest

# 参考
https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

# 環境
Visual Studio 2019 16.8.3
.NET Core 3.1

```xml:csproj
  <ItemGroup>
    <PackageReference Include="MaterialDesignThemes" Version="3.2.0" />
  </ItemGroup>
```