리본 레이아웃 및 크기 조정
리본은 적응 레이아웃과 크기 조정을 사용하여 다양한 창 크기에 대한 최적의 컨트롤 레이아웃을 제공합니다. 리본은 여러 일반적인 시나리오에 적합한 기본 크기 조정 동작을 제공합니다. WPF용 Microsoft 리본에서는 사용자 지정 크기 조정 동작을 지정할 수 있는 옵션 집합도 제공합니다.
리본 크기 조정 개요
리본 컨트롤은 응용 프로그램 창의 너비가 변경되면 동적으로 크기가 조정됩니다. 다음 그림에서는 응용 프로그램 창이 좁아지는 경우 리본 크기가 조정되는 방식을 보여 줍니다.
창에 사용 가능한 공간이 충분히 있으면 탭의 각 그룹이 지정된 최대 크기로 표시됩니다.
.png "큰 컨트롤이 있는 리본")
창이 좁아지면 클립보드 및 삽입 그룹이 작은 크기로 표시됩니다.
.png "중간 크기 컨트롤이 있는 리본")
창이 더 좁아지면 클립보드, 삽입 및 단락 그룹이 축소된 상태로 표시됩니다. 그룹이 드롭다운 단추로 축소되면 드롭다운을 열 때 최대 크기 변형이 표시됩니다.
.png "축소된 그룹이 있는 리본")
기본 크기 조정 동작
기본적으로 리본을 배치하는 패널은 별표를 사용한 크기 조정을 통해 사용 가능한 공간에 맞출 수 있는 허용 가능한 가장 큰 컨트롤 변형을 표시합니다. 창의 너비가 변경되면 컨트롤 그룹의 크기가 오른쪽에서 왼쪽으로 순환 조정됩니다. 오른쪽에서 왼쪽으로 배치하는 지역화된 문화권에서는 컨트롤 그룹의 크기가 왼쪽에서 오른쪽으로 순환 조정됩니다.
별표를 사용한 크기 조정은 공간을 차지해야 하는 요소 간에 사용 가능한 공간을 균일하게 분할하는 규칙입니다. 별표를 사용한 크기 조정이라는 이름은 XAML에서 별표(*)를 사용하여 이 기능을 지정한다는 사실 때문에 만들어졌습니다.
공간에 대한 제약 조건이 없는 경우 각 그룹은 모든 해당 컨트롤을 최대 크기로 표시합니다. 창이 축소되면 각 그룹은 해당 컨트롤의 작은 변형을 표시하도록 컨트롤 크기를 조정합니다. 각 그룹을 최소 컨트롤 변형에 표시하기에 충분한 공간이 없을 경우에는 그룹이 드롭다운 단추로 축소됩니다.
사용자 지정 크기 조정 동작 지정
복잡한 리본 레이아웃의 경우 일반적으로 리본 크기를 창에 맞춰 조정하는 방식을 정확하게 지정하려고 합니다. 컨트롤 수준, 그룹 수준 또는 탭 수준에서 크기 조정 동작을 지정할 수 있습니다. 특정 수준에서 사용자 지정 크기 조정 설정이 지정되어 있지 않으면 기본 동작이 사용됩니다.
다음 표에서는 여러 다른 수준에서 사용자 지정 크기 조정 설정을 지정하는 방법을 보여 줍니다.
수준 |
사용자 지정 크기 조정을 지정하는 방법 |
|---|---|
표시할 컨트롤의 크기를 지정하려면 ControlSizeDefinition 속성을 설정합니다. |
|
크기 조정할 때 사용되는 컨트롤 크기의 다양한 허용 가능한 조합을 지정하려면 GroupSizeDefinitions 속성을 설정합니다.. |
|
리본 그룹의 크기가 조정되는 순서를 지정하려면 GroupSizeReductionOrder 속성을 설정합니다. |
컨트롤 수준 크기 조정
리본 지침은 리본 컨트롤에 대한 세 가지 표준 크기 변형(대형, 중형 및 소형)을 지정합니다. 각 컨트롤에는 RibbonControlSizeDefinition 개체에 설정된 ControlSizeDefinition 속성이 있습니다. RibbonControlSizeDefinition 개체에는 큰 이미지를 표시할지 작은 이미지를 표시할지 지정하는 ImageSize 속성과 컨트롤의 레이블을 표시할지 여부를 지정하는 IsLabelVisible 속성이 있습니다.
다음 표에서는 세 가지 표준 컨트롤 크기에 대한 RibbonControlSizeDefinition 속성 설정을 보여 줍니다.
크기 |
설명 |
||
|---|---|---|---|
대형 |
큰 이미지 및 레이블에 대해 최대 두 줄이 포함되어 있습니다. |
true |
|
Medium |
작은 이미지 및 레이블에 대해 한 줄이 포함되어 있습니다. |
true |
|
소형 |
작은 이미지가 포함되어 있으며 레이블은 포함되어 있지 않습니다. |
false |
다음 예제에서는 대형, 중형 및 소형 컨트롤에 해당하는 세 개의 RibbonControlSizeDefinition 선언을 보여 줍니다.
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
컨트롤 그룹
관련 리본 컨트롤을 RibbonControlGroup에 함께 그룹화할 수 있습니다. 컨트롤 그룹의 크기를 조정하면 하나의 RibbonControlSizeDefinition이 RibbonControlGroup의 모든 컨트롤에 적용됩니다. RibbonControlGroup은 하나의 컨트롤인 것처럼 RibbonGroup에 배치됩니다.
그룹 수준 크기 조정
리본 크기를 조정하면 RibbonGroupItemsPanel의 기본 제공 논리, 사용자 지정 크기 조정 논리 또는 이 둘을 조합한 논리를 사용하여 탭의 그룹 크기가 조정됩니다. 기본적으로 RibbonGroupItemsPanel은 사용 가능한 공간에 맞출 수 있는 허용 가능한 가장 큰 컨트롤 변형을 표시하도록 그룹의 컨트롤 크기를 조정합니다. 지정한 경우 탭의 그룹 크기는 그룹 크기의 조정 순서를 지정하는 GroupSizeReductionOrder와 그룹에 사용할 수 있는 다양한 크기 구성을 지정하는 RibbonGroup.GroupSizeDefinitions 속성의 조합을 사용하여 조정됩니다.
다음 예제에서는 앞에 나와 있는 클립보드 그룹의 GroupSizeDefinitions를 보여 줍니다.
<ribbon:RibbonGroup.GroupSizeDefinitions>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="True" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonControlSizeDefinition ImageSize="Large" IsLabelVisible="True" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
<ribbon:RibbonControlSizeDefinition ImageSize="Small" IsLabelVisible="False" />
</ribbon:RibbonGroupSizeDefinition>
<ribbon:RibbonGroupSizeDefinition IsCollapsed="True" />
</ribbon:RibbonGroup.GroupSizeDefinitions>
GroupSizeDefinitions 속성에는 RibbonGroupSizeDefinition 개체의 컬렉션이 포함되어 있으며, 각 컬렉션은 그룹에 사용할 수 있는 하나의 구성을 지정합니다. 리본 크기를 조정하면 ItemsPanel은 사용 가능한 공간에 모든 컨트롤을 맞추기 위해 사용할 RibbonGroupSizeDefinition을 결정합니다. 그런 다음 선택한 RibbonGroupSizeDefinition에서 RibbonControlSizeDefinition 개체에 의해 지정된 대로 컨트롤 크기를 지정합니다. 컨트롤 크기 정의는 그룹의 컨트롤에 순차적으로 적용됩니다.
리본 지침에서는 모든 그룹이 미리 정의된 크기 변형을 최소 두 개(큰 변형 및 축소된 변형) 이상 지정해야 한다고 설명합니다. RibbonGroup이 더 이상 컨트롤을 사용 가능한 크기로 맞출 수 없는 경우 그룹이 드롭다운으로 축소됩니다. 그룹이 축소되면 드롭다운을 열 때 지정된 최대 변형이 표시됩니다. 앞에 표시된 세 번째 그림에서 클립보드 그룹이 축소되고 최대 변형이 드롭다운에 표시됩니다.
그룹 크기를 축소된 드롭다운으로 조정해야 하도록 지정하려면 IsCollapsed 속성을 true로 설정합니다. 축소된 그룹은 열릴 때 항상 최대 변형을 표시하므로 IsCollapsed 속성을 설정할 때 RibbonControlSizeDefinition 개체의 컬렉션을 지정하지 마십시오. RibbonControlSizeDefinition 컬렉션을 지정한 경우 IsCollapsed 속성이 무시됩니다.
예제의 GroupSizeDefinitions는 앞에 표시된 그림에서 볼 수 있습니다.
앞에 표시된 첫 번째 그림에서 첫 번째 RibbonGroupSizeDefinition은 클립보드 그룹에 적용됩니다. 세 개의 RibbonControlSizeDefinition 개체는 세 개의 단추에 순서대로 적용되고 단추 크기를 대형, 중형 및 중형으로 지정합니다.
두 번째 그림에서는 창에 사용 가능한 공간이 적으므로 두 번째 RibbonGroupSizeDefinition이 클립보드 그룹에 적용됩니다. RibbonControlSizeDefinition 개체는 단추 크기를 대형, 소형 및 소형으로 지정합니다.
세 번째 그림에서는 마지막 RibbonGroupSizeDefinition이 적용됩니다. 이 개체는 컨트롤 크기를 지정하지 않고 그룹이 축소되도록 지정합니다.
사용자 지정 ItemsPanel을 사용하여 그룹 수준 크기 조정
기본 크기 조정을 사용하거나 GroupSizeDefinitions를 지정하여 원하는 레이아웃을 얻을 수 없는 경우 기본 ItemsPanel을 사용자 지정 패널로 바꿀 수 있습니다. 예를 들어 앞에 나온 글꼴 그룹에는 여러 개의 단추 그룹이 포함되어 있고 각 단추 그룹은 RibbonControlGroup에 포함되어 있습니다. 앞에서 설명했듯이 RibbonControlGroup은 단일 컨트롤인 것처럼 RibbonGroup에 배치됩니다. 따라서 글꼴 그룹은 기본 패널을 사용한 유용한 방식으로 크기가 조정되지 않습니다. 표시된 레이아웃을 얻기 위해 기본 RibbonGroupItemsPanel을 표준 WrapPanel로 바꾸었습니다.
다음 예제에서는 WrapPanel을 RibbonGroup의 ItemsPanel로 사용하는 방법을 보여 줍니다.
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
<ribbon:RibbonGroup.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" MaxWidth="300" />
</ItemsPanelTemplate>
</ribbon:RibbonGroup.ItemsPanel>
…
<!-- Ribbon Group Content -->
…
</ribbon:RibbonGroup>
탭 수준 크기 조정
탭 수준 크기 조정을 지정하려면 RibbonTab.GroupSizeReductionOrder를 설정하여 그룹에서 크기를 변경하는 순서를 지정합니다. GroupSizeReductionOrder를 지정하려면 각 RibbonGroup의 Name 속성이 고유 값으로 설정되어 있어야 합니다. 그룹 이름을 축소 순서 목록에 추가하여 축소 순서를 지정합니다.
다음 예제에서는 앞의 그림에 표시된 홈 탭의 GroupSizeReductionOrder를 설정하는 방법을 보여 줍니다.
<ribbon:RibbonTab Header="Home"
GroupSizeReductionOrder="Clipboard, Insert, Insert, Paragraph, Clipboard, Editing, Font, Clipboard" >
<ribbon:RibbonGroup Header="Clipboard" Name="Clipboard" SmallImageSource="Images/Paste16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Font" Name="Font" SmallImageSource="Images\FontColor16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Paragraph" Name="Paragraph" SmallImageSource="Images/AlignLeft16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Insert" Name="Insert" SmallImageSource="Images/InsertPicture16.png">
...
</ribbon:RibbonGroup>
<ribbon:RibbonGroup Header="Editing" Name="Editing" SmallImageSource="Images/Find16.png">
...
</ribbon:RibbonGroup>
</ribbon:RibbonTab>
첫 번째 그림에서는 최대 크기 변형을 사용하여 각 그룹을 배치할 수 있도록 리본에 충분한 공간이 있습니다. 두 번째 그림에서는 창이 작아질수록 GroupSizeReductionOrder, 클립보드 및 삽입에 지정된 처음 두 그룹이 작은 변형으로 표시됩니다. 세 번째 그림에서는 삽입 그룹이 다시 축소되고 단락 그룹이 축소되고 클립보드 그룹이 다시 축소되었습니다.
RibbonTab의 기본 ItemsPanel은 RibbonGroupsPanel입니다. 이 패널은 기본 또는 사용자 지정 크기 축소 순서에 따라 탭의 그룹에 대한 레이아웃 및 사용 가능한 크기를 결정합니다.
GroupSizeReductionOrder 컬렉션에 포함되어 있는 이름이 탭의 그룹 중 하나에 나타나지 않으면 해당 이름은 무시됩니다. 그룹 이름이 그룹에 대한 크기 변형 개수보다 더 여러 번 컬렉션에 나타나면 그룹 크기가 최소 변형으로 조정되고 그룹이 컬렉션에 추가적으로 나타나는 횟수는 무시됩니다. GroupSizeReductionOrder 컬렉션에 나열되지 않는 그룹은 모두 모든 사용자 지정 축소가 발생한 후에 오른쪽에서 왼쪽으로, 하나씩, 순환 순서로 축소됩니다. 즉, 기본적으로 GroupSizeReductionOrder에 아무 것도 지정되지 않은 경우 각 그룹은 오른쪽에서 왼쪽으로, 하나씩, 순환 순서로 축소됩니다. 오른쪽에서 왼쪽으로 배치되는 지역화된 문화권에서는 이 크기 조정 순서가 반대로 바뀝니다.