Style【cAlgoAPI】
4年以上前の記事です。内容が古くなっている可能性があります。
もっと細かい見た目設定
基本的なコントロール類の見た目はそれぞれのプロパティで設定できるのはこれまで説明した通りです。
例えばButton.BackgroundColorを設定すればボタンの背景色が設定できますし、CheckBox.ForegroundColorを設定すればチェックボックスの文字色を変えることができます。
でも場合によってはボタンが押されたときだけ背景色を変えたかったり、チェックされてるときとされてないときで文字色を変えたかったりすることもあるでしょう。
そんなときにはStyleの出番です。Styleクラスを使えばもっと細かくコントロールの見た目を設定することができます。
Styleクラス
コントロールの見た目情報をすべて持つオブジェクトです。
public class Style : Object
個別のプロパティで特に設定がない場合、コントロールの持つStyleプロパティによって見た目が決まります。Styleもその他プロパティも設定されてない場合はなにも表示されません。
下記でDefaultStyleが定義されてるコントロールは最初からStyleを持っているため、なにもプロパティ設定しなくても勝手に描画されます。
コンストラクタ
Style(Style parentStyle)
parentStyleを元に新たなスタイルオブジェクトを生成します。「もとのプロパティを一部だけ変更したい」というケースではDefaultStyleをparentStyleに指定しておきましょう。
ただし、DefaultStyleではかなり細かく設定が入ってるため、parentにしてしまうとControlStateごとに設定したい場合は余計面倒になることがありますのでその点だけご注意ください。
なお、引数なしのコンストラクタもあります。一から自分のスタイルを構築したい場合はこちらをどうぞ。この場合、自分で設定しない項目はnullになります。nullでもどうにか解釈してくれるらしくエラーにはなりません。
メソッド
(object ) Get(ControlProperty property)
指定したプロパティの値を取得します。すべてのstate。返り値object型なので適切な方にキャストして使います。
(object) Get(ControlPropery property, ControlState state)
指定した状態でのプロパティの値を取得します。同上。
(void) Set(ControlProperty property, object value)
コントロールの指定したプロパティにvalue値をセットします。第二引数はobject型ですが、プロパティに合わせて適切な型を渡します。
(void) Set(ControlProperty property, object value, controlState state)
コントロールの指定した状態のプロパティにvalue値をセットします。なおstateを指定してスタイルを設定する場合は後述する通り設定順に注意が必要です。
サンプルコード
var style = new Style();
style.Set(ControlProperty.BackgroundColor, Color.White, ControlState.DarkTheme);
style.Set(ControlProperty.BackgroundColor, Color.Gray, ControlState.Disabled);
style.Set(ControlProperty.BackgroundColor, Color.Black, ControlState.LightTheme);
style.Set(ControlProperty.BackgroundColor, Color.Pink, ControlState.Hover);
style.Set(ControlProperty.BackgroundColor, Color.Red, ControlState.Checked);
style.Set(ControlProperty.BackgroundColor, Color.Yellow, ControlState.Pressed);
style.Set(ControlProperty.Width, 50);
style.Set(ControlProperty.Height, 50);
var button = new ToggleButton { Style = style};
Chart.AddControl(button);LightモードとDarkモードを切り替えたり、ホバーしたり、クリックしたりでコロコロ色が変わるトグルボタンです。トグルボタンに色を設定するときはチェック状態をはっきりさせるためにもStyleを使う方がいいでしょう。
DefaultStylesクラス
それぞれのコントロールのデフォルトスタイルを保持する静的クラスです。
public static sealed class DefaultStyles : Object
基本的にStyleクラスのコンストラクタに渡す用のparentStyleを提供するためのものと考えていいでしょう。
プロパティ
(Style) ButtonStyle
ボタンのデフォルトスタイルです。
(Style) CheckBoxStyle
チェックボックスのデフォルトスタイルです。
(Style) RadioButtonStyle
ラジオボタンのデフォルトスタイルです。
(Style) ScrollViewerStyle
スクロールビュアーのデフォルトスタイルです。
(Style) TextBoxStyle
テキストボックスのデフォルトスタイルです。
(Style) TextBlockStyle
テキストブロックのデフォルトスタイルです。
(Style) ToggleButtonStyle
トグルボタンのデフォルトスタイルです。
関連する列挙型
ControlProperty
コントロールの各プロパティを表します。
| ForegroundColor | 色 |
| BackgroundColor | 背景色 |
| FontFamily | フォント名 |
| FontSize | フォントサイズ |
| FontStyle | フォントスタイル |
| FontWeight | フォント太さ |
| BorderColor | 枠線色 |
| BorderThickness | 枠線太さ |
| CornerRadius | コーナーの丸み |
| TextAlignment | テキスト位置 |
| HorizontalContentAlignment | コンテンツ水平位置 |
| VerticalContentAlignment | コンテンツ垂直位置 |
| Margin | 余白 |
| Padding | 内部余白 |
| Width | 幅 |
| Height | 高さ |
| MaxHeight | 最大高さ |
| MaxWidth | 最大幅 |
| MinHeight | 最小高さ |
| MinWidth | 最小幅 |
| Opacity | 不透明度 |
| CaretColor | キャレット色（テキストボックス専用） |
ControlState
コントロールの各状態を表します。
| Disabled | 無効状態 |
| Hover | ホバー(マウスカーソルが乗ってる）状態 |
| DarkTheme | ダークテーマ |
| LightTheme | ライトテーマ |
| Checked | チェック状態(チェックボックス、ラジオボタン用） |
| Pressed | 押された状態(ボタン、トグルボタン用) |
Styleを各State毎に１つずつSetするときはDarkTheme,LightTheme→Hover→Checked→Pressedの順で行います。最後にDarkTheme,LightThemeを設定してしまうと、チェックされてようがホバーされてようが常にDarkTheme,LightThemeで設定した色になってしまいます。
コントロールは複数の状態を持っています。例えばダークテーマでチェックボックスにはチェックされていて、しかもマウスが乗っていたら、そのコントロールはDarkTheme＋Checked+Hoverという状態です。このときにどの設定が適用されるかというと、一番後に設定されたものが優先となるようなんです。
なお、ControlStateはFlags属性を持っているため、複数の状態を指定して個別に設定することもできます。例えばダークテーマとライトテーマで背景色変えるなら、ホバー時だって別にしたいですよね。そんなときはこう。
style.Set(ControlProperty.BackgroundColor, colorForDarkHover, ControlState.Hover | ControlState.DarkTheme);
style.Set(ControlProperty.BackgroundColor, colorForLightHOver, ControlState.Hover | ControlState.LightTheme);面倒ではありますが、こだわりたいときは細かく設定できるのはいいですね。