FC2ブログ

【Material Design Toolkit】 Button2

 Material Design Toolkitが更新されボタンにバッチを表示する機能とプログレス表示機能が追加されました。
<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>
 このコードを実行すると以下の様になります。
MaterialDesign追加ボタン
 Badgedコンテンツ内にボタンを配置することでボタンの右上にバッチを表示することができます。
 バッチに表示する内容はBadgedのBadgeプロパティで指定できます。

 ボタンにプログレス機能を追加する場合はButtonProgressAssistを利用します。
 通常のボタン(四角ボタン)の場合はボタンの背景色を変化させて状況通知を行います。
 進捗状況はButtonProgressAssistのMinimum、Maximum、Valueで指定できます。
 四角ボタンの場合はIndeterminate機能は使用できません。

 丸ボタンの場合はButtonProgressAssist.IsIndicatorVisibleをTrueにしないとプログレスリングが表示されません。
 四角ボタンの時と同様にuttonProgressAssistのMinimum、Maximum、Valueを指定して状況通知を行えます。
 丸ボタンの場合はButtonProgressAssist.IndicatorBackgroundとButtonProgressAssist.IndicatorForegroundを指定することでプログレスリングの色を自由に指定できます。
 また、IsIndeterminateをTrueにすることでリングがぐるぐる回るアニメーションが表示されます。
 丸ボタンのプログレス機能は小さい丸ボタンでも使用可能です。 
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

カレンダー
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
11  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon