애플리케이션 내에서 카드 렌더링

아티클
08/29/2023

애플리케이션 내에서 적응형 카드를 쉽게 렌더링할 수 있습니다. 모든 일반적인 플랫폼용 SDK를 제공하며 고유한 적응형 카드 렌더러를 만드는 데 필요한 자세한 사양을 제공합니다.

렌더러 SDK 설치 - 대상 플랫폼에 해당합니다.
렌더러 인스턴스 만들기 - 앱 스타일, 규칙 및 작업 이벤트 처리기를 사용하여 구성됩니다.
카드를 네이티브 UI로 렌더링 - 자동으로 앱에 맞게 스타일이 지정됩니다.

적응형 카드 SDK

플랫폼	빌드	Docs
JavaScript	원본	문서
.NET WPF	원본	문서
.NET HTML	원본	문서
Windows UWP	원본	문서
WinUI 3	원본	문서
Android	원본	문서
iOS	원본	문서

렌더러 인스턴스 만들기

다음 단계는 AdaptiveCardRenderer 인스턴스를 만드는 것입니다.

작업 이벤트 연결

기본적으로 작업은 카드에 단추로 렌더링되지만 앱에서 사용자가 원하는 대로 작동하도록 설정할 수 있습니다. 각 SDK에는 처리해야 하는 OnAction 이벤트에 해당하는 항목이 있습니다.

Action.OpenUrl - 지정된 url을 엽니다.
Action.Submit - 제출 결과를 가져오고 원본으로 보냅니다. 카드 원본으로 보내는 방법은 사용자가 결정할 수 있습니다.
Action.ShowCard - 대화 상자를 호출하고 해당 대화 상자에 하위 카드를 렌더링합니다. ShowCardActionMode가 popup으로 설정되는 경우에만 이 항목을 처리해야 합니다.

카드 렌더링

카드 페이로드를 얻은 후 렌더러를 호출하고 카드에 전달하세요. 그러면 카드 콘텐츠로 구성된 네이티브 UI 개체를 다시 얻게 됩니다. 이제 이 UI를 앱 내에 배치합니다.

사용자 지정

렌더링되는 항목을 사용자 지정할 수 있는 여러 가지 방법이 있습니다.

HostConfig

HostConfig는 앱 내에서 카드의 기본 스타일과 동작을 제어하는 플랫폼 간 공유 구성 개체입니다. 글꼴 크기, 요소 간의 간격, 색, 지원되는 작업 수 등의 항목을 정의합니다.

네이티브 플랫폼 스타일 지정

대부분의 UI 프레임워크에서는 네이티브 UI 프레임워크 스타일을 사용하여 렌더링된 카드의 스타일을 지정할 수 있습니다. 예를 들어 HTML에서는 HTML의 CSS 클래스를 지정할 수 있고, XAML에서는 출력을 세밀하게 제어하기 위한 사용자 지정 ResourceDictionary에 전달할 수 있습니다.

요소별 렌더링 사용자 지정

각 SDK를 사용하여 요소의 렌더링을 재정의하거나, 사용자가 정의하는 완전히 새로운 요소의 지원을 추가할 수도 있습니다. 예를 들어 렌더러의 나머지 출력을 계속 유지하면서 고유한 사용자 지정 컨트롤을 내보내도록 Input.Date 렌더러를 변경할 수 있습니다. 또는 사용자가 정의한 사용자 지정 Rating 요소의 지원을 추가할 수 있습니다.

다음을 통해 공유