LoginSignup
12

More than 3 years have passed since last update.

Material Design In XAML Toolkit v3.2 の紹介

Last updated at Posted at 2020-12-20

概要

この記事は 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は単位を書くときに便利です。.PrefixTextHintAssist.Hintと似ていますが、テキストボックスが空かどうかに関わらず左側に配置されます。

image.png

<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

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

NavigationRail

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

image.png

<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

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

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

あると地味に便利

image.png

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

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

image.png

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

image.png

ソースコード

今回の完全なソースコードを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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12