【Material Design Toolkit】 Slider

　Material Design Toolkitには２種類のスライダースタイルが定義されています。
　この２つのスライダーは似たような見た目ですが挙動が大きく違います。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <GroupBox Grid.Row="0" Header="MaterialDesignSlider" Margin="5">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0">
                <Slider TickFrequency="10" Margin="5" Minimum="1" Maximum="100" Value="50"/>
                <Slider TickFrequency="10" TickPlacement="BottomRight" Margin="5" Minimum="1" Maximum="100" Value="50"/>
            </StackPanel>
            <StackPanel Grid.Column="1" Orientation="Horizontal" Height="100">
                <Slider TickFrequency="10" Orientation="Vertical" Margin="5" Minimum="1" Maximum="100" Value="50"/>
                <Slider TickFrequency="10" Orientation="Vertical" TickPlacement="BottomRight"  Margin="5" Minimum="1" Maximum="100" Value="50"/>
            </StackPanel>
        </Grid>
    </GroupBox>

    <GroupBox Grid.Row="1" Header="MaterialDesignDiscreteSlider" Margin="5">
        <Slider TickFrequency="5" Margin="5" 
                Style="{StaticResource MaterialDesignDiscreteSlider}"
                Minimum="1" Maximum="100" Value="50"/>
    </GroupBox>
</Grid>

　このコードを実行すると以下の様になります。

　スタイルを指定しない場合はMaterialDesignSliderが使用されます。
　このスタイルはWPFのスライダーと同じ挙動をします。（スタイルで見た目をかえただけ）
　そのためTickPlacementプロパティで目盛りの表示位置を変更したり、Orientationプロパティでスライダーの方向を変更できます。
　対してMaterialDesignDiscreteSliderを使用する場合はいくつかの制約があります。
　まず、TickPlacementプロパティを指定しても目盛りは表示されません。
　また、OrientationプロパティをVerticalにすると正しく表示されなくなります。
　さらに、つまみをドラッグして値を変更する際にはTickFrequencyプロパティで指定した数値単位で値が変更されます。
　そのかわりMaterialDesignSliderと違いつまみをドラッグ中は画像のように現在の値が表示されます。

【Material Design Toolkit】 ProgressBar

　Material Design Toolkitでは２種類のProgressBarスタイルが用意されています。
　プログレスインジケーターがライン状のMaterialDesignLinearProgressBarとサークル状のMaterialDesignCircularProgressBarがあり、スタイルを指定しなかった場合はMaterialDesignLinearProgressBarが使用されます。

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="1" Text="MaterialDesignLinearProgressBar" Margin="20,1"/>
    <TextBlock Grid.Row="0" Grid.Column="2" Text="MaterialDesignCircularProgressBar" Margin="20,1"/>

    <TextBlock Grid.Row="1" Grid.Column="0" Text="Indeterminate=False, Value=40"/>
    <ProgressBar Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="100" Value="40"/>
    <ProgressBar Grid.Row="1" Grid.Column="2" Minimum="0" Maximum="100" Value="40"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="2" Grid.Column="0" Text="Indeterminate=True, Value=40"/>
    <ProgressBar Grid.Row="2" Grid.Column="1" Minimum="0" Maximum="100" Value="40" IsIndeterminate="True"/>
    <ProgressBar Grid.Row="2" Grid.Column="2" Minimum="0" Maximum="100" Value="40" IsIndeterminate="True"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="3" Grid.Column="0" Text="Indeterminate=True, Value=0"/>
    <ProgressBar Grid.Row="3" Grid.Column="1" IsIndeterminate="True"/>
    <ProgressBar Grid.Row="3" Grid.Column="2" IsIndeterminate="True"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="4" Grid.Column="0" Text="Width=50"/>
    <ProgressBar Grid.Row="4" Grid.Column="1" IsIndeterminate="True" Width="50"/>
    <ProgressBar Grid.Row="4" Grid.Column="2" IsIndeterminate="True" Width="50"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

    <TextBlock Grid.Row="5" Grid.Column="0" Text="Height=50"/>
    <ProgressBar Grid.Row="5" Grid.Column="1" IsIndeterminate="True" Height="50"/>
    <ProgressBar Grid.Row="5" Grid.Column="2" IsIndeterminate="True" Height="50"
                    Style="{StaticResource MaterialDesignCircularProgressBar}"/>

</Grid>

　このコードを実行すると以下の様になります。

　一番上のProgressBarはIsIndeterminateがFalseの状態のProgressBarです。
　Valueで指定した数値までが濃い紫色で表示されます。画像は40%の状態です。

