スポンサーサイト

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

【Material Design Toolkit】 Chip

 Chipはアイコンとコンテンツからなる小さなコントロールで、詳細情報へのエントリーポイントとして使用します。
<StackPanel>
    <materialDesign:Chip Content="Chip1" Margin="5" Click="Chip_Click"/>
    <materialDesign:Chip Icon="A" Content="Chip2" Margin="5"/>
    <materialDesign:Chip Content="Chip3" Margin="5"
                            IconBackground="{StaticResource SecondaryAccentBrush}"
                            IconForeground="{StaticResource SecondaryAccentForegroundBrush}">
        <materialDesign:Chip.Icon>
            <materialDesign:PackIcon Kind="Gift"/>
        </materialDesign:Chip.Icon>
    </materialDesign:Chip>
    <materialDesign:Chip Icon="C" Content="Chip4" IsDeletable="True" Margin="5"
                            DeleteClick="Chip_DeleteClick"/>
</StackPanel>
 このコードを実行すると以下の様になります。
MaterialDesign Chip
 ChipはIconプロパティとContentプロパティを持っていて、Iconプロパティを指定した場合は丸の中に指定したアイコンが表示されます。
 Iconプロパティを指定しない場合はアイコンは表示されません。
 Iconプロパティには文字だけでなく画像やPackIcon等も表示できます。
 Iconの色を指定したい場合はIconBackgroundプロパティとIconForegroundプロパティを変更します。

 Chipをクリックした場合はClickイベントが発生します。
 詳細情報の表示などのアクションを行いたい場合はClickイベントを使用してください。

 IsDeletableプロパティをTrueにするとChipの右端に×ボタンが表示されます。
 ×ボタンを押した場合はDeleteClickイベントが発生します。
スポンサーサイト

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

コメントの投稿

非公開コメント

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

全ての記事を表示する

カテゴリ
タグリスト

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