ComponentOne WPF Edition의 핵심 가치 중 하나는 간편한 스타일 지정입니다. 개발자는 Microsoft Blend와 같은 별도의 디자이너 도구를 다룰 필요나 컨트롤 템플릿을 사용자 정의할 필요도 없이 간단한 시각적 형태를 손쉽게 변경할 수 있습니다.

ComponentOne을 사용하여 WPF 컨트롤의 스타일을 지정하는 방법에는 여러 가지가 있습니다.

1. 브러시 속성을 간단히 설정하여 시작하기

2. 암시적 스타일 지원으로 스타일 지정 최적화하기

3. 완전히 디자인된 테마 중 하나를 적용하기

4. 디자인된 테마를 사용자 정의하기

컨트롤 템플릿을 사용자 정의하기 전에 이러한 시간 절약 옵션을 고려할 수 있습니다. 이 글에서는 각 양상에 대해 안내하고 스타일 API를 디자인하는 방식을 자세히 살펴보겠습니다.

브러시 속성을 간단히 설정하여 시작하기 

즉시 사용할 수 있는 ComponentOne WPF 컨트롤에는 .NET 6+ 응용 프로그램을 위한 편리한 스타일이 있습니다. 이 깔끔한 스타일은 최신 데스크톱 응용 프로그램에 멋진 디자인을 선사합니다. 스타일 사용자 정의의 시작점으로도 완벽합니다.

컨트롤의 브러시 속성을 설정할 때만 해도 일반적인 컨트롤보다 훨씬 많은 일을 할 수 있습니다. 표준 컨트롤은 일반적으로 배경 브러시와 전경 브러시를 제공하며 그게 전부입니다. 단순한 컨트롤에는 두 가지로 충분할 수 있지만, 복잡한 컨트롤에는 복잡한 스타일 지정 브러시 API가 필요합니다. 그래서 컨트롤의 모든 부분에 다양한 브러시 속성이 노출되도록 설계했습니다. 그리고 학습하기 쉽도록 이러한 속성을 캡슐화된 스타일 개체로 그룹화했습니다.

예를 들어 FlexGrid의 열 헤더에 빠르게 스타일을 지정하고 몇 개의 브러시 속성만 설정하여 행 색상을 변경할 수 있으며, 브러시 색상은 XAML 레이어를 통해 전파됩니다.

<c1:FlexGrid x:Name="grid"
            ColumnHeaderFontWeight="Bold"
            ColumnHeaderBackground="#fffbdc6a"
            AlternatingRowBackground="#fffffbce"/>

암시적 스타일 지원으로 스타일 최적화

아주 단순한 스타일 지정만을 원한다면 여기저기에서 몇 개의 브러시 속성만 설정하면 됩니다. 하지만 응용 프로그램이 크거나 여러 인스턴스의 반복 컨트롤이 있다면 WPF의 암시적 스타일 관리를 활용하여 스타일 지정을 최적화해야 합니다.

WPF 컨트롤은 표준 .NET 컨트롤과 동일한 암시적 스타일 관리를 따릅니다. 암시적 스타일은 키가 없으므로 대상 유형의 모든 인스턴스에 적용됩니다. 즉, 공통 스타일을 정의하여 응용 프로그램 전체에서 다시 사용할 수 있습니다. 예를 들어, FlexGrid를 전부 주황색으로 만드는 암시적 스타일을 만들 수 있습니다.

스타일은 어떤 속성이든 포함할 수 있습니다. 테마에 머리글 및 눈금선 설정을 포함할 수도 있고, 브러시는 패턴 및 그라데이션과 같은 복잡한 기능을 지원합니다.

