FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 Buttonのスタイル

 Material Design Toolkitではボタンのスタイルが複数用意されています。
 ボタンのスタイルは大きく分けるとRaisedButton、FlatButton、ToolButton、FloatingAction(Mini)Buttonの4種類が存在します。
 またToolButton以外はPrimaryカラーとAccentカラーの色違いが用意されています。

 RaisedButtonはおそらく最もよく使うボタンのスタイルです。
<GroupBox Header="MaterialDesignRaisedButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="RaisedDarkButton" Width="160" Style="{StaticResource MaterialDesignRaisedDarkButton}"/>
        <Button Content="RaisedButton" Width="160" Style="{StaticResource MaterialDesignRaisedButton}"/>
        <Button Content="RaisedLightButton" Width="160" Style="{StaticResource MaterialDesignRaisedLightButton}"/>
        <Button Content="RaisedAccentButton" Width="160" Style="{StaticResource MaterialDesignRaisedAccentButton}"/>
    </StackPanel>
</GroupBox>
MaterialDesignRaisedButton.png
 RaisedButtonボタンではPrimaryカラーの色違い3色(Dark, 標準、Light)とAccentカラーの4色が用意されています。
 Buttonにスタイルを定義しなかった場合はMaterialDesignRaisedButtonが使用されます。

 FlatButtonは枠線がないボタンで、ダイアログ等で利用されます。
<GroupBox Header="MaterialDesignFlatButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="FlatButton" Width="200" Style="{StaticResource MaterialDesignFlatButton}"/>
        <Button Content="FlatAccentButton" Width="200" Style="{StaticResource MaterialDesignFlatAccentButton}"/>
    </StackPanel>
</GroupBox>
MaterialDesignFlatButton.png
 FlatButtonではPrimaryカラーとAccentカラーの2色が用意されています。
 通常は枠線がなく文字だけが表示されていますが、マウスオーバーすると背景色が付きボタンであることがわかる様になっています。

 ToolButtonは名前の通りツールバー等で使用されるボタンです。
<GroupBox Header="MaterialDesignToolButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="MaterialDesignToolButton" Width="250" Style="{StaticResource MaterialDesignToolButton}"/>
        <Button Content="MaterialDesignToolForegroundButton" Width="250" Style="{StaticResource MaterialDesignToolForegroundButton}"/>
    </StackPanel>
</GroupBox>
MaterialDesignToolButton.png
 見た目がFlatButtonに似ていますが、こちらはマウスオーバーしても見た目が変わりません。また、クリックした際にアニメーションが大きく異なります。

 FloatingAction(Mini)Buttonボタンは丸い形のボタンで、通常サイズと小さいサイズの2種類が用意されています。
<GroupBox Header="MaterialDesignFloatingActionMiniButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="D" Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"/>
        <Button Content="M" Style="{StaticResource MaterialDesignFloatingActionMiniButton}"/>
        <Button Content="L" Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"/>
        <Button Content="A" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"/>
    </StackPanel>
</GroupBox>
<GroupBox Header="MaterialDesignFloatingActionButton" Margin="5">
    <StackPanel Orientation="Horizontal">
        <Button Content="D" Style="{StaticResource MaterialDesignFloatingActionDarkButton}"/>
        <Button Content="M" Style="{StaticResource MaterialDesignFloatingActionButton}"/>
        <Button Content="L" Style="{StaticResource MaterialDesignFloatingActionLightButton}"/>
        <Button Content="A" Style="{StaticResource MaterialDesignFloatingActionAccentButton}"/>
    </StackPanel>
</GroupBox>
MaterialDesignFloatingActionButtonpng.png
 FloatingAction(Mini)ButtonもRaisedButtonと同じく4色分のスタイルが用意されています。

   あまりいじることはないかもしれませんがクリックした際のアニメーションの色を変えたり、アニメーションをOffにしたりできます。
<Button Content="Feedback" Width="150" Style="{StaticResource MaterialDesignRaisedButton}"
        materialDesign:RippleAssist.Feedback="Black"/>
<Button Content="No Ripple" Width="150" Style="{StaticResource MaterialDesignRaisedButton}"
        materialDesign:RippleAssist.IsDisabled="True"/>
 アニメーション時の色を変えたい場合はmaterialDesign:RippleAssist.Feedbackで色を変更します。
 アニメーションをOffにしたい場合はmaterialDesign:RippleAssist.IsDisabledにTrueを指定してください。

 2017/11/4追記  Material Designが更新されボタン機能が強化されました。
 追加された機能についてはこちらを参照してください。
スポンサーサイト

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

コメントの投稿

非公開コメント

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