FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 ToggleButtonのスタイル

 Material Design Toolkitが用意しているToggleButtonのスタイルは大きく分けて4種類あります。
    <StackPanel>
        <GroupBox Header="MaterialDesignActionToggleButton">
            <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="MaterialDesignActionToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Content="M" Style="{StaticResource MaterialDesignActionToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Content="M" Style="{StaticResource MaterialDesignActionToggleButton}" IsChecked="True"/>

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

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

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

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

        <GroupBox Header="MaterialDesignFlatToggleButton">
            <Grid>
                <Grid.RowDefinitions>
                    <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="MaterialDesignFlatToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Content="C" Style="{StaticResource MaterialDesignFlatToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Content="C" Style="{StaticResource MaterialDesignFlatToggleButton}" IsChecked="True"/>

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

        <GroupBox Header="MaterialDesignSwitchToggleButton">
            <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="MaterialDesignSwitchToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Style="{StaticResource MaterialDesignSwitchToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Style="{StaticResource MaterialDesignSwitchToggleButton}" IsChecked="True"/>

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

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

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

        <GroupBox Header="MaterialDesignHamburgerToggleButton">
            <Grid>
                <Grid.RowDefinitions>
                    <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="MaterialDesignHamburgerToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Content="C" Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Content="C" Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="True"/>
            </Grid>
        </GroupBox>
    </StackPanel>
MaterialDesignToggleButton.png
 MaterialDesignActionToggleButtonはLight、Mid(標準)、Dark、Accentの4つのバリエーションがあります。
 このスタイルはIsCheckedがtrueになると〇型のボタンが回転してチェックマークが表示されます。
 ToggleButtonAssist.OnContentを指定することでIsCheckedがtrueの場合のコンテンツを自由に指定することができます。

 MaterialDesignFlatToggleButtonは丸型のフラットToggleButtonでIsCheckedの違いは背景色の色で表現されます。

 MaterialDesignSwitchToggleButtonは名前の通り、スイッチ型のToggleButtonでLight、Mid(通常)、Dark、Accentの4つのバリエーションがあります。
 IsCheckedがtrueになった時のスイッチの色がそれぞれ違います。
 ToggleButtonにスタイルを指定しなかった場合はMaterialDesignSwitchToggleButtonになります。

 最後にMaterialDesignHamburgerToggleButtonですが、こればハンバーガーメニューで使用するためのToggleButtonでIsCheckedをtrueにすると矢印マークに変化します。
スポンサーサイト

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

コメントの投稿

非公開コメント

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