Material Design In XAML Toolkit v3.2 の紹介

9848 ワード
Xaml C# .NET WPF C# テキストリンク

概要

この記事は 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を！
Material Design In XAML Toolkitでお手軽にWPFアプリを美しく
Material Design In XAML Toolkit v3.0 の紹介
等をご参考にしてください。

TextFieldAssist.SuffixText, .PrefixText, .HasClearButtonなど

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

<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です。

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

NavigationRail

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

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

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

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

あると地味に便利

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

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

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

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のツールボックスに各コントロールが追加されるようになりました。

ソースコード

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

参考

環境

Visual Studio 2019 16.8.3
.NET Core 3.1

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