<Window.Resources>
<Style TargetType="c1:FlexGrid" >
  <Setter Property="HeadersVisibility" Value="All"/>
  <Setter Property="ColumnHeaderFontWeight" Value="Bold" />
  <Setter Property="GridLinesVisibility" Value="Vertical" />
  <Setter Property="ColumnHeaderBackground">
      <Setter.Value>
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
              <GradientStop Color="#fffbdc6a" Offset="0"/>
              <GradientStop Color="#fffbc711" Offset="0.5"/>
              <GradientStop Color="#ffdfb72d" Offset="1"/>
          </LinearGradientBrush>
      </Setter.Value>
  </Setter>
  <Setter Property="ColumnHeaderForeground" Value="#ff444444" />
  <Setter Property="RowHeaderBackground" >
      <Setter.Value>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
              <GradientStop Color="#fffbdc6a" Offset="0"/>
              <GradientStop Color="#fffbc711" Offset="0.5"/>
              <GradientStop Color="#ffdfb72d" Offset="1"/>
          </LinearGradientBrush>
      </Setter.Value>
  </Setter>
  <Setter Property="RowHeaderForeground" Value="#ff444444" />
  <Setter Property="AlternatingRowBackground" Value="#fffffbce" />
  <Setter Property="Foreground" Value="#ff000000" />
  <Setter Property="GridLinesBrush" Value="#ffc9caca" />
</Style>
</Window.Resources>

테마를 만드는 다른 방법을 학습하지 않더라도 암시적 스타일 지정을 통해 표준 또는 ComponentOne WPF 컨트롤의 외형을 쉽게 사용자 정의할 수 있습니다. 암시적 스타일을 정의하는 위치는 범위에 영향을 줍니다. 창 리소스 내에서 정의하면 해당 창에 있는 모든 FlexGrid에 적용됩니다. App.xaml 파일의 리소스에 배치하면 응용 프로그램의 모든 곳에 적용됩니다.

브러시는 물론 텍스트, 테두리, 눈금선 등의 모양 관련 속성이 풍부하여, 응용 프로그램의 스타일을 완전하게 지정하는 데 추가 요소가 거의 필요하지 않습니다.

완벽하게 디자인된 테마 중 하나 적용하기 

위에 설명된 솔루션의 대안으로, 기본 제공되는 테마를 사용하여 전체 응용 프로그램의 스타일을 한 번에 지정할 수 있습니다. ComponentOne WPF Edition에서는 20가지가 넘는 전문적인 테마를 제공합니다. 테마는 한 줄의 코드로 전체 컨트롤 또는 응용 프로그램에 특정 외형을 빠르게 적용할 수 있는 아주 좋은 방법입니다.

테마에 대해서는 이전에 상세히 기술한 바 있습니다. WPF 테마를 추가하여 데스크톱 응용 프로그램의 스타일을 지정하는 방법을 확인하시기 바랍니다.

디자인된 테마를 사용자 지정

새로운 .NET 6+ 재료 테마에 대한 간단한 테마 사용자 지정을 지원하여 WPF 컨트롤에 대한 테마 사용자 지정을 간소화했습니다. 

Material 테마는 Material.io에서 정의한 모범 사례에 따라 디자인했습니다. WPF Material 테마를 사용자 정의하여 밝은 배경이나 어두운 배경을 선택하고 응용 프로그램 또는 회사의 브랜딩에 맞게 강조 색을 추가할 수 있습니다. WPF Material 테마는 표준 .NET 컨트롤도 지원합니다.

Material 테마의 사용자 정의에 대한 글도 있습니다. 사용자 정의 WPF Material 테마를 만드는 방법을 확인하세요.

간편한 스타일 지정이 중요한 이유

위의 네 섹션에서는 WPF 컨트롤에서의 간편한 스타일 및 사용자 정의에 대해 상세히 설명했습니다. 이번 블로그의 나머지 부분에서는 해당 결정의 배경과 컨트롤을 디자인할 때 고려한 원칙에 대해 자세히 살펴보겠습니다.

XAML은 놀라운 작업을 할 수 있는 매우 강력하고 유연한 마크업 언어입니다. 하지만 유연성의 대가로 복잡하기 때문에 이 놀라운 유연성이 혼란으로 이어질 때도 있습니다. 복잡성은 좋은 것일 수도 있지만, 복잡한 문제는 절대 좋지 않습니다. 이를 염두에 두고 개발자가 복잡한 사용자 인터페이스에서 복잡한 문제까지 겪지 않아도 되도록 스타일이 지원되는 기능 범위를 구현했습니다.

