FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 ListBox

 Material Design Toolkitには4種類のListBoxスタイルがあります。
<UniformGrid Rows="2">
    <GroupBox Header="MaterialDesignListBox" Margin="5">
        <ListBox Style="{StaticResource MaterialDesignListBox}">
            <ListBoxItem>Item1</ListBoxItem>
            <ListBoxItem>Item2</ListBoxItem>
            <ListBoxItem>Item3</ListBoxItem>
        </ListBox>
    </GroupBox>

    <GroupBox Header="MaterialDesignCardsListBox" Margin="5">
        <ListBox Style="{StaticResource MaterialDesignCardsListBox}">
            <ListBoxItem>Item1</ListBoxItem>
            <ListBoxItem>Item2</ListBoxItem>
            <ListBoxItem>Item3</ListBoxItem>
        </ListBox>
    </GroupBox>

    <GroupBox Header="MaterialDesignToolToggleListBox" Margin="5">
        <ListBox Style="{StaticResource MaterialDesignToolToggleListBox}">
            <ListBoxItem>Item1</ListBoxItem>
            <ListBoxItem>Item2</ListBoxItem>
            <ListBoxItem>Item3</ListBoxItem>
        </ListBox>
    </GroupBox>

    <GroupBox Header="MaterialDesignToolToggleFlatListBox" Margin="5">
        <ListBox Style="{StaticResource MaterialDesignToolToggleFlatListBox}">
            <ListBoxItem>Item1</ListBoxItem>
            <ListBoxItem>Item2</ListBoxItem>
            <ListBoxItem>Item3</ListBoxItem>
        </ListBox>
    </GroupBox>
</UniformGrid>
MaterialDesignListBox.png
 MaterialDesignListBoxがデフォルトスタイルです。Styleを指定しない場合はこのスタイルが適応されます。
 Material Design ToolkitのListBoxはWPFのリストボックスと違って枠線がなく、フラットなイメージになります。
 (BorderBrushとBorderThicknessを変更すれば枠線を付けることは可能です)
 項目をクリックするとアニメーションが実行され、選択した項目の背景色が変わります。

 MaterialDesignCardsListBoxはListBoxItemがカードになっています。(ListBox自体はMaterialDesignListBoxと同じです)
 他のListBoxと違って項目をクリックしてもアニメーションは実行されませんし、選択もできません。
 表示専用ListBoxになります。

 MaterialDesignToolToggleListBoxとMaterialDesignToolToggleFlatListBoxは項目が横並びに表示されます。
 少数の項目から1つを選択する時等に使用します。(Excelの左揃え、中央揃え、右揃えの選択ボタンみたいなものです)
スポンサーサイト

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

コメントの投稿

非公開コメント

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