【Material Design Toolkit】 PopupBox

　PopupBoxは標準のWPFにはないコントロールです。
　名前の通りコントロールをクリック又はマウスオーバーでポップアップを表示させることができます。
　PopupBoxでは使用するスタイルによって見た目も使用方法も大きく異なるコントロールになります。
　なお、PopupBoxを使用するためにはResourceDictionaryにPopupBox.xamlを追加する必要があります。
　（PopupBox.xamlはなぜかDefaults.xamlに入っていないため別途追記する必要があります。)
　PopupBoxを使用する場合のApp.xamlは以下の様になります。

<Application x:Class="MdDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Views\MainWindow.xaml"
             Startup="Application_Startup">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

    <StackPanel Orientation="Horizontal">
        <materialDesign:PopupBox Margin="20">
            <StackPanel Margin="10">
                <CheckBox Content="Item1"/>
                <CheckBox Content="Item2"/>
                <CheckBox Content="Item3"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox ToggleContent="選択" StaysOpen="True" Margin="20">
            <StackPanel Margin="10">
                <CheckBox Content="Item1"/>
                <CheckBox Content="Item2"/>
                <CheckBox Content="Item3"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionLightPopupBox}"
                            Margin="20">
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
                            Margin="20" PlacementMode="BottomAndAlignCentres" >
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionDarkPopupBox}"
                            Margin="20">
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionAccentPopupBox}"
                            Margin="20">
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>
    </StackPanel>

　スタイルを指定しない場合はMaterialDesignPopupBoxスタイルが適用されます。
　MaterialDesignPopupBoxの場合は点が縦に３つ並んだフラットボタンが表示されます。
　このボタンをクリックすると指定したポップアップコンテンツが表示されます。
　デフォルトではポップアップコンテンツ内で１回クリックするとポップアップコンテンツが非表示になります。
　StaysOpenプロパティをTrueに指定していればポップアップコンテンツ外をクリックするまで表示され続けます。
　ToggleContentプロパティを変更するとPopupBoxの表示を変更することができます。

　MaterialDesignMultiFloatingActionPopupBoxスタイル（色違いで４種類あり）を指定した場合は見た目がMaterialDesignFloatingActionButtonの様になります。
　こちらのスタイルではマウスオーバーした際にポップアップコンテンツが表示されるようになります。
　ポップアップコンテンツ内にボタンを配置した場合、スタイルの指定がない場合はMaterialDesignFloatingActionMiniLightButtonが適用されて小さい丸いボタンになります。

　ポップアップコンテンツの表示場所はPlacementModeで変更できます。
　例えばBottomAndAlignCentersの場合はPopupBoxの下にポップアップコンテンツを表示し、コンテンツは中央揃えで配置されます。
　以下の図はBottomAndXxxを指定した際の比較画像です。
　わかりやすくするために１つめのボタンを大きくしています。


　Left又はＲｉｇｈｔの場合はBottom(Top)の時とコンテンツの配置方法が変わります。
　以下の図はLeftAndXxxを指定した際の比較画像です。

【Material Design Toolkit】 RatingBar

　RatingBarはWPFには存在しないコントロールで、評価値の表示・変更を行うことができます。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Value1, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="0" Grid.Column="1" Max="5" 
                                Value="{Binding Value1, Mode=TwoWay}" />
        
    <!--読み取り専用にする場合-->
    <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Value1, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="1" Grid.Column="1" Max="5" Value="{Binding Value1}" 
                                IsHitTestVisible="False"/>
        
    <TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding Value2, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="2" Grid.Column="1" Max="10" 
                                Value="{Binding Value2, Mode=TwoWay}"/>

    <TextBlock Grid.Row="3" Grid.Column="0" Text="{Binding Value3, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="3" Grid.Column="1" Max="10" 
                                Value="{Binding Value3, Mode=TwoWay}"/>

    <!--Modeを指定しない場合-->
    <TextBlock Grid.Row="4" Grid.Column="0" Text="{Binding Value4, StringFormat=Value:{0}}"/>
    <materialDesign:RatingBar Grid.Row="4" Grid.Column="1" Max="10" 
                                Value="{Binding Value4}" />

    <materialDesign:RatingBar Grid.Row="5" Grid.Column="1"
                                Max="3" Value="2" Margin="20,5" Orientation="Vertical">
        <materialDesign:RatingBar.ValueItemTemplate>
            <DataTemplate DataType="system:Int32">
                <Grid>
                    <materialDesign:PackIcon Kind="Heart" Height="24" Width="24" />
                    <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center"
                                FontSize="8"
                                Foreground="{StaticResource PrimaryHueMidForegroundBrush}"/>
                </Grid>
            </DataTemplate>
        </materialDesign:RatingBar.ValueItemTemplate>
    </materialDesign:RatingBar>
</Grid>