　２つめと３つめはIsIndeterminateをTrueにした状態のProgressBarです。
　IsIndeterminateをTrueにした場合、MaterialDesignLinearProgressBarとMaterialDesignCircularProgressBarでは大きな違いがあります。
　MaterialDesignLinearProgressBarではValueの値に関わらず一定幅の色付き領域が左から右へ流れるアニメーションが繰り返されます。
　MaterialDesignCircularProgressBarの場合はValueの値によってアニメーションに違いが生まれます。
　Valueの値が0以外の場合（画像だと２番目）は、Valueで指定した範囲に色が付き、それがゆっくり回転します。
　Valueを指定しなかった又は0の場合（画像だと3番目)は、Valueが0%から100%まで変化するようにインジケーターが変化し、それが回転します。

　４つめの画像はProgressBarのWidthプロパティを50に指定した場合です。
　Widthの値に合わせてProgressBarの幅又は大きさが変化します。

　５つ目の画像はProgressBarのHeightプロパティを50に指定した場合です。
　表示されているインジケーターの大きさは変わりませんが、表示領域は指定した値に変化しています。（つまりHeightを指定する意味はありません。）
　Material Design ToolkitのProgressBarを使う場合はWidthでインジケーターの幅や大きさを変化させることができますが、MaterialDesignLinearProgressBarの高さを変えたり、MaterialDesignCircularProgressBarの線の太さを変えたりは出来ないようです。
　2017/10/9修正
　Material Design Toolkitの更新によりProgressBarのHeightプロパティが反映されるようになりました。
　Heightが反映されるのはMaterialDesignLinearProgressBarの場合のみでMaterialDesignCircularProgressBarでは反映されないようです。

【Material Design Toolkit】 DataGrid

　Material Design ToolkitではDataGridのスタイルは「MaterialDesignDataGrid」の１つだけです。
　このスタイルは規定のスタイルに設定されているためDataGridを使用する際にStyleを指定する必要はありません。
　スタイルで見た目を変えているだけなので通常のDataGridと使い方は全く同じです。
　以下のコードはCheckBox、TextBox、ComboBoxを使用したDataGridのサンプルです。
　ViewModelのコードはデータバインディング用のプロパティを持っているだけなので省略します。

<Window x:Class="DataGridDemo.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:v="clr-namespace:DataGridDemo.Views"
        xmlns:vm="clr-namespace:DataGridDemo.ViewModels"
        Title="MainWindow" Height="350" Width="525"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <DataGrid ItemsSource="{Binding InfoList}" Margin="5,10" AutoGenerateColumns="False" CanUserAddRows="False"
              materialDesign:DataGridAssist.CellPadding="10,5,5,5"
              materialDesign:DataGridAssist.ColumnHeaderPadding="10">
        <DataGrid.Columns>
            <DataGridCheckBoxColumn Header="選択" Binding="{Binding IsSelected}"
                                    ElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnStyle}"
                                    EditingElementStyle="{StaticResource MaterialDesignDataGridCheckBoxColumnEditingStyle}"/>

            <!-- 通常のTextColumnを使用する場合 -->
            <DataGridTextColumn Header="名前" Binding="{Binding Name}"
                                EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}"/>

            <!-- MaterialDesignのTextColumnを使用して入力時にPopUpを表示する -->
            <materialDesign:MaterialDataGridTextColumn Header="年齢" Binding="{Binding Age}"
                                                       EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />

            <!-- MaterialDesignのTextColumnを使用して入力文字数を表示する -->
            <materialDesign:MaterialDataGridTextColumn Header="メールアドレス" Binding="{Binding MailAddress}"
                                                       MaxLength="50"
                                                       EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" />

            <materialDesign:MaterialDataGridComboBoxColumn Header="都道府県"
                                                           ItemsSourceBinding="{Binding PrefectureList}"
                                                           SelectedValueBinding="{Binding Prefecture}"/>
        </DataGrid.Columns>
    </DataGrid>
</Window>

　このコードを実行すると以下の様なDataGridが表示されます。

　DataGrid定義時にmaterialDesign:DataGridAssist.CellPaddingを使用することでセルのPaddingを指定することができます。
　同様に、materialDesign:DataGridAssist.ColumnHeaderPaddingを使用することでヘッダーのPaddingを指定することができます。

　DataGridの最初のカラムにはDataGridCheckBoxColumnを使用してbool型のプロパティを表示しています。
　ElementStyel, EditingElementStyleを省略してもエラーにはなりませんがWPFデフォルトのCheckBoxが表示されてしまいます。

　２つめのカラムにはDataGridTextColumnを使用して文字列のプロパティを表示しています。
　テキスト編集時の見た目はEditingElementStyleに準じます。

　３つめと４つめのカラムにはmaterialDesign:MaterialDataGridTextColumnを使用して入力をポップアップ表示させています。
　EdigingElementStyleにはポップアップ入力用スタイルMaterialDesignDataGridTextColumnPopupEditingStyleを指定します。
　４つ目のカラムではMaxLengthを指定することで編集時に入力されている文字数が表示されます。
　文字列編集時には以下の様になります。

　最後のカラムにはmaterialDesign:MaterialDataGridComboBoxColumnを使用しています。
　DataGridComboBoxColumnを使わないのはComboBoxのスタイルをMaterial Design Toolkitに合わせるためです。