fc2ブログ

【Material Design Toolkit】 Card

　CardはWPFにはないコントロールで、関連する情報をまとめて表示するために使用されます。（名刺みたいな感じです）
　表示する際は背景の紙の上にカードを置くイメージになります。（影がついて浮き上がって見えます）
　カードは詳細情報へのエントリーポイントと使用されることが多く、複雑なアクションを仕込むことはNGだそうです。
<StackPanel>
    <materialDesign:Card Padding="10" Margin="5">
        <TextBlock Text="Card"/>
    </materialDesign:Card>

    <materialDesign:Card Padding="10" Margin="5" Background="Lavender" UniformCornerRadius="10">
        <TextBlock Text="Card"/>
    </materialDesign:Card>

    <materialDesign:Card Padding="10" Margin="5" materialDesign:ShadowAssist.ShadowDepth="Depth5">
        <TextBlock Text="Card"/>
    </materialDesign:Card>
</StackPanel>
　このコードを実行すると以下の様になります。
MaterialDesign Card
　UniformCornerRadiusを指定することで角を丸くすることができます。
　影の付け方はShadowAssistを使用することで調整できます。
スポンサーサイト



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

このページのトップへ

【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プロパティを使用することで角に丸みをつけることもできます。

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

このページのトップへ

【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を指定すると影が少し薄くなります。
　

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

このページのトップへ

【Material Design Toolkit】 CheckBoxのスタイル

　Material Design ToolkitにはMaterialDesignActionCheckBox、MaterialDesignCheckBox、MaterialDesignUserForegroundCheckBox３種類のCheckBoxが用意されています。
　このうちMaterialDesignActionCheckBoxとMaterialDesignCheckBoxには４色（Light、Mid(標準)、Dark、Accent）のバリエーションが用意されています。
<StackPanel>
    <GroupBox Header="MaterialDesignActionCheckBox">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignActionCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="0" Grid.Column="1" Content="M" Style="{StaticResource MaterialDesignActionCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="0" Grid.Column="2" Content="M" Style="{StaticResource MaterialDesignActionCheckBox}" IsChecked="True"/>

            <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignActionLightCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="1" Grid.Column="1" Content="L" Style="{StaticResource MaterialDesignActionLightCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="1" Grid.Column="2" Content="L" Style="{StaticResource MaterialDesignActionLightCheckBox}" IsChecked="True"/>

            <TextBlock Grid.Row="2" Grid.Column="0" Text="MaterialDesignActionDarkCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="2" Grid.Column="1" Content="D" Style="{StaticResource MaterialDesignActionDarkCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="2" Grid.Column="2" Content="D" Style="{StaticResource MaterialDesignActionDarkCheckBox}" IsChecked="True"/>

            <TextBlock Grid.Row="3" Grid.Column="0" Text="MaterialDesignActionAccentCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="3" Grid.Column="1" Content="A" Style="{StaticResource MaterialDesignActionAccentCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="3" Grid.Column="2" Content="A" Style="{StaticResource MaterialDesignActionAccentCheckBox}" IsChecked="True"/>

            <TextBlock Grid.Row="4" Grid.Column="0" Text="ToggleButtonAssist.OnContent:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="4" Grid.Column="1" Content="F" Style="{StaticResource MaterialDesignActionCheckBox}" IsChecked="False"
                        materialDesign:ToggleButtonAssist.OnContent="T"/>
            <CheckBox Grid.Row="4" Grid.Column="2" Content="F" Style="{StaticResource MaterialDesignActionCheckBox}" IsChecked="True"
                        materialDesign:ToggleButtonAssist.OnContent="T"/>
        </Grid>
    </GroupBox>

    <GroupBox Header="MaterialDesignCheckBox">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="0" Grid.Column="1" Content="False" Style="{StaticResource MaterialDesignCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="0" Grid.Column="2" Content="True" Style="{StaticResource MaterialDesignCheckBox}" IsChecked="True"/>

            <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignLightCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="1" Grid.Column="1" Content="False" Style="{StaticResource MaterialDesignLightCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="1" Grid.Column="2" Content="True" Style="{StaticResource MaterialDesignLightCheckBox}" IsChecked="True"/>

            <TextBlock Grid.Row="2" Grid.Column="0" Text="MaterialDesignDarkCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="2" Grid.Column="1" Content="False" Style="{StaticResource MaterialDesignDarkCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="2" Grid.Column="2" Content="True" Style="{StaticResource MaterialDesignDarkCheckBox}" IsChecked="True"/>

            <TextBlock Grid.Row="3" Grid.Column="0" Text="MaterialDesignAccentCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="3" Grid.Column="1" Content="False" Style="{StaticResource MaterialDesignAccentCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="3" Grid.Column="2" Content="True" Style="{StaticResource MaterialDesignAccentCheckBox}" IsChecked="True"/>
        </Grid>
    </GroupBox>

    <GroupBox Header="MaterialDesignUserForegroundCheckBox">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignUserForegroundCheckBox:" VerticalAlignment="Center"/>
            <CheckBox Grid.Row="0" Grid.Column="1" Content="False" Style="{StaticResource MaterialDesignUserForegroundCheckBox}" IsChecked="False"/>
            <CheckBox Grid.Row="0" Grid.Column="2" Content="True" Style="{StaticResource MaterialDesignUserForegroundCheckBox}" IsChecked="True"/>

        </Grid>
    </GroupBox>
</StackPanel>
　これをLightテーマで実行すると以下の様になります。
MaterialDesignCheckBox-LightThemes.png
　Darkテーマで実行すると以下の様になります。
MaterialDesignCheckBox-DarkThemes.png
　スタイルを省略した場合はMaterialDesignCheckBoxが使用されます。
　MaterialDesignActionCheckBoxはMaterialDesignActionToggleButtonと全く同じです。(スタイルを継承して名前を変えているだけです）
　MaterialDesignCheckBoxではLight、Dark、Accentの文字色がテーマによって変更されません。
　場合によっては上図のように文字が見づらいor見えなくなることがあります。
　MaterialDesignUserForegroundCheckBoxは名前の通りForegroundの色を使ったチェックボックスになります。

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

このページのトップへ
ホーム
このページのトップへ
カレンダー
02 | 2017/03 | 04
日 月 火 水 木 金 土
- - - 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 -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
04  10  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