C# 스크립트에서 스타일 적용

style에 작성하여 요소에 스타일 값을 설정할 수 있습니다. 그러나 요소의 실제로 렌더링된 스타일을 얻으려면 resolvedStyle에서 읽으십시오.

스타일 설정

C# 스크립트에서는 시각적 요소의 style 프로퍼티에 스타일을 직접 설정할 수 있습니다. 예를 들어 다음 코드는 버튼의 배경색을 빨간색으로 설정합니다.

button.style.backgroundColor = Color.red

시각적 요소에 USS(Unity 스타일 시트)를 추가할 수도 있습니다. Unity는 C# 스크립트에서 USS 파일을 StyleSheet 오브젝트로 나타냅니다.

시각적 요소에 스타일시트를 추가하려면 다음 단계를 따르십시오.

AssetDatabase.Load() 또는 Resources.Load()와 같은 표준 Unity API를 사용하여 StyleSheet 오브젝트를 로드합니다.
시각적 요소의 styleSheets 프로퍼티를 사용하여 StyleSheet 오브젝트를 추가합니다.

예를 들어, 로컬 변수 styleSheet에 스타일시트가 있고 로컬 변수 element에 요소가 있다고 가정하면 다음 예제에서는 스타일시트를 요소에 추가합니다.

element.styleSheets.Add(styleSheet);

참고: 스타일 규칙은 시각적 요소와 그 모든 자손에 적용되지만, 요소의 부모 또는 형제에는 적용되지 않습니다. USS 파일을 변경하면 이 스타일 시트를 사용하는 UI가 자동으로 새로 고쳐집니다.

확인된 스타일 가져오기

요소의 스타일 값은 적용된 여러 클래스, 조상으로부터의 상속, UXML 또는 C# 코드의 인라인 스타일 등 다양한 소스에서 계산됩니다. 이러한 값은 프레임마다 변경될 수 있습니다. style은 요소에 대한 인라인 스타일만 보유하며 다른 소스는 반영하지 않습니다. resolvedStyle은 현재 프레임의 모든 소스를 고려하여 최종 계산된 값을 갖습니다.

예를 들어 인라인 스타일을 사용하여 요소의 높이를 설정하는 경우, style과 resolvedStyle은 모두 동일한 값으로 시작합니다. 요소가 계층 구조에 추가되면 레이아웃이 업데이트될 때까지 resolvedStyle.height는 NaN이 될 수 있습니다. 클래스에서 너비를 백분율로 정의하면 계산된 너비는 border-height 및 padding과 같은 부모 프로퍼티에 의존합니다. style.height는 값을 변경할 수 있는 전환과 같이 상대적인 값을 제공할 수 있지만 resolvedStyle.height는 실제 렌더링된 높이를 제공합니다.

지오메트리가 변경될 때 확인된 스타일을 얻으려면 GeometryChangedEvent 이벤트를 사용할 수 있습니다. 이 이벤트는 VisualElement의 레이아웃이 변경될 때 트리거되며, 여기에는 크기와 위치의 변경이 포함됩니다. 이 이벤트에 대한 콜백을 등록할 수 있으며, 콜백에서 VisualElement의 resolvedStyle 프로퍼티에 액세스하여 최종 계산된 스타일을 가져올 수 있습니다.

다음 예시에서는 커스텀 에디터 창을 생성하고 요소의 확인된 높이를 기록합니다. 창의 크기를 조절하면 요소의 높이가 변경됩니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class ResolvedStyles : EditorWindow
{
    [MenuItem("Window/UI Toolkit/ResolvedStyles")]
    public static void ShowExample()
    {
        GetWindow<ResolvedStyles>();
    }
    
    private void OnEnable()
    {
        titleContent = new GUIContent("Resolved Styles");
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        
        // Element that is tracked.
        // When you resize the Editor window, the inner content is not necessarily updated
        // during the drag operation. The resolved height field is updated whenever the drag
        // operation is complete.
        var element = new VisualElement
        {
            style =
            {
                flexGrow = 1,
                backgroundColor = Color.red
            }
        };
        root.Add(element);

        // Register a callback for the GeometryChangedEvent
        element.RegisterCallback<GeometryChangedEvent>(OnGeometryChanged);
    }

    // Callback for the GeometryChangedEvent
    public void OnGeometryChanged(GeometryChangedEvent evt)
    {
        // Get the VisualElement that triggered the event
        VisualElement element = evt.target as VisualElement;

        // Get the resolved style of the VisualElement
        float height = element.resolvedStyle.height;

        // Log the resolved of the VisualElement
        Debug.Log("Resolved height: " + height);
    }
}

요소의 지오메트리가 변경되지 않으면 스케줄러를 추가하여 요소의 확인된 스타일을 주기적으로 확인할 수 있습니다.

element.schedule.Execute(() =>
{
    Debug.Log(element.resolvedStyle.height);
}).Every(100);

추가 리소스

C# 스크립트에서 커스텀 스타일 가져오기

USS 베스트 프랙티스