FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 GroupBox

 Material Design ToolkitのGroupBoxスタイルは2種類あります。
 Material Design ToolkitのGroupBoxはWPF標準のGroupBoxに比べるとヘッダー部分が強調された見た目になっています。
<StackPanel>
    <GroupBox Header="デフォルト" Style="{StaticResource MaterialDesignGroupBox}" Margin="5">
        <TextBlock Text="MaterialDesignGroupBox"/>
    </GroupBox>

    <GroupBox Header="ColorZoneAssist.Mode Accent" Style="{StaticResource MaterialDesignGroupBox}" Margin="5"
                materialDesign:ColorZoneAssist.Mode="Accent">
        <TextBlock Text="MaterialDesignGroupBox"/>
    </GroupBox>

    <GroupBox Header="ColorZoneAssist.Mode Dark" Style="{StaticResource MaterialDesignGroupBox}" Margin="5"
                materialDesign:ColorZoneAssist.Mode="Dark">
        <TextBlock Text="MaterialDesignGroupBox"/>
    </GroupBox>

    <GroupBox Header="ShadowDepth5" Style="{StaticResource MaterialDesignGroupBox}" Margin="5"
                materialDesign:ShadowAssist.ShadowDepth="Depth5">
        <TextBlock Text="MaterialDesignGroupBox"/>
    </GroupBox>

    <GroupBox Header="BorderThickness 0" Style="{StaticResource MaterialDesignGroupBox}" Margin="5"
                BorderThickness="0">
        <TextBlock Text="MaterialDesignGroupBox"/>
    </GroupBox>

    <GroupBox Header="カード" Style="{StaticResource MaterialDesignCardGroupBox}" Margin="5">
        <TextBlock Text="MaterialDesignCardGroupBox"/>
    </GroupBox>
</StackPanel>
MaterialDesignGroupBox.png
 MaterialDesignGroupBoxがMaterial Design Toolkitのデフォルトスタイルになっています。
 スタイルを省略した場合はMaterialDesignGroupBoxが使用されます。
 見ての通りヘッダー部分が強調された見た目になります。

 ColorZoneAssistを使用することでヘッダーと枠線の色を変更できます。
 ColorZoneAssistを使用してもコンテンツの部分は変わりません。

 ShadowAssistを使用することでヘッダーに影を付けることができます。
 影が付くのはヘッダー部分だけで、GroupBox全体に影が付くわけではありません。

 BorderThicknessでGroupBoxの枠線の太さを変更できます。
 サンプルコードではBorderThicknessを0にして枠線を消しています。

 MaterialDesignCardGroupBoxはカードタイプのGroupBoxで、カードと同じく紙の上に配置したように浮き上がって見えます。
 Lightテーマだと解りにくいですがMaterialDesignCardGroupBoxのコンテンツの背景色はMaterialDesignGroupBoxの背景色と違う色が設定されています。
スポンサーサイト

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

コメントの投稿

非公開コメント

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