다음을 통해 공유

리본 색 사용자 지정

  • 아티클

Windows 리본 프레임워크는 애플리케이션이 런타임에 다양한 리본 UI 요소의 모양을 사용자 지정할 수 있는 색 속성 집합을 노출합니다.

소개

다음 표에 나열된 프레임워크 속성 키 는 리본 애플리케이션에서 다양한 UI 요소의 색을 설정하는 데 사용됩니다. 이러한 속성을 사용하면 리본 프레임워크가 애플리케이션 전체에서 개인 설정, ID 요구 사항 및 브랜딩 사양을 지원할 수 있습니다.

리본 색 Framework 속성 키
배경색 UI_PKEY_GlobalBackgroundColor
강조 색(Windows 7에만 해당) ** UI_PKEY_GlobalHighlightColor Windows 8 도입: ** UI_PKEY_GlobalHighlightColorUI_PKEY_GlobalBackgroundColor 독립적으로 설정할 수 없습니다.
텍스트 색 UI_PKEY_GlobalTextColorWindows 8 소개:Windows 8 UI_PKEY_GlobalBackgroundColor 기본값을 변경하려면 Windows 7용으로 설계된 리본 앱에서 UI_PKEY_GlobalTextColor 조정해야 할 수 있습니다.

리본 색 지정

리본 프레임워크는 더 일반적인 색조, 채도, 광도(HSL) 또는 색조, 채도, 값(HSV) 색 공간과 다른 HSB(Hue, 채도, 밝기) 색 모델을 사용합니다. 특히 B는 특정 색의 가벼움이 아닌 전체 밝기 또는 광도 수준을 나타냅니다.

리본 프레임워크에서 UI 요소의 색을 지정하기 위해 애플리케이션은 각 전역 색 속성에 HSB 값을 할당합니다. 그런 다음 이러한 값은 리본 애플리케이션에서 요구하는 모든 리본 요소에 범용으로 적용됩니다(프레임워크는 개별 요소 및 컨트롤에 HSB 값 할당을 지원하지 않음).

** Windows 8 도입: **UI_PKEY_GlobalHighlightColorUI_PKEY_GlobalBackgroundColor 동일한 값이 할당됩니다.

다음 표에서는 리본 프레임워크 HSB 매개 변수에 대해 설명합니다.

구성 요소

Description

조정된 값*

Hue(H)

안료 또는 실제 색은 일반적으로 0~359도의 원근 범위에서 값으로 식별됩니다.

0(빨강)~255(빨강)

포화(S)

0~100%의 백분율로 측정된 색의 순도 또는 채도입니다.

0(회색)~255(완전히 포화)

밝기(B)

색의 전체 밝기 또는 어둠은 0~100%의 백분율로 측정되었습니다.

0(어둡게) ~ 255(밝게)

* 각 매개 변수 값의 원래 범위는 프레임워크의 경우 0~255 범위로 변환됩니다.

HSB 값은 특정 색을 식별하지 않습니다. 대신 HSB 속성 값의 조합은 UI 전체의 색 그라데이션이 서로 상대적으로 조정되는 방식에 영향을 줍니다.

사용자 지정 HSB 값을 UI_PKEY_GlobalTextColor 및 UI_PKEY_GlobalBackgroundColor 할당할 때 이러한 값은 가독성을 보장하기에 충분한 대비를 두는 것이 좋습니다. 특히 텍스트 색은 리본 UI의 가장 밝은 음영보다 어둡게 해야 합니다. 필요한 경우 프레임워크는 UI_PKEY_GlobalTextColor HSB 값을 자동으로 조정하여 UI_PKEY_GlobalBackgroundColor 파생된 배경 음영 또는 그라데이션과 충분한 대비를 제공합니다.

참고

Windows 7에서는 UI_PKEY_GlobalBackgroundColor 독립적으로 UI_PKEY_GlobalHighlightColor 설정할 수 있습니다.

다음 예제에서는 UI_PKEY_GlobalTextColor, UI_PKEY_GlobalBackgroundColor 및UI_PKEY_GlobalHighlightColor 속성에 대한 사용자 지정 색을 지정하는 방법을 보여 줍니다.

CComPtr<IPropertyStore> spPropertyStore;

// _spFramework is a pointer to the IUIFramework interface that is assigned 
// when the Ribbon is initialized.
if (SUCCEEDED(_spFramework->QueryInterface(&spPropertyStore)))
{
  PROPVARIANT propvarBackground;
  PROPVARIANT propvarHighlight;
  PROPVARIANT propvarText;
 
  // UI_HSBCOLOR is a type defined in UIRibbon.h that is composed of 
  // three component values: hue, saturation and brightness, respectively.
  UI_HSBCOLOR BackgroundColor = UI_HSB(0x14, 0x38, 0x54);
  UI_HSBCOLOR HighlightColor = UI_HSB(0x00, 0x36, 0x87);
  UI_HSBCOLOR TextColor = UI_HSB(0x2B, 0xD6, 0x00);

  InitPropVariantFromUInt32(BackgroundColor, &propvarBackground);
  InitPropVariantFromUInt32(HighlightColor, &propvarHighlight);
  InitPropVariantFromUInt32(TextColor, &propvarText);
 
  spPropertyStore->SetValue(UI_PKEY_GlobalBackgroundColor, propvarBackground);
  spPropertyStore->SetValue(UI_PKEY_GlobalTextColor, propvarText);
 
  spPropertyStore->Commit();
}

RGB를 HSB로 변환

이 섹션에서는 리본 프레임워크 HSB 값(이 예제의 UI_PKEY_GlobalBackgroundColor )을 런타임 시 특정 RGB 색과 동적으로 일치시키는 데 필요한 수식에 대해 설명합니다.

탭 행 배경은 리본 배경의 밝기 그라데이션에 비해 평평한 색 표면으로 렌더링되기 때문에 참조 지점으로 사용됩니다.

중간 HSL 값을 얻으려면 예비 변환이 필요합니다. 그런 다음 이 HSL 값을 HSB 값으로 변환할 수 있습니다.

참고

RGB에서 HSL로의 변환은 대부분의 사진 편집 소프트웨어로 쉽게 수행할 수 있습니다.

HSL(0.0~1.0 범위의 각 구성 요소 포함)을 리본 HSB 설정으로 변환하는 작업은 다음 수식을 통해 수행됩니다.

  • H배경 = Round(255.0 H)
  • S배경 = Round(255.0 S)
  • Bbackground = Round(257.7 + 149.9 ln(L)) if 0.1793 <= L <= 0.9821

색 지침

프레임워크 속성