WPF, UWP, WinUI 또는 다른 어느 XAML 기반 플랫폼 어디에서 작업하든, 컨트롤의 외형을 간단히 변경할 필요가 있었을 것입니다. 예를 들어 스케줄러에서 요일 슬롯의 헤더 부분만 색상을 변경하고 싶다고 합시다. 이를 해결하는 가장 쉬운 방법은 컨트롤에 'DaySlotHeaderBackground'와 같은 노출된 브러시를 추가하는 것입니다.

하지만 그게 다가 아닙니다. 특정 스타일의 일부 복잡한 컨트롤은 기본 외형에 그라데이션을 활용하므로 배경만 설정하기가 쉽지 않습니다. 배경 브러시가 여러 레이어에 걸쳐 계단식 배열이 되기를 원하는 경우도 있을 수 있습니다. 이전의 WPF 및 Silverlight 컨트롤에선 특히 그랬습니다. 아래의 C1Scheduler 컨트롤을 예로 들 수 있습니다.

모든 컨트롤은 서로 레이어링된 여러 요소로 구성됩니다. 다음 다이어그램과 같은 여러 레이어를 포함하는 컨트롤을 생각해 보세요.

레이어 하나하나마다 노출된 브러시 속성을 만드는 것은 실용적이지 않습니다. 각 레이어에 대한 완전한 컨트롤이 필요하다면 XAML 템플릿을 사용자 정의해야 합니다.

ComponentOne은 전체 XAML 컨트롤 템플릿을 설치의 일환으로 제공합니다. 고충점은 XAML 템플릿에 수백 줄의 마크업이 포함되어 있다는 것입니다. 이 코드는 망가지기 쉽고, 디버깅 기능도 C# 또는 VB 컴파일러와 같지 않습니다. 단지 배경색을 바꾸기 위해, 금방 유지 관리 문제가 생길 600줄이 넘는 XAML로 작업한다고 생각해 보세요. 스파게티 XAML에 가까울 겁니다!

XAML에서는 컨트롤 템플릿의 사용자 정의를 권장하지 않습니다. Microsoft에서 2년마다 업데이트하는 표준 컨트롤의 템플릿을 관리하는 일도 문제지만, GrapeCity에서는 1년에 최대 3번까지 컨트롤 업데이트를 출시하는 점은 더 큰 문제입니다. 새 릴리스에서는 사용자에게 필요한 기능이 추가됩니다.

이러한 향상된 기능은 프로그래밍 방식 API와 관련하여 이전 버전 호환성을 손상시키지 않습니다. 하지만 모든 새로운 부가 기능에는 모양을 정의하기 위한 템플릿 변경이 필요합니다. 기본적으로 사용자 정의 컨트롤에서 XAML 템플릿을 변경하는 일은 불가피합니다. 따라서 이 문제를 해결하는 것이 컨트롤을 사용하기 쉽게 하는 데 매우 중요했습니다. 간편한 스타일 지정 기능을 통해 최종적으로 모든 사람이 이용하기 더욱 편리해졌습니다.

원칙과 목표

WPF 컨트롤의 구현에는 많은 생각과 고려를 거쳤습니다. 저희는 각 컨트롤에 대해 잘 정리된 깔끔한 API와 컨트롤 템플릿을 건드리지 않고도 쉽게 스타일을 지정할 수 있는 API 사이에서 완벽한 균형을 찾고자 했습니다. 각 컨트롤 부분에는 배경색 외에도 외형과 관련된 많은 속성이 있을 수 있으므로 이것은 도전적인 과제와 같았습니다. 개발자의 작업을 더 쉽게 하는 것 외의 또 다른 주요 목표는 개발자가 그래픽 디자이너를 덜 사용해도 되도록 만드는 것이었습니다.

따라서 외형을 사용자 정의하는 시나리오에 대해 다음의 네 가지 원칙을 정했습니다.

• 단순 변경은 단순하게

• 상세 변경은 충분히 단순하게

• 계단식 배열의 외형 속성은 논리적으로

• 전체 다시 디자인 옵션을 항상 사용할 수 있게

