【Material Design Toolkit】 Button2
Material Design Toolkitが更新されボタンにバッチを表示する機能とプログレス表示機能が追加されました。
Badgedコンテンツ内にボタンを配置することでボタンの右上にバッチを表示することができます。
バッチに表示する内容はBadgedのBadgeプロパティで指定できます。
ボタンにプログレス機能を追加する場合はButtonProgressAssistを利用します。
通常のボタン(四角ボタン)の場合はボタンの背景色を変化させて状況通知を行います。
進捗状況はButtonProgressAssistのMinimum、Maximum、Valueで指定できます。
四角ボタンの場合はIndeterminate機能は使用できません。
丸ボタンの場合はButtonProgressAssist.IsIndicatorVisibleをTrueにしないとプログレスリングが表示されません。
四角ボタンの時と同様にuttonProgressAssistのMinimum、Maximum、Valueを指定して状況通知を行えます。
丸ボタンの場合はButtonProgressAssist.IndicatorBackgroundとButtonProgressAssist.IndicatorForegroundを指定することでプログレスリングの色を自由に指定できます。
また、IsIndeterminateをTrueにすることでリングがぐるぐる回るアニメーションが表示されます。
丸ボタンのプログレス機能は小さい丸ボタンでも使用可能です。
<StackPanel> <materialDesign:Badged Badge="Badge" Margin="10"> <Button Content="Button"/> </materialDesign:Badged> <Button Content="Progress Button" Margin="10" materialDesign:ButtonProgressAssist.Minimum="0" materialDesign:ButtonProgressAssist.Maximum="100" materialDesign:ButtonProgressAssist.Value="60"/> <StackPanel Orientation="Horizontal"> <Button Style="{StaticResource MaterialDesignFloatingActionButton}" Content="A" Margin="10" materialDesign:ButtonProgressAssist.IsIndicatorVisible="True" materialDesign:ButtonProgressAssist.Minimum="0" materialDesign:ButtonProgressAssist.Maximum="100" materialDesign:ButtonProgressAssist.Value="60"/> <Button Style="{StaticResource MaterialDesignFloatingActionButton}" Content="B" Margin="10" materialDesign:ButtonProgressAssist.IsIndicatorVisible="True" materialDesign:ButtonProgressAssist.IsIndeterminate="True" materialDesign:ButtonProgressAssist.Value="30"/> <Button Style="{StaticResource MaterialDesignFloatingActionButton}" Content="C" Margin="10" materialDesign:ButtonProgressAssist.IsIndicatorVisible="True" materialDesign:ButtonProgressAssist.IsIndeterminate="True" materialDesign:ButtonProgressAssist.Value="30" materialDesign:ButtonProgressAssist.IndicatorBackground="Red" materialDesign:ButtonProgressAssist.IndicatorForeground="Yellow"/> <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" Content="C" Margin="10" materialDesign:ButtonProgressAssist.IsIndicatorVisible="True" materialDesign:ButtonProgressAssist.IsIndeterminate="True" materialDesign:ButtonProgressAssist.Value="30"/> </StackPanel> </StackPanel>このコードを実行すると以下の様になります。

スポンサーサイト
- 関連するタグ:
- WPF
- MaterialDesignToolkit