FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【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にすることでリングがぐるぐる回るアニメーションが表示されます。
 丸ボタンのプログレス機能は小さい丸ボタンでも使用可能です。 
スポンサーサイト

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

コメントの投稿

非公開コメント

カレンダー
09 | 2018/10 | 11
- 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 31 - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
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
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。