요약 - 12장. 스타일

  • 아티클

Download Sample 샘플 다운로드

참고 항목

이 책은 2016년 봄에 출간되었으며, 그 후로 업데이트되지 않았습니다. 이 책의 많은 내용이 지금까지도 무척 유용하나, 일부 내용은 오래되었고 올바르지 않거나 완전하지 않은 주제도 있습니다.

Xamarin.Forms에서 스타일을 사용하면 여러 뷰가 속성 설정 컬렉션을 공유할 수 있습니다. 이렇게 하면 태그가 줄어들고 일관적인 시각적 테마를 유지할 수 있습니다.

스타일은 거의 항상 태그에서 정의되고 사용됩니다. Style 형식의 개체는 리소스 사전에서 인스턴스화된 후 StaticResource 또는 DynamicResource 태그 확장을 사용하여 시각적 요소의 Style 속성으로 설정됩니다.

기본 스타일

A Style 를 TargetType 적용할 시각적 개체의 형식으로 설정해야 합니다. Style이 리소스 사전에서 인스턴스화된 경우(일반적인 경우) x:Key 특성도 필요합니다.

Style에는 Setter 개체의 컬렉션인 Setters 형식의 콘텐츠 속성이 있습니다. 각 Setter는 Property를 Value와 연결합니다.

XAML에서 Property 설정은 CLR 속성의 이름(예: Button의 Text 속성)이지만 스타일이 지정된 속성은 바인딩 가능한 속성으로 지원되어야 합니다. 또한 속성은 TargetType 설정으로 표시된 클래스에 정의되거나 해당 클래스에서 상속해야 합니다.

<Setter.Value> 속성 요소를 사용하여 Value 설정을 지정할 수 있습니다. 그러면 Value를 텍스트 문자열로 표현할 수 없는 개체 또는 OnPlatform 개체나 x:Arguments 또는 x:FactoryMethod를 사용하여 인스턴스화된 개체로 설정할 수 있습니다. StaticResource 식을 사용하여 Value 속성을 사전의 다른 항목으로 설정할 수도 있습니다.

BasicStyle 프로그램은 기본 구문을 보여주고 StaticResource 태그 확장을 사용하여 Style을 참조하는 방법을 보여줍니다.

Triple screenshot of basic style

Style 개체 및 Style 개체에서 Value 설정으로 만든 모든 개체는 해당 Style을 참조하는 모든 뷰 간에 공유됩니다. Style은 공유할 수 없는 항목(예: View 파생 항목)을 포함할 수 없습니다.

Style에 이벤트 처리기를 설정할 수 없습니다. GestureRecognizers 속성은 바인딩 가능한 속성에서 지원하지 않기 때문에 Style에 설정할 수 없습니다.

코드의 Style

일반적이지는 않지만 코드에서 Style 개체를 인스턴스화하고 초기화할 수 있습니다. 이는 BasicStyleCode 샘플에서 설명합니다.

Style 상속

Style에는 다른 스타일을 참조하는 StaticResource 태그 확장으로 설정할 수 있는 BasedOn 속성이 있습니다. 이를 통해 이전 스타일에서 스타일을 상속하고 속성 설정을 추가하거나 바꿀 수 있습니다. StyleInheritance 샘플에서는 이를 보여줍니다.

Style2가 Style1을 기반으로 하는 경우 Style2의 TargetType은 Style1과 동일하거나 Style1에서 파생되어야 합니다. Style1이 저장되는 리소스 사전은 시각적 트리에서 Style2와 동일한 리소스 사전 또는 그보다 상위 리소스 사전에 있어야 합니다.

암시적 스타일

리소스 사전의 Style에 x:Key 특성 설정이 없는 경우 사전 키가 자동으로 할당되고 Style 개체가 암시적 스타일이 됩니다. ImplicitStyle 샘플에 나와 있는 것처럼 Style 설정이 없고 해당 형식이 TargetType과 정확히 일치하는 뷰가 해당 스타일을 찾습니다.

암시적 스타일은 x:Key 설정을 사용하여 Style에서 파생될 수 있지만 그 밖의 다른 방법은 안 됩니다. 암시적 스타일은 명시적으로 참조할 수 없습니다.

스타일과 BasedOn을 사용하여 세 가지 유형의 계층 구조를 구현할 수 있습니다.

  • Application 및 Page에 정의된 스타일에서 시각적 트리의 하위 레이아웃에 정의된 스타일까지
  • VisualElement 및 View 같은 기본 클래스에 대해 정의된 스타일에서 특정 클래스에 대해 정의된 스타일까지
  • 명시적 사전 키가 있는 스타일에서 암시적 스타일까지

이러한 계층 구조는 StyleHierarchy 샘플에서 설명합니다.

동적 스타일

리소스 사전의 스타일은 StaticResource가 아닌 DynamicResource에서 참조할 수 있습니다. 이 경우 스타일은 동적 스타일이 됩니다. 리소스 사전에서 해당 스타일을 동일한 키를 사용하는 다른 스타일로 바꾸면 DynamicResource를 사용하여 해당 스타일을 참조하는 뷰가 자동으로 변경됩니다. 또한 지정된 키를 가진 사전 항목이 없으면 StaticResource는 예외를 유발하지만 DynamicResource는 그렇지 않습니다.

이 기법을 사용하여 DynamicStyles 샘플에 나와 있는 것처럼 스타일이나 테마를 동적으로 변경할 수 있습니다.

그러나 BasedOn은 바인딩 가능한 속성에서 지원하지 않으므로 BasedOn 속성을 DynamicResource 태그 확장으로 설정할 수 없습니다. 스타일을 동적으로 파생시키려면 BasedOn을 설정하지 마세요. 대신 BaseResourceKey 속성을 파생하려는 스타일의 사전 키로 설정하세요. DynamicStylesInheritance 샘플에서 이 기법을 보여줍니다.

디바이스 스타일

Device.Styles 중첩 클래스는 일반 텍스트 형식에 사용할 수 있는 Label의 TargetType을 사용하여 6개 스타일에 12개의 정적 읽기 전용 필드를 정의합니다.

이러한 필드 중 6개는 코드에서 Style 속성으로 직접 설정할 수 있는 Style 형식입니다.

다른 6개 필드는 string 형식이며 동적 스타일의 사전 키로 사용할 수 있습니다.

이러한 스타일은 DeviceStylesList 샘플에서 설명합니다.