FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 色について

 今回はコントロールではなくMaterial Design Toolkitで使用されている色についての説明です。
 Material Design ToolkitではPrimary Light、Primary Mid、Primary Dark、Accentの4色が用意されています。
 これらの色は名前が付けられていてユーザーにも使用できるようになっています。
<StackPanel>
    <Grid Background="{DynamicResource PrimaryHueLightBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource PrimaryHueLightForegroundBrush}" Padding="10">
        Primary - Light<LineBreak/>
        Background:PrimaryHueLightBrush<LineBreak/>
        Foreground:PrimaryHueLightForegroundBrush
        </TextBlock>
    </Grid>

    <Grid Background="{DynamicResource PrimaryHueMidBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource PrimaryHueMidForegroundBrush}" Padding="10">
        Primary - Mid<LineBreak/>
        Background:PrimaryHueMidBrush<LineBreak/>
        Foreground:PrimaryHueMidForegroundBrush
        </TextBlock>
    </Grid>

    <Grid Background="{DynamicResource PrimaryHueDarkBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}" Padding="10">
        Primary - Dark<LineBreak/>
        Background:PrimaryHueDarkBrush<LineBreak/>
        Foreground:PrimaryHueDarkForegroundBrush
        </TextBlock>
    </Grid>

    <Grid Background="{DynamicResource SecondaryAccentBrush}" Margin="2">
        <TextBlock Foreground="{DynamicResource SecondaryAccentForegroundBrush}" Padding="10">
        Accent<LineBreak/>
        Background:SecondaryAccentBrush<LineBreak/>
        Foreground:SecondaryAccentForegroundBrush
        </TextBlock>
    </Grid>
</StackPanel>
 これを実行すると以下の様になります。
MaterialDesignPalette.png
 それぞれBackground用のBrushとForeground用のBrushが定義されています。
 このコードはMaterial Designのサンプルコードを参考にして作成したのでDynamicResourceで指定していますが、PrimaryやAccentカラーを動的に別の色にしないのであればStaticResourceでも問題ありません。
 残念ながらこれらの名前はXAMLエディターのインテリセンスで表示されないので、がんばって覚えるしかありません。    
スポンサーサイト

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

コメントの投稿

非公開コメント

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