FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 CheckBoxのスタイル

 Material Design ToolkitにはMaterialDesignActionCheckBox、MaterialDesignCheckBox、MaterialDesignUserForegroundCheckBox3種類のCheckBoxが用意されています。
 このうちMaterialDesignActionCheckBoxとMaterialDesignCheckBoxには4色(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の色を使ったチェックボックスになります。
スポンサーサイト

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

コメントの投稿

非公開コメント

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