다음을 통해 공유

Elevation 제어

  • 아티클

카드 및 플라이아웃 메뉴를 구성하는 데 사용되는 컨트롤입니다.

Elevation 컨트롤.

Description

Elevation 앱에 경험에 초점을 맞추고 물리적인 물질성을 추가하는 데 사용됩니다. 얕은 수준은 타일과 같이 캔버스 또는 보기에 밀접하게 연결된 항목에 대해 예약되어 있습니다. 더 깊은 수준은 표면 주위에 눈에 띄는 프레임을 만들어 대화와 같은 독립적인 경험에 강한 초점을 그립니다. 마우스 오버 이벤트를 지원합니다.

모범 사례를 보려면 유창한 UI Elevation 스타일 페이지로 이동하세요.

속성

키 속성

Property Description
Depth 그림자의 깊이입니다.
HoverDepth 마우스 오버 시 나타나는 그림자 깊이입니다.

스타일 속성

Property Description
FillColor Elevation 컨트롤의 배경색입니다.
HoverFillColor 마우스 오버 시 나타나는 Elevation 컨트롤의 배경색입니다.
PaddingLeft 카드와 컨트롤 경계 사이의 왼쪽 가장자리 간격
PaddingRight 카드와 컨트롤 경계 사이의 오른쪽 가장자리 간격
PaddingTop 카드와 컨트롤 경계 사이의 상단 가장자리 간격
PaddingBottom 카드와 컨트롤 경계 사이의 하단 가장자리 간격
DarkOverlay 활성화되면 패딩 영역에 어두운 오버레이 효과를 표시합니다.

레이아웃 컨테이너를 사용하여 Elevation 위에 콘텐츠 서식 지정

  1. Container 컨트롤을 화면에 추가합니다(Horizontal container 또는 Vertical container 아님).

  2. 컨테이너에 Elevation 구성 요소 추가

  3. 부모 Container:에 맞게 Elevation 속성을 설정합니다.

    Property 값
    X 0
    Y 0
    Width Parent.Width
    Height Parent.Height

  4. PaddingRight, PaddingTop 및 PaddingBottom 속성을 Self.PaddingLeft를 참조하도록 설정

  5. 원하는 Depth를 선택하고 PaddingLeft 값을 조정하여 그림자가 잘리지 않도록 충분한 간격을 제공합니다.

  6. Vertical container를 동일한 부모 Container에 삽입합니다. 이것은 카드의 콘텐츠를 호스팅하는 데 사용됩니다.

  7. Vertical container 속성을 설정하여 Elevation 구성 요소의 가장자리에 시각적으로 맞춥니다.

    Property 값
    X Elevation.PaddingLeft
    Y Elevation.PaddingLeft
    Width Parent.Width - Elevation.PaddingLeft * 2
    Height Parent.Height - Elevation.PaddingLeft * 2

  8. Vertical container에 콘텐츠를 추가하여 카드를 채웁니다.

Elevation 예.

제한 사항

이 코드 구성 요소는 캔버스 앱 및 사용자 정의 페이지에서만 사용할 수 있습니다.