Share via


리본 이미지 리소스 지정

풍부한 명령 프레젠테이션 시스템으로 Windows 리본 프레임워크는 리본 UI(사용자 인터페이스) 전체에서 이미지 리소스를 광범위하게 지원하도록 설계되었습니다. 모든 이미지 리소스는 리본 태그 에 선언되거나 리본 호스트 애플리케이션에서 쿼리됩니다.

Windows 8 이상의 경우 Ribbon 프레임워크는 32비트 BMP(ARGB 비트맵) 파일 및 투명도가 있는 PNG(이식 가능한 네트워크 그래픽) 파일의 그래픽 형식을 지원합니다.

Windows 7 이하의 경우 이미지 리소스는 Windows에서 사용되는 표준 BMP 그래픽 형식을 준수해야 합니다.

참고

지원되지 않는 이미지 형식이 프레임워크에 제공되면 컴파일 오류가 발생할 수 있습니다.

 

이미지 크기

리본 프레임워크는 애플리케이션 창의 크기를 조정할 때 리본 컨트롤 레이아웃에 더 큰 유연성을 제공하기 위해 이미지를 크고 작은 두 가지 크기 중 하나로 수락하고 렌더링합니다.

다음 이미지는 유연한 컨트롤 레이아웃을 통해 여러 리본 크기를 지원하고 사용 가능한 경우 작은 이미지로 큰 이미지를 교체하는 리본 애플리케이션을 보여 줍니다.

다음 스크린샷은 확대/축소 컨트롤에 대한 큰 이미지가 있는 리본 메뉴를 보여 줍니다.

확대/축소 컨트롤에 큰 이미지를 사용하는 리본 메뉴를 보여 주는 스크린샷

다음 스크린샷은 확대/축소 컨트롤에 대한 작은 이미지로 크기가 조정된 동일한 리본 메뉴를 보여 줍니다.

확대/축소 컨트롤에 작은 이미지를 사용하는 리본 메뉴를 보여 주는 스크린샷

다음 스크린샷은 숨겨진 상태의 리본을 보여 줍니다. 모든 잠재적 컨트롤 레이아웃이 소진되고 사용 가능한 애플리케이션 작업 영역으로 리본을 렌더링할 수 없는 경우 리본이 숨겨집니다.

축소된 리본을 보여 주는 스크린샷

모든 이미지의 경우 정확한 픽셀 크기는 사용 중인 모니터의 디스플레이 해상도 또는 dpi(인치당 점)에 따라 달라집니다. 96dpi에서 큰 이미지는 크기가 32x32픽셀이고 작은 이미지의 크기는 16x16픽셀입니다. 다음 표와 같이 이미지 크기는 dpi를 기준으로 선형 방식으로 증가합니다.

DPI 작은 이미지 큰 이미지
96dpi 16x16 픽셀 32x32 픽셀
120dpi 20x20 픽셀 40x40 픽셀
144dpi 24x24 픽셀 48x48 픽셀
192dpi 32x32 픽셀 64x64 픽셀

 

리본 프레임워크는 필요에 따라 이미지 리소스의 크기를 조정합니다. 그러나 크기 조정은 바람직하지 않은 아티팩트와 이미지 저하를 가져올 수 있으므로 애플리케이션은 일반적으로 사용되는 다양한 dpi 설정에 걸쳐 있는 작은 이미지 리소스 집합을 제공하는 것이 좋습니다. 정확한 일치 항목을 찾을 수 없으면 가장 가까운 이미지가 확장 또는 축소됩니다.

이를 용이하게 하기 위해 각 Command 요소에 대해 Image 요소 집합을 사용하여 리본 태그에서 이미지 리소스를 선언할 수 있습니다. 런타임에 프레임워크는 각 Image 요소의 MinDPI 특성에 따라 표시할 이미지를 선택합니다.

중요

특정 화면 dpi 설정을 지원하도록 설계된 이미지 리소스 컬렉션이 Image 요소 집합을 통해 리본 프레임워크에 제공되면 프레임워크는 현재 화면 dpi 설정과 일치하는 MinDPI 특성 값이 있는 Image를 사용합니다.