단순 변경은 단순하게

저희는 소규모의 외형 변경은 누구나 별도의 도구 없이도 할 수 있어야 한다고 생각합니다. 예를 들어 배경 속성은 모든 컨트롤에서 스마트한 방식으로 지켜져야 합니다. 이러한 단순 변경 원칙을 활용하였으므로 배경이 행 뒤 영역에 단순히 적용되지 않는 FlexGrid와 같은 복잡한 컨트롤에 빠르고 쉽게 스타일을 지정할 수 있습니다.

상세 변경은 충분히 단순하게

많은 부분으로 작동하는 복잡한 많은 컨트롤을 개발했으므로, 저희는 각 부분에 대한 상세 변경이 단순하길 바랐습니다. 그러나 균형이 있어야 했습니다. 쉽게 변경할 수 있게 하기 위해 모든 항목을 속성으로 노출하는 것은 실용적이지 못합니다.

그렇게 하면 WPF 및 기타 XAML 기반의 플랫폼의 적게 표시하기 원칙에 어긋나고, 매우 복잡한 퍼블릭 API가 됩니다. 마우스가 컨트롤을 가리킬 때 헤더의 테두리 외형을 변경하는 MouseOverHeaderBorderBrush와 같은 속성을 생각해 보세요. 아주 특이한 속성입니다. 대부분의 일반적인 시나리오에서 그 속성은 고할 가치가 없습니다.

각 컨트롤에 노출할 적합한 속성을 결정하기 위해 약간의 디자인 지식 및 상식과 더불어 유용성에 비중을 두었습니다. 거기서 더 정리하여 다양한 컨트롤 부분에 스타일 속성을 제공하고 더 많은 중요한 부분에 브러시를 제공했습니다. 이 조합은 스타일 속성을 사용해 컨트롤의 모든 부분에 스타일을 지정할 수 있는 유연성을 제공하면서도, 브러시 속성을 사용하려는 개발자가 건드려야 할 API를 단순하게 유지합니다.

예를 들어 FlexGrid 컨트롤은 컨트롤의 각 부분(배경, 전경 등)에 관련된 브러시를 포함하는 다음 스타일 속성을 노출합니다.

• AlternatingRowStyle

• ColumnHeaderStyle

• ErrorStyle

• GroupRowStyle

• NewRowStyle

• PopupStyle

• RowHeaderStyle

• RowStyle

• SelectionStyle

• TopLeftHeaderStyle

다음은 이러한 스타일을 설정하는 인라인 코드의 예입니다. 물론 앞서 설명한 것처럼 암시적 스타일 지정으로 재사용 가능한 스타일 리소스 내에서 이를 적용할 수도 있습니다.

<c1:FlexGrid x:Name="grid">
  <c1:FlexGrid.ColumnHeaderStyle>
      <Style TargetType="c1:GridColumnHeaderCell">
          <Setter Property="Background" Value="#fffbdc6a" />
          <Setter Property="Foreground" Value="#ff094475" />
          <Setter Property="FontWeight" Value="Bold" />
      </Style>
  </c1:FlexGrid.ColumnHeaderStyle>
</c1:FlexGrid>

XAML 팁: 전경은 일반적으로 모든 텍스트에 적용됩니다.

속성이 너무 많은 것은 아니지만, 단순한 방식으로 상세히 변경하기에 충분합니다. 외형과 관련된 일부 속성은 스타일 속성 내에서 캡슐화되지 않습니다. 컨트롤 부분이 얼마나 복잡한지에 따라 다릅니다. 예를 들어 FlexGrid에서 MouseOverBrush는 행에 투명한 색을 적용하므로 고도의 엔지니어링을 필요로 하지 않습니다.

계단식 배열의 외형 속성은 논리적으로

스타일 지정을 더 쉽게 하는 또다른 핵심 요령은 컨트롤의 자식 항목 전반에서 스타일 설정을 전달하는 것입니다. 일부 컨트롤의 속성은 외부 컨트롤에서 내부 컨트롤로 전파되어야 합니다. 예를 들어 C1Menu 컨트롤에서 배경을 설정한 뒤 C1MenuItem 요소 하나하나마다 또 배경을 설정하는 것은 바람직하지 않습니다. 한번 설정하면 내부 컨트롤에서도 동일한 스타일을 채택하는 것이 낫습니다.

