概要

この記事は C# Advent Calendar 2021 13日目の記事です。

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

基本的な説明は
Material Design In XAML ToolkitでWPFアプリにモダンなUIを！
Material Design In XAML Toolkitでお手軽にWPFアプリを美しく
等をご参考にしてください。

新機能

Nullable有効化

null許容参照型が有効になりました。xamlだとあまり意識しませんが、コードビハインドでコントロールにアクセスする場合は違いが感じられるかもしれません。

デフォルトウインドウスタイル

WindowのStyleに指定すると、MaterialDesignにそった色やフォントに変更する。逆に今まで無かったのが意外。

<Window x:Class="MaterialTestV43.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Style="{StaticResource MaterialDesignWindow}">
...

...SecondaryLightButtonと...SecondaryDarkButtonの追加

PrimaryColorのLightとDarkに対応したボタンのStyleはあったが、SecondaryColor（AccentColorとも呼ばれる）のLight・Darkに対応したボタンが無かったが、それが追加された。

下記は MaterialDesignRaised...Buttonボタンの一覧だが、これ以外にもMaterialDesignFloatingActionMini...ButtonやMaterialDesignFlat...Buttonがある。

<UniformGrid Margin="10" Columns="3">
    <Button Margin="5" Content="PrimaryLight" Style="{StaticResource MaterialDesignRaisedLightButton}" />
    <Button Margin="5" Content="PrimaryMid" Style="{StaticResource MaterialDesignRaisedButton}" />
    <Button Margin="5" Content="PrimaryDark" Style="{StaticResource MaterialDesignRaisedDarkButton}" />
    <Button Margin="5" Content="SecondaryLight" Style="{StaticResource MaterialDesignRaisedSecondaryLightButton}" />
    <Button Margin="5" Content="SecondaryMid" Style="{StaticResource MaterialDesignRaisedSecondaryButton}" />
    <Button Margin="5" Content="SecondaryDark" Style="{StaticResource MaterialDesignRaisedSecondaryDarkButton}" />
</UniformGrid>

Color Adjustment

前景色とのコントラスト差を保つように色の明度・彩度を変更する機能

Lightテーマで明るめの色 or Darkテーマで暗めの色を選択すると、FlatButtonやCheckBoxが見えづらくなる。
Adjustmentを有効にすると、これを調整してくれる。
ただし元の色とは変わってしまうので、この辺は好みが分かれるところ。コントロールによっては調整しなくても問題ない。

下の画像は上から順に、[Lightテーマ Adjustmentあり]、[Lightテーマ Adjustmentなし]、[Darkテーマ Adjustmentあり]、[Darkテーマ Adjustmentなし]となっている。

App.xamlのThemeで ColorAdjustment="{materialDesign:ColorAdjustment}" と指定すると有効になる。

App.xaml

<Application
    x:Class="MaterialTestV43.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:MaterialTestV43"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme
                    BaseTheme="Inherit"
                    PrimaryColor="LightBlue"
                    ColorAdjustment="{materialDesign:ColorAdjustment}"
                    SecondaryColor="DeepOrange" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

文字数カウンター

TextBoxにMaxLengthを指定すると、右下に文字数カウンターが表示されます。
Twitterの投稿みたいに文字数を制限したい場合や郵便番号など文字の長さが決まっている場合は便利です。

<TextBox
    Width="400"
    Margin="10"
    MaxLength="50"
    Text="寿限無、寿限無、五劫の擦り切れ、海砂利水魚の、水行末・雲来末・風来末、喰う寝る処に住む処、藪ら柑"
    TextWrapping="Wrap" />

テキストボックス内アイコン

テキストボックスの前後にアイコンを追加できる。アイコンと文字列を組み合わせたい、というのはよくある要望だが、StackPanelなど複数コントロールの組み合わせなしに、簡単にそれができるようになった。

<TextBox
    Width="150"
    Margin="10"
    materialDesign:TextFieldAssist.HasLeadingIcon="True"
    materialDesign:TextFieldAssist.HasTrailingIcon="True"
    materialDesign:TextFieldAssist.LeadingIcon="Triangle"
    materialDesign:TextFieldAssist.LeadingIconSize="8"
    materialDesign:TextFieldAssist.TrailingIcon="Yen"
    materialDesign:TextFieldAssist.TrailingIconSize="24"
    Text="1,000,000"
    TextWrapping="Wrap" />

アウトラインコンボボックスの追加

枠線で囲われたCombobox MaterialDesignOutlinedComboBox が追加されました。

<ComboBox
    Width="200"
    Margin="120"
    materialDesign:HintAssist.Hint="Citreae"
    Style="{StaticResource MaterialDesignOutlinedComboBox}">
    <ComboBoxItem Content="Lemon" />
    <ComboBoxItem Content="Orange" />
    <ComboBoxItem Content="Grapefruit" />
</ComboBox>

フィルドコンボボックスの追加（v.3.1)

背景が灰色で塗りつぶされたCombobox MaterialDesignFilledComboBox が追加されました。
Version 3.1で登場していたのですが、見落としていたので、ついでに紹介します。

<ComboBox
    Width="200"
    Margin="120"
    materialDesign:HintAssist.Hint="Citreae"
    Style="{StaticResource MaterialDesignFilledComboBox}">
    <ComboBoxItem Content="Lemon" />
    <ComboBoxItem Content="Orange" />
    <ComboBoxItem Content="Grapefruit" />
</ComboBox>

アイコンジェネレーター（デモアプリ）

これはLibraryの機能ではなく、デモアプリの機能です。
指定したアイコンを.icoファイルに出力してくれます。アプリのアイコンもMaterialDesignのアイコンにしてしまいたいときは便利です。

ソースコード

今回の完全なソースコードをGithubにおいておきます。

参考

環境

Visual Studio 2022
.NET 6.0

csproj

  <ItemGroup>
    <PackageReference Include="MaterialDesignThemes" Version="4.3.0" />
  </ItemGroup>

Material Design In XAML Toolkit v4.3 の紹介

概要

新機能