XAMLとか知らねぇよ！！C#だけでUIElement式エディタ拡張をする入門～style編～

#はじめに

• 基礎編
• style編(ココ)

こんにちは、アドベントカレンダー3日目担当の避雷です。今回は先日に引き続きUIElementの調査を進めていきます。
今回はUIに必須なstyleの設定です。前回までの知識だとUIは縦に一つずつ並べるしかなかったのですが、それだと実際のUIを作るには表現力不足です。例えばYes/Noボタンなんかは横並びにしたいときと縦並びにしたいときがあったりしますよね。今回はそういったものに対してstyleを変更して対応していきます。
#VisualElement.styleを編集する
VisualElement.styleはmargin、padding、borderline、alignment等のUIのビジュアル的な部分を設定する項目です。VisualElementのstyleを設定する方法はいくつかあります。

//初期化と同時に設定
        VisualElement label = new Label("Hello World! From C#")
            {style = {fontSize = 64,
color = new StyleColor(Color.magenta)}};
//要素ごとに設定
        VisualElement label2 = new Label("Hello World! From C#");
        label2.style.fontSize = 64;
        label2.style.color = new StyleColor(Color.magenta);

両方同じ描画結果です。
今回は要素ごとに設定することにします。その方が見やすい気がするので。
#基本的な設定の紹介
##border系
###borderColor
ボーダーラインの色を設定します

        VisualElement frame = new VisualElement();
        frame.style.borderColor = new StyleColor(Color.red);

###borderWidth
ボーダーラインの太さを設定します

        VisualElement frame = new VisualElement();
        frame.style.borderColor = new StyleColor(Color.red);
        frame.style.borderBottomWidth = 5;
        frame.style.borderTopWidth = 5;
        frame.style.borderRightWidth = 5;
        frame.style.borderLeftWidth = 5;

###borderRadius
ボーダーラインの角の丸さを設定します

        frame.style.borderBottomLeftRadius = 15;
        frame.style.borderBottomRightRadius = 15;
        frame.style.borderTopLeftRadius = 15;
        frame.style.borderTopRightRadius = 15;

##padding margin系
###padding
パディングを設定します（ボーダーラインの内側）

        frame.style.paddingTop = 10;
        frame.style.paddingBottom = 10;

###margin
マージンを設定します（ボーダーラインの外側）

        frame.style.paddingTop = 10;
        frame.style.paddingBottom = 10;
        frame.style.marginRight = 10;
        frame.style.marginLeft = 10;

##整列方向系
###Flex
子要素の整列方向を設定します

        frame.style.flexDirection = new StyleEnum<FlexDirection>(FlexDirection.Column);
        frame.style.flexDirection = new StyleEnum<FlexDirection>(FlexDirection.Row);

↓Column

↓Row

##文字系
###FontSize
フォントサイズを設定します

        Label label3 = new Label("ABCDEFG");
        label3.style.fontSize = 32;
        root.Add(label3);

###Color
文字色を設定します

        label3.style.color = new StyleColor(Color.green);

###BackgroundColor
背景色を設定

        label3.style.backgroundColor = new StyleColor(Color.magenta);

先ほどのVisualElementに同様の設定をすると

こんな感じです。
###UnityTextAlign
テキストの基準位置を設定

        label3.style.unityTextAlign = new StyleEnum<TextAnchor>(TextAnchor.LowerRight);

因みにTextFieldの入力を左上からにするには
unityTextAlign無し

        foreach (var child in textField.Children())
        {
//子オブジェクトに左上整列を指示
            child.style.unityTextAlign = new StyleEnum<TextAnchor>(TextAnchor.UpperLeft);
        }

とすると

みたいになる。multilineなら設定必須…？なお現状だと日本語入力が出来ないみたいです(IMEが反応しない)

###textField.isPasswordField
trueにするとパスワード用のインプットフィールドになります

 textField.isPasswordField = true;

#おわりに
なんか諦めてUSSとかUMLとか使った方が楽な気がしてきました…C#でもデザインまで出来るということは証明できたのでヨシとしましょう。