FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 コントロールに影をつける

 Material Design Toolkitにはコントロールに影を付けるためのShadowAssist機能があります。
<StackPanel>
    <GroupBox Header="ShadowDepth" Margin="5">
        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
            <Button Content="Depth0" materialDesign:ShadowAssist.ShadowDepth="Depth0" Margin="15"/>
            <Button Content="Depth1" materialDesign:ShadowAssist.ShadowDepth="Depth1" Margin="15"/>
            <Button Content="Depth2" materialDesign:ShadowAssist.ShadowDepth="Depth2" Margin="15"/>
            <Button Content="Depth3" materialDesign:ShadowAssist.ShadowDepth="Depth3" Margin="15"/>
            <Button Content="Depth4" materialDesign:ShadowAssist.ShadowDepth="Depth4" Margin="15"/>
            <Button Content="Depth5" materialDesign:ShadowAssist.ShadowDepth="Depth5" Margin="15"/>
        </StackPanel>
    </GroupBox>

    <GroupBox Header="Darken" Margin="5">
        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
            <Button Content="Depth5-Darken=False" Margin="15"
                    materialDesign:ShadowAssist.ShadowDepth="Depth5" 
                    materialDesign:ShadowAssist.Darken="False"/>

            <Button Content="Depth5-Darke=True" Margin="10"
                    materialDesign:ShadowAssist.ShadowDepth="Depth5" 
                    materialDesign:ShadowAssist.Darken="True"/>
        </StackPanel>
    </GroupBox>
</StackPanel>
MaterialDesignShadow.png
 使い方は影の付け方を指定したいコントロールでShadowAssist.ShadowDepthを指定するだけです。
 Depth0を指定した場合は影を付けません。
 Depth1からDepth5を指定した場合は影を付けます。
 数字が大きくなるほど影が濃くなります。

 ShadowAssist.Darkenにfalseを指定すると影が少し薄くなります。
 
スポンサーサイト

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

コメントの投稿

非公開コメント

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