概要
この記事は 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の設定を継承するようになります。
<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
<ItemGroup>
<PackageReference Include="MaterialDesignThemes" Version="3.2.0" />
</ItemGroup>