Windows 앱의 그림자

Windows 앱은 그림자를 사용하여 깊이를 표현하고 시각적 계층 구조를 추가합니다. 그림자는 상승 모양을 만들어 사용자의 포커스를 UI에서 가장 중요한 요소로 안내하는 데 도움이 됩니다.

그림자는 사용자가 고도를 인식하는 한 가지 방법입니다. 높이 있는 물체 위의 빛은 아래 표면에 그림자를 만듭니다. 개체가 높을수록 그림자가 더 크고 부드러워집니다. UI의 상승된 개체에는 그림자가 필요하지 않지만 상승 모양을 만드는 데 도움이 됩니다.

Windows 앱에서는 그림자를 미적 방식이 아닌 의도적으로 사용해야 합니다. 너무 많은 그림자를 사용하면 사용자에게 초점을 맞추는 그림자의 기능이 감소하거나 제거됩니다.

표준 컨트롤을 사용하는 경우 그림자는 이미 UI에 통합되어 있습니다. 그러나 ThemeShadow 또는 DropShadow API를 사용하여 UI에 그림자를 수동으로 포함할 수 있습니다.

테마섀도우

XAML 요소에 ThemeShadow 형식을 적용하여 x, y, z 좌표에 따라 그림자를 적절하게 그릴 수 있습니다.

• z-depth 값을 기반으로 요소에 그림자를 적용하여 깊이를 모방합니다.
• 그림자 미학이 내장되어 있어 응용 프로그램 전체에서 그림자를 일관되게 유지합니다.

MenuFlyout에서 ThemeShadow가 구현된 방법은 다음과 같습니다. MenuFlyout에는 기본 메뉴 및 모든 중첩 메뉴에 적용된 깊이가 32px인 기본 제공 그림자가 있습니다.

WinUI 갤러리 앱을 열고 작동 중인 ThemeShadow를 확인합니다.

공통 컨트롤의 ThemeShadow

다음 일반 컨트롤은 달리 지정하지 않는 한 ThemeShadow를 사용하여 32px 깊이의 그림자를 자동으로 캐스팅합니다.

• 상황에 맞는 메뉴, 명령 모음, 명령 모음 플라이아웃, MenuBar
• 대화 상자 및 플라이아웃 (128px의 대화 상자)
• 내비게이션뷰
• ComboBox, 드롭다운 버튼, 스플릿 버튼, 토글 스플릿 버튼
• TeachingTip
• 자동 제안 상자
• 일정/날짜/시간 선택기
• 툴팁 (16px)
• 숫자 상자
• 탭뷰
• 미디어 전송 제어, InkToolbar
• BreadcrumbBar
• 연결된 애니메이션

팝업의 ThemeShadow

앱의 UI가 사용자의 주의와 빠른 작업이 필요한 시나리오에 팝업을 사용하는 경우가 많습니다. 다음은 앱의 UI에서 계층 구조를 만드는 데 그림자를 사용해야 하는 경우의 좋은 예입니다.

Popup의 XAML 요소에 적용할 때 ThemeShadow는 자동으로 그림자를 캐스팅합니다. 앱의 배경 콘텐츠 위에 그림자를 드리우고, 그 아래에 열려 있는 다른 팝업에도 그림자를 드리우게 됩니다.

Popup과 함께 ThemeShadow를 사용하려면 이 속성을 사용하여 Shadow XAML 요소에 ThemeShadow를 적용합니다. 그런 다음, Translation 속성의 z 구성 요소를 사용하여 요소를 뒤에 있는 다른 요소 위로 올리십시오. 대부분의 팝업 UI의 경우, 앱 배경 콘텐츠에 비해 권장되는 기본 높이는 32픽셀입니다.

이 예제는 팝업에서 앱 배경 콘텐츠와 그 뒤에 있는 다른 팝업 위로 그림자를 드리우는 사각형을 보여줍니다.

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

사용자 지정 플라이아웃 컨트롤에서 기본 ThemeShadow 비활성화

플라이아웃, DatePickerFlyout, MenuFlyout 또는 TimePickerFlyout을 기반으로 하는 컨트롤은 자동으로 ThemeShadow를 사용하여 그림자를 캐스팅합니다.

컨트롤의 콘텐츠에서 기본 그림자가 올바르지 않으면 IsDefaultShadowEnabled 속성을 false 연결된 FlyoutPresenter로 설정하여 사용하지 않도록 설정할 수 있습니다.

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

다른 요소의 ThemeShadow

비고

Windows 11 시작하여 앱이 Windows SDK 버전 22000 이상을 대상으로 하는 경우 Receivers 컬렉션은 무시됩니다. 그러나 오류가 없고 그림자가 계속 작동합니다.

일반적으로 그림자 사용에 대해 신중하게 생각하고 의미 있는 시각적 계층 구조를 도입하는 경우로 사용을 제한하는 것이 좋습니다. 그러나 필요한 고급 시나리오가 있는 경우 UI 요소에서 그림자를 캐스팅하는 방법을 제공합니다.

팝업에 없는 XAML 요소에서 그림자를 캐스팅하려면 컬렉션의 그림자 ThemeShadow.Receivers 를 받을 수 있는 다른 요소를 명시적으로 지정해야 합니다. 수신기는 시각적 트리에서 캐스터의 선조가 될 수 없습니다.

이 예제에서는 그림자를 뒤에 있는 그리드에 캐스팅하는 두 개의 사각형을 보여 줍니다.

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

드롭 섀도우

DropShadow는 기본 제공 그림자 값을 제공하지 않으며 직접 지정해야 합니다. 예제 구현은 DropShadow 클래스를 참조하세요.

팁 (조언)

Windows 11 시작하여 앱이 Windows SDK 버전 22000 이상을 대상으로 하는 경우 ThemeShadow는 그림자처럼 동작합니다. DropShadow를 사용하는 경우 ThemeShadow를 대신 사용하는 것이 좋습니다.

어떤 그림자를 사용해야 하나요?

재산	테마섀도우	DropShadow
최소 SDK	SDK 18362	SDK 14393
적응성	네	아니오
맞춤 설정	아니오	네
광원	None	None
3D 환경에서 지원됨	예(3D 환경에서는 작동하지만 그림자는 에뮬레이트됩니다.)	아니오

• 그림자의 목적은 단순한 시각적 처리가 아니라 의미 있는 계층 구조를 제공하는 것입니다.
• 일반적으로 일관된 그림자 값을 제공하는 ThemeShadow를 사용하는 것이 좋습니다.
• 성능에 대한 우려는 그림자 수를 제한하거나, 다른 시각적 처리를 사용하거나, DropShadow를 사용합니다.
• 시각적 계층 구조를 달성하기 위한 고급 시나리오가 있는 경우 다른 시각적 처리(예: 색)를 사용하는 것이 좋습니다. 그림자가 필요한 경우 DropShadow를 사용합니다.

관련된 문서

• Windows에서의 권한 상승 및 계층화
• 재질(아크릴/니카)