현재 화면 dpi 설정과 일치하는 MinDPI 값으로 선언된 Image 요소가 없는 경우 프레임워크는 현재 화면 dpi 설정보다 가장 가까운 MinDPI 값이 있는 이미지를 선택하고 이미지 리소스를 확장합니다. 그렇지 않으면 현재 화면 dpi 설정보다 작은 MinDPI 특성 값으로 선언된 Image 요소가 없는 경우 프레임워크는 현재 화면 dpi 설정보다 가장 가까운 MinDPI 값을 선택하고 이미지 리소스를 축소합니다.

 

다음 예제에서는 다양한 리본 크기 및 시스템 설정을 수용하기 위해 이미지 집합을 선언하는 방법을 보여 줍니다.

<Command.LargeImages>
  <Image Source="res/CutLargeImage32.bmp" Id="116" Symbol="ID_CUT_LARGEIMAGE1" MinDPI="96" />
  <Image Source="res/CutLargeImage40.bmp" Id="117" Symbol="ID_CUT_LARGEIMAGE2" MinDPI="120" />
  <Image Source="res/CutLargeImage48.bmp" Id="118" Symbol="ID_CUT_LARGEIMAGE3" MinDPI="144" />
  <Image Source="res/CutLargeImage64.bmp" Id="119" Symbol="ID_CUT_LARGEIMAGE4" MinDPI="192" />
</Command.LargeImages>
<Command.SmallImages>
  <Image Source="res/CutSmallImage16.bmp" Id="122" Symbol="ID_CUT_SMALLIMAGE1" MinDPI="96" />
  <Image Source="res/CutSmallImage20.bmp" Id="123" Symbol="ID_CUT_SMALLIMAGE2" MinDPI="120" />
  <Image Source="res/CutSmallImage24.bmp" Id="124" Symbol="ID_CUT_SMALLIMAGE3" MinDPI="144" />
  <Image Source="res/CutSmallImage32.bmp" Id="125" Symbol="ID_CUT_SMALLIMAGE4" MinDPI="192" />
</Command.SmallImages>
<Command.LargeHighContrastImages>
  <Image Source="res/CutLargeImage32HC.bmp" Id="130" Symbol="ID_CUT_LARGEIMAGE1HC" MinDPI="96" />
  <Image Source="res/CutLargeImage40HC.bmp" Id="131" Symbol="ID_CUT_LARGEIMAGE2HC" MinDPI="120" />
  <Image Source="res/CutLargeImage48HC.bmp" Id="132" Symbol="ID_CUT_LARGEIMAGE3HC" MinDPI="144" />
  <Image Source="res/CutLargeImage64HC.bmp" Id="133" Symbol="ID_CUT_LARGEIMAGE4HC" MinDPI="192" />
</Command.LargeHighContrastImages>
<Command.SmallHighContrastImages>
  <Image Source="res/CutSmallImage16HC.bmp" Id="135" Symbol="ID_CUT_SMALLIMAGE1HC" MinDPI="96" />
  <Image Source="res/CutSmallImage20HC.bmp" Id="136" Symbol="ID_CUT_SMALLIMAGE2HC" MinDPI="120" />
  <Image Source="res/CutSmallImage24HC.bmp" Id="137" Symbol="ID_CUT_SMALLIMAGE3HC" MinDPI="144" />
  <Image Source="res/CutSmallImage32HC.bmp" Id="138" Symbol="ID_CUT_SMALLIMAGE4HC" MinDPI="192" />
</Command.SmallHighContrastImages>

어떤 이유로든 런타임에 태그에 선언된 이미지가 무효화되면 호스트 애플리케이션에서 새 이미지를 쿼리합니다. 이러한 이미지가 프로그래밍 방식으로 생성되고 로드되면 애플리케이션은 SM_CXICON 시스템 메트릭에 의해 결정되는 기본 시스템 아이콘 크기에 따라 크기가 조정된 이미지를 반환하려고 시도해야 합니다.

참고

큰 이미지의 크기는 SM_CXICON SM_CXICON, 작은 이미지의 크기는 SM_CXICON/2의 SM_CXICON/2입니다.

 

색 깊이, 투명도 및 대비

일반 이미지는 BPP(픽셀당 32비트) ARGB 픽셀 형식이며 기본 시스템 아이콘 크기로 크기가 조정되어야 합니다. 이 형식은 투명도 및 앤티앨리어싱을 모두 지원합니다(채널당 8비트 사용).

