다음을 통해 공유

모서리 반경

  • 아티클

WinUI 버전 2.2부터많은 컨트롤의 기본 스타일이 둥근 모서리를 사용하도록 업데이트되었습니다. 이러한 새 스타일은 따뜻함과 신뢰감을 주기 위한 것으로, 사용자가 UI를 시각적으로 처리하기 쉽습니다.

다음은 두 가지의 Button 컨트롤입니다. 첫 번째는 모서리가 둥글지 않은 경우이며, 두 번째는 둥근 모서리 스타일을 사용합니다.

둥근 모퉁이가 있는 단추와 없는 단추

WinUI는 WinUI 및 플랫폼 컨트롤 모두에 대해 업데이트된 스타일을 제공합니다. 둥근 모서리를 사용자 지정하는 방법에 대한 자세한 내용은 사용자 지정 옵션을 참조하세요.

중요

일부 컨트롤은 플랫폼(Windows.UI.Xaml.Controls) 및 WinUI(Microsoft.UI.Xaml.Controls)에서 모두 사용할 수 있습니다(예: TreeView 또는 ColorPicker). 앱에서 WinUI를 사용하는 경우 컨트롤의 WinUI 버전을 사용해야 합니다. WinUI와 함께 사용하는 경우 모서리를 둥글게 조정하는 작업은 플랫폼 버전에서 일관되지 않게 적용될 수 있습니다.

중요 API: Control.CornerRadius 속성

기본 컨트롤 디자인

둥근 모서리 스타일을 사용하는 컨트롤에는 사각형 요소, 플라이아웃 요소 및 바 요소의 세 가지 영역이 있습니다.

사각형 UI 요소의 모서리

  • 이러한 UI 요소에는 사용자에게 화면에서 항상 표시되는 버튼과 같은 기본 컨트롤이 포함됩니다.
  • 이러한 UI 요소에 사용되는 기본 반경 값은 4px입니다.

둥근 모퉁이가 강조 표시된 단추

제어

  • AutoSuggestBox
  • Buttons
    • ContentDialog 버튼
  • CalendarDatePicker
  • 체크 박스
    • TreeView, GridView, 및 ListView 다중 선택 체크 박스
  • 색상 선택기
  • CommandBar
  • ComboBox
  • DatePicker
  • DropDownButton
  • Expander
  • FlipView
  • GridView 및 ListView
    • AutoSuggestBox, ComboBox, DatePicker, MenuBar, NavigationView, TimePicker, TreeView 목록
  • InfoBar
  • Inking 컨트롤
  • 미디어 재생
  • MenuBar
  • NumberBox
  • PasswordBox
  • RichEditBox
  • SplitButton
  • TextBox
  • TimePicker
  • ToggleButton
  • ToggleSplitButton

플라이아웃 및 오버레이 UI 요소 모서리

  • 이러한 요소는 MenuFlyout과 같이 일시적으로 화면에 나타나는 일시적 UI 요소이거나 TabView 탭과 같은 다른 UI를 오버레이하는 요소일 수 있습니다.
  • 이러한 UI 요소에 사용되는 기본 반경 값은 8px입니다.

플라이아웃 예제

제어

  • CommandBarFlyout
  • ContentDialog
  • Flyout
  • MenuFlyout
  • TabView 탭
  • TeachingTip
  • 도구 팁(작은 크기로 인해 반경 4px 사용)
  • 플라이아웃 부분(열려 있는 경우)
    • AutoSuggestBox
    • CalendarDatePicker
    • ComboBox
    • DatePicker
    • DropDownButton
    • Inking 컨트롤
    • MenuBar
    • NumberBox
    • SplitButton
    • TimePicker
    • ToggleSplitButton

바 요소

  • 이러한 UI 요소는 막대나 선처럼 모양이 지정됩니다(예: 진행 표시 바).
  • 여기서 사용하는 기본 반경 값은 4px입니다.

진행률 표시줄 예제

제어

  • NavigationView 선택 표시기
  • ProgressBar
  • ScrollBar
  • Slider
    • ColorPicker 색 슬라이더
    • MediaTransportControls 검색 바 슬라이더

사용자 지정 옵션

제공되는 기본 모서리 반경 값은 고정되어 있지 않으며, 몇 가지 방법으로 모서리의 둥근 정도를 쉽게 수정할 수 있습니다. 이렇게 하려면 두 개의 글로벌 리소스를 통하거나, 원하는 사용자 지정 세분화 수준에 따라 컨트롤에서 직접 CornerRadius 속성을 통해 수행할 수 있습니다.