전체 다시 디자인 옵션을 항상 사용할 수 있게

템플릿과 스타일을 생성하기 위한 쉬운 대안을 제공하는 것은 훌륭해 보이지만 여기에는 항상 몇 가지의 단점과 제한이 따릅니다. 예를 들어 개체의 브러시 속성을 노출하면 색상을 쉽게 변경할 수 있습니다. 하지만 해당 개체에 대해 다른 패턴이나 도형을 설정하는 데는 도움이 되지 않습니다.

따라서 보다 일반적이지 않은 경우를 위해 전체 다시 디자인 옵션을 계속 사용할 수 있어야 합니다. 이는 모든 항목이 단순 브러시 속성만 지원하는 것이 아니라 템플릿의 스타일도 완전히 지정할 수 있어야 함을 의미합니다. 저희는 모든 ComponentOne 컨트롤의 표준화를 유지하여 완전히 표준 컨트롤과 같이 작동하게 했습니다.

Visual Studio의 Microsoft Blend 도입

최초의 XAML 플랫폼이 탄생했을 때, Microsoft는 마크업 파일의 스타일 지정을 위해 Expression Blend라는 별도의 IDE를 도입했습니다. 2012년부터는 Blend가 별도의 SDK로 Visual Studio에 통합되었습니다. 이는 Blend에 익숙하지 않고 새로운 도구를 다운로드하여 학습할 시간이 없는 개발자에게는 어려운 과제가 되었습니다. 그래픽 디자이너를 고용하는 방법도 있지만, 그러려면 예산과 커뮤니케이션 비용이 증가합니다.

ComponentOne의 손쉬운 스타일링을 통해 Visual Studio에서 가장 실용적인 사용 사례를 가장 직관적인 방식으로 제공합니다. 대부분의 상황에는 단순한 스타일 변경만 필요하므로 프로세스가 예상만큼 단순해야 합니다.

위 예시에서 거대한 컨트롤 템플릿을 사용자 정의하는 작업과 비교해 몇 가지 속성을 설정하는 데 걸린 시간을 고려해 보세요.

결론 

간편한 스타일 지정은 모든 ComponentOne WPF, UWP, 기타 XAML 컨트롤(WinUI, MAUI 등)에서 찾아볼 수 있는 주요 기능입니다. ComponentOne 컨트롤을 사용하면 개발자와 디자이너 모두 이점을 얻을 수 있습니다. 요점은 다음과 같습니다.

• 스타일 지정은 단순하고 직관적입니다. 컨트롤에서 여러 브러시 속성을 설정하는 것은 어렵지 않습니다. Visual Studio에 익숙하다면 아주 자연스럽게 할 수 있습니다. 더 효율적인 디자인을 위해 암시적 스타일 리소스를 만들어서 모든 컨트롤 인스턴스에 이러한 단순 브러시 속성을 적용할 수도 있습니다.

• 상세 변경이 가능하며 간편합니다. 복잡한 컨트롤에는 일반적인 배경 및 전경 속성 외에도 더 많은 브러시를 사용할 수 있기 때문입니다. 대부분의 표준 컨트롤에서는 단 두 개의 브러시만 설정할 수 있고, 이는 모든 경우에 컨트롤의 모든 상태와 부분을 처리하기에는 역부족입니다.

• 전체 다시 디자인 옵션은 그대로 있습니다. 테마와 암시적 스타일 지정은 컨트롤 템플릿을 수정하는 표준 접근법과 충돌하지 않기 때문입니다. ComponentOne은 간단한 일반 디자인 요구 사항에 대해 빠른 솔루션을 목표로 합니다.

• Blend SDK가 필요하지 않은 테마 컨트롤, 또는 Blend를 계속 사용하는 경우 컨트롤 스타일 지정은 여전히 다른 타사 컨트롤은 물론 표준 컨트롤보다도 더 간편합니다.