경고

많은 이미지 편집 도구는 32개 BPP 이미지를 로드하거나 저장할 때 가장 높은 순서의 8비트 알파 채널을 유지하지 않습니다.

 

이미지가 고대비 모드로 올바르게 표시되려면 4 BPP 팔레트 픽셀 형식이어야 합니다. 이미지가 렌더링되면 리본 프레임워크는 이미지의 고대비 컨텍스트에 따라 특정 색을 다시 매핑합니다.

다음 표에서는 프레임워크의 고대비 색 렌더링 동작을 나열합니다.

픽셀 색

RGB 값

동작

흰색 배경

어두운 배경

마젠타

800080

투명

투명

블랙

000000

COLOR_WINDOWTEXT

하얀

하얀

FFFFFF

COLOR_WINDOW

블랙

진한 회색

808080

COLOR_3DSHADOW

COLOR_3DSHADOW

회색

C0C0C0

COLOR_3DFACE

COLOR_3DFACE

연한 회색

DFDFDF

COLOR_3DLIGHT

COLOR_3DLIGHT

진한 파란색

000080

해당 없음

하얀

 

리본 프레임워크에서 지원하는 이미지 형식에 대한 자세한 내용은 다음을 참조하세요.

액세스 가능성

이미지 리소스를 사용하여 정보를 제공하고, 제어 기능을 전달하고, 애플리케이션 상태를 노출하면 애플리케이션 디자인 및 개발 중에 접근성 요구 사항이 증가합니다.

기본 고대비 지원을 위해 리본을 사용하면 고대비 테마가 활성 상태일 때 별도의 이미지 파일 집합을 표시할 수 있습니다. 이러한 이미지는 32 BPP 또는 4 BPP일 수 있으며, 색은 활성 고대비 테마의 전경색과 배경색에 따라 어둡고 밝은 색이 반전되는 특수 색상표에 매핑됩니다.

다음 예제에서는 리본 태그에서 고대비 이미지 리소스를 선언하는 방법을 보여 줍니다.

<Command Name="cmdNew" Id="0xE100" Symbol="ID_CMD_NEW" LabelTitle="New document" Keytip="N" >
      <Command.TooltipTitle>New (Ctrl+N)</Command.TooltipTitle>
      <Command.TooltipDescription>Create a new document.</Command.TooltipDescription>
      <Command.LargeImages>
        <Image Source="cmdNew-32px.bmp" MinDPI="96" />
        <Image Source="cmdNew-40px.bmp" MinDPI="120" />
        <Image Source="cmdNew-48px.bmp" MinDPI="144" />
        <Image Source="cmdNew-64px.bmp" MinDPI="192" />
      </Command.LargeImages>
      <Command.LargeHighContrastImages>
        <Image Source="cmdNew-32px-HC.bmp" MinDPI="96" />
        <Image Source="cmdNew-40px-HC.bmp" MinDPI="120" />
        <Image Source="cmdNew-48px-HC.bmp" MinDPI="144" />
        <Image Source="cmdNew-64px-HC.bmp" MinDPI="192" />
      </Command.LargeHighContrastImages>
      <Command.SmallImages>
        <Image Source="cmdNew-16px.bmp" MinDPI="96" />
        <Image Source="cmdNew-20px.bmp" MinDPI="120" />
        <Image Source="cmdNew-24px.bmp" MinDPI="144" />
        <Image Source="cmdNew-32px.bmp" MinDPI="192" />
      </Command.SmallImages>
      <Command.SmallHighContrastImages>
        <Image Source="cmdNew-16px-HC.bmp" MinDPI="96" />
        <Image Source="cmdNew-20px-HC.bmp" MinDPI="120" />
        <Image Source="cmdNew-24px-HC.bmp" MinDPI="144" />
        <Image Source="cmdNew-32px-HC.bmp" MinDPI="192" />
      </Command.SmallHighContrastImages>
    </Command>

Command.SmallImages

UI_PKEY_SmallImage

Command.LargeImages

UI_PKEY_LargeImage

Command.SmallHighContrastImages

UI_PKEY_SmallHighContrastImage

Command.LargeHighContrastImages

UI_PKEY_LargeHighContrastImage