둥글게 하지 않는 경우

어떤 인스턴스는 컨트롤의 모서리를 둥글게 하지 않아야 합니다. 이 경우 기본적으로 둥글게 되어 있지 않습니다.

  • 분할 버튼의 두 부분처럼 컨테이너 내에 있는 여러 UI 요소가 서로 닿아있는 경우입니다. 닿은 곳에 공간이 없어야 합니다.

SplitButton

  • 플라이아웃 UI 요소의 한 쪽이 플라이아웃을 호출하는 UI에 연결된 경우입니다.

일부 모서리가 둥글지 않은 AutoSuggest 플라이아웃의 스크린샷.

페이지 또는 앱 전체 모서리 반경 변경 사항

모든 컨트롤의 모서리 반경을 제어하는 두 가지 앱 리소스가 있습니다.

  • ControlCornerRadius - 기본값은 4px입니다.
  • OverlayCornerRadius - 기본값은 8px입니다.

어느 범위에서든 이러한 리소스의 값을 재정의하면 그에 따라 해당 범위 내의 모든 컨트롤에 영향을 미칩니다.

즉, 원형을 적용할 수 있는 모든 컨트롤의 원형을 변경하려면 다음과 같이 새 모서리 반경 값을 사용하여 두 리소스를 앱 수준에서 정의할 수 있습니다.

<Application
    xmlns=”http://schemas.microsoft.com/winfx/2006/xamlpresentation”
    xmlns:x=”http://schemas.micosoft.com/winfx/2006/xaml”
    xmlns:control=”using:Microsoft.UI.Xaml.Controls”>
    <Application.Resources>
      <controls:XamlControlsResources>
        <controls:XamlControlsResources.MergedDictionaries>
          <ResourceDictionary>
            <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
          </ResourceDictionary>
        </controls:XamlControlsResources.MergedDictionaries>
      </controls:XamlControlsResources>
    </Application.Resources>
</Application>

또는 페이지나 컨테이너 수준과 같이 특정 범위 내에서 모든 컨트롤의 원형을 변경하려는 경우에는 다음과 같이 유사한 패턴을 따를 수 있습니다.

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

참고

OverlayCornerRadius 리소스를 적용하기 위해서는 앱 수준에서 정의되어야 합니다.

이는 팝업 및 플라이아웃이 페이지의 시각적 개체 트리에 있지 않기 때문에 팝업 루트에 추가됩니다. 리소스 해상도 시스템이 팝업 루트 시각적 트리를 페이지의 시각적 개체 트리로 제대로 트래버스하지 않습니다.

컨트롤 기준 모서리 반경 변경 사항

컨트롤의 선택 번호에 대해서만 원형을 변경하려는 경우 컨트롤의 CornerRadius 속성을 직접 수정할 수 있습니다.

기본값 수정된 속성
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

모든 컨트롤의 모서리가 수정된 CornerRadius 속성에 응답하는 것은 아닙니다. 모서리를 둥글게 만들려는 컨트롤이 실제로 예상한 대로 CornerRadius 속성에 응답하도록 하려면 먼저 ControlCornerRadius 또는 OverlayCornerRadius 글로벌 리소스가 해당 컨트롤에 영향을 미치는지 확인해야 합니다. 영향을 미치지 않는 경우 둥글게 만들려는 컨트롤에 모서리가 있는지 확인합니다. 대부분의 컨트롤은 실제 에지를 렌더링하지 않으므로 CornerRadius 속성을 제대로 사용할 수 없습니다.

WinUI 기반 사용자 지정 스타일

스타일에 올바른 BasedOn 특성을 지정하여 WinUI 둥근 모서리 스타일을 기준으로 사용자 지정 스타일을 만들 수 있습니다. 예를 들어, WinUI 버튼 스타일을 기준으로 사용자 지정 버튼 스타일을 만들려면 다음을 수행합니다.

<Style x:Key="MyCustomButtonStyle" BasedOn="{StaticResource DefaultButtonStyle}">
   ...
</Style>

일반적으로 WinUI 컨트롤 스타일은 일관된 명명 규칙인 'DefaultXYZStyle'을 따릅니다. 여기서 'XYZ'는 컨트롤의 이름입니다. 전체 내용을 참조하려면 WinUI 리포지토리에서 XAML 파일을 찾아볼 수 있습니다.