cAlgo API リファレンス

Style【cAlgoAPI】

2021年3月25日

もっと細かい見た目設定

基本的なコントロール類の見た目はそれぞれのプロパティで設定できるのはこれまで説明した通りです。

例えば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毎に1つずつ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);

面倒ではありますが、こだわりたいときは細かく設定できるのはいいですね。

 

 

-cAlgo API リファレンス

© 2021 cTrader's Life Powered by AFFINGER5