【WPF】MaterialDesign の Drawer を試す

WPF の標準コントロールをマテリアルデザインスタイルに変えてくれるパッケージを使って、簡単にお洒落な WPF アプリを作っていきます。

マテリアルデザインとは、Google が推奨する一貫性のある馴染みやすいデザインのことです。Google が推奨しているということは、世界中で愛されるということになるので、世界基準の一流デザインを取り入れることになります。

マテリアルデザインを取り入れたアプリが簡単に作れる「MaterialDesignThemes」パッケージを使って、いろいろ試していきたいと思います。

MaterialDesignInXAML/MaterialDesignInXamlToolkit

Google's Material Design in XAML & WPF, for C# & VB.Net. - MaterialDesignInXAML/MaterialDesignInXamlToolkit

今回は、MaterialDesignThemes の Drawer を試したいと思います。

事前準備
処理
1. MainWindow.xaml
おわりに

事前準備

プロジェクトを作成して、NuGet で「MaterialDesignThemes」パッケージを入れます。

詳しくは、前の記事を参考にして下さい。

【WPF】MaterialDesign の Dialog を試す

WPF の標準コントロールをマテリアルデザインスタイルに変えてくれるパッケージを使って、簡単にお洒落な WPF アプリを作っていきます。マテリアルデザインとは、Google が推奨する一貫性のある馴染みやすいデザインのこと...

処理

MainWindow.xaml

<Window
  x:Class="WpfApp3.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  Title="MainWindow" Width="500" Height="300" mc:Ignorable="d">
  <Window.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Teal.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Window.Resources>
  <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
    <materialDesign:DrawerHost.LeftDrawerContent>
      <Grid Width="200">
        <materialDesign:ColorZone Mode="PrimaryMid" materialDesign:ShadowAssist.ShadowDepth="Depth1" Padding="16" Height="150">
          <Grid>
            <Button Style="{StaticResource MaterialDesignFloatingActionLightButton}" HorizontalAlignment="Left" VerticalAlignment="Top">
              <materialDesign:PackIcon Kind="AccountCircleOutline" Height="Auto" Width="Auto" />
            </Button>
            <TextBlock FontWeight="Bold" Text="LeftDrawerContent" VerticalAlignment="Bottom" Margin="0,0,0,20.96"/>
            <TextBlock TextWrapping="Wrap" VerticalAlignment="Bottom" Text="Otukare sama." Margin="0,0,21,0"/>
            <materialDesign:PackIcon Kind="ChevronDown" HorizontalAlignment="Right" Width="Auto" Height="16" VerticalAlignment="Bottom" />
          </Grid>
        </materialDesign:ColorZone>
      </Grid>
    </materialDesign:DrawerHost.LeftDrawerContent>
    <Grid>
      <materialDesign:ColorZone Padding="16" materialDesign:ShadowAssist.ShadowDepth="Depth1" Mode="PrimaryMid">
        <DockPanel>
          <StackPanel Orientation="Horizontal">
            <ToggleButton x:Name="MenuToggleButton" IsChecked="False" Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
            <TextBlock Margin="16,0,0,0" VerticalAlignment="Center" Text="MainWindow" />
          </StackPanel>
        </DockPanel>
      </materialDesign:ColorZone>
    </Grid>
  </materialDesign:DrawerHost>
</Window>

ちょっと長いですが、やっていることは単純です。

ResourceDictionary.MergedDictionaries で必要なリソースを読み込んで、materialDesign:DrawerHost で全体を括っています。

materialDesign:DrawerHost.LeftDrawerContent の中にナビゲーションドロワーに出したい内容を書いて、ToggleButton の IsChecked でナビゲーションドロワーの開閉を制御しています。