　以下の画像は、このコードを実行し5つ目のRatingBarのボタン（☆マーク）を押して値を変更した後の画像です。

　RatingBarではデフォルトで★マークが使用されます。
　Maxプロパティは評価値の最大値、Valueプロパティが現在の評価値を表しています。
　ボタンの並びはOrientationプロパティで指定できます。
　★ボタンを押すとValueプロパティの値が対応する値に変更されます。
　注意点はBinding時にMode=TwoWayを指定しないと★ボタンを押してもViewModel側の値が変更されないことです。
　５つ目のRatingBarは、プログラム起動後に10個目の★ボタンを押した状態です。
　RatingBarの見た目は変更されていますがValueは5のままになっています。

　RatingBarには表示専用にするプロパティはありません。
　評価値は表示したいがユーザーに変更されたくない場合はIsHitTestVisibleをFalseにすることで読み取り専用にできます。

　XAMLでValueを指定する場合はValue="3.5"等とするとエラーとなりますが、バインディングする場合はdouble型でもエラーになりません。
　double型を指定した場合は小数点第１位で四捨五入された値が表示されるようです。

　最後に、ボタンのマークを変更することもできます。
　RatingBar.ValueItemTemplateでDataTemplateを指定します。
　後は表示させたいマークを設定するだけです。（PackIconを使用すると便利です）
　サンプルの様にボタンに対応する評価値を表示することもできます。

【Material Design Toolkit】 色について

　今回はコントロールではなくMaterial Design Toolkitで使用されている色についての説明です。
　Material Design ToolkitではPrimary Light、Primary Mid、Primary Dark、Accentの４色が用意されています。
　これらの色は名前が付けられていてユーザーにも使用できるようになっています。

<StackPanel>
    <Grid Background="{DynamicResource PrimaryHueLightBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource PrimaryHueLightForegroundBrush}" Padding="10">
        Primary - Light<LineBreak/>
        Background:PrimaryHueLightBrush<LineBreak/>
        Foreground:PrimaryHueLightForegroundBrush
        </TextBlock>
    </Grid>

    <Grid Background="{DynamicResource PrimaryHueMidBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource PrimaryHueMidForegroundBrush}" Padding="10">
        Primary - Mid<LineBreak/>
        Background:PrimaryHueMidBrush<LineBreak/>
        Foreground:PrimaryHueMidForegroundBrush
        </TextBlock>
    </Grid>

    <Grid Background="{DynamicResource PrimaryHueDarkBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}" Padding="10">
        Primary - Dark<LineBreak/>
        Background:PrimaryHueDarkBrush<LineBreak/>
        Foreground:PrimaryHueDarkForegroundBrush
        </TextBlock>
    </Grid>

    <Grid Background="{DynamicResource SecondaryAccentBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource SecondaryAccentForegroundBrush}" Padding="10">
        Accent<LineBreak/>
        Background:SecondaryAccentBrush<LineBreak/>
        Foreground:SecondaryAccentForegroundBrush
        </TextBlock>
    </Grid>
</StackPanel>

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

　それぞれBackground用のBrushとForeground用のBrushが定義されています。
　このコードはMaterial Designのサンプルコードを参考にして作成したのでDynamicResourceで指定していますが、PrimaryやAccentカラーを動的に別の色にしないのであればStaticResourceでも問題ありません。
　残念ながらこれらの名前はXAMLエディターのインテリセンスで表示されないので、がんばって覚えるしかありません。 　 　

【Material Design Toolkit】 PackIcon

　Material Design Toolkitには様々なアイコンが用意されています。
　どんなアイコンがあるのかはMaterial Design Toolkitのデモプログラムで閲覧できます。

<StackPanel Orientation="Horizontal">
    <materialDesign:PackIcon Kind="AccessPoint" Width="50" Height="50" Margin="10"/>
    <materialDesign:PackIcon Kind="Account" Width="50" Height="50" Margin="10"/>
    <materialDesign:PackIcon Kind="Adjust" Width="50" Height="50" Margin="10"/>
    <materialDesign:PackIcon Kind="Eject" Width="50" Height="50" Margin="10"/>
    <materialDesign:PackIcon Kind="Table" Width="50" Height="50" Margin="10"/>
    <materialDesign:PackIcon Kind="Radio" Width="50" Height="50" Margin="10"/>
    <materialDesign:PackIcon Kind="Video" Width="50" Height="50" Margin="10" Foreground="Blue"/>
</StackPanel>

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

　使い方は非常に簡単で、materialDesign:PackIconのKindプロパティで表示したいアイコンの種類を指定するだけです。
　アイコンの大きさはWidthとHeightで調整できます。また、アイコンの色はForegroundで変更できます。
　インテリセンスが効くのでKindの値を指定するのは簡単ですが、種類が非常に多いのでMaterial Designのデモプログラムを使って使いたいアイコンを探すことをお奨めします。