FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 ColorZone

 ColorZoneを使用することで設定色に合わせた色付き領域を設定することができます。
<StackPanel>
    <materialDesign:ColorZone Mode="Accent" Padding="10" Margin="5">
        <TextBlock Text="Accent"/>
    </materialDesign:ColorZone>

    <materialDesign:ColorZone Mode="Dark" Padding="10" Margin="5">
        <TextBlock Text="Dark"/>
    </materialDesign:ColorZone>

    <materialDesign:ColorZone Mode="Inverted" Padding="10" Margin="5">
        <TextBlock Text="Inverted"/>
    </materialDesign:ColorZone>

    <materialDesign:ColorZone Mode="Light" Padding="10" Margin="5">
        <TextBlock Text="Light"/>
    </materialDesign:ColorZone>

    <materialDesign:ColorZone Mode="PrimaryDark" Padding="10" Margin="5">
        <TextBlock Text="PrimaryDark"/>
    </materialDesign:ColorZone>

    <materialDesign:ColorZone Mode="PrimaryLight" Padding="10" Margin="5">
        <TextBlock Text="PrimaryLight"/>
    </materialDesign:ColorZone>

    <materialDesign:ColorZone Mode="PrimaryMid" Padding="10" Margin="5">
        <TextBlock Text="PrimaryMid"/>
    </materialDesign:ColorZone>

    <materialDesign:ColorZone Mode="Standard" Padding="10" Margin="5">
        <TextBlock Text="Standard"/>
    </materialDesign:ColorZone>
</StackPanel>
 このコードを実行すると以下の様になります。
 左側はLightテーマで実行した場合、右側はDarkテーマで実行した場合の画面です。
MaterialDesign ColorZone
 使い方は非常に簡単でColorZoneのModeを選択するだけです。
 選択したModeに合わせてColorZone以下のBackgroundとForegroundが自動で設定されます。
 サンプルコードでは使用していませんがCornerRadiusプロパティを使用することで角に丸みをつけることもできます。
スポンサーサイト

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

コメントの投稿

非公開コメント

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