5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-02

#はじめに

こんにちは、アドベントカレンダー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);

image.png
両方同じ描画結果です。
今回は要素ごとに設定することにします。その方が見やすい気がするので。
#基本的な設定の紹介
##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;

image.png

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

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

image.png

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

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

image.png

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

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

image.png

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

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

↓Column
image.png

↓Row
image.png

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

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

image.png

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

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

image.png

###BackgroundColor
背景色を設定

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

image.png

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

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

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

image.png

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

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

とすると
image.png

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

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

 textField.isPasswordField = true;

image.png

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

5
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?