위젯 헤더 영역 사용자 지정

Windows 위젯을 구현하는 앱은 위젯 보드의 위젯에 대해 표시되는 헤더를 사용자 지정하여 기본 프레젠테이션을 재정의할 수 있습니다. 헤더 사용자 지정은 위젯 공급자에서 OS에 전달하는 적응형 카드 페이로드에서 구현되므로 위젯 공급자가 구현되는 언어에 관계없이 단계가 동일합니다. 위젯 공급자를 만드는 연습은 C# Windows 앱에서 위젯 공급자 구현 또는 win32 앱에서 위젯 공급자 구현(C++/WinRT)을 참조하세요.

헤더 사용자 지정은 호스트 지원에 따라 달라집니다. $host.isHeaderSupported 템플릿 속성은 호스트가 이를 지원하는지 여부를 나타냅니다. Windows 위젯 호스트 속성을 참조하세요. header 필드는 카드 페이로드에 대한 Windows 위젯 확장입니다. 범용 적응형 카드 디자이너뿐만 아니라 위젯 보드에서의 표시도 검증합니다.

기본 헤더

기본적으로 위젯 헤더는 앱 매니페스트 파일에 지정된 표시 이름과 아이콘을 표시합니다. 표시 이름은 Definition 요소의 DisplayName 특성으로 지정되고 아이콘은 ThemeResources 아래에 Icon 요소로 지정됩니다. 위젯 앱 매니페스트 파일 형식에 대한 자세한 내용은 위젯 공급자 패키지 매니페스트 XML 형식을 참조하세요.

다음 예제에서는 기본 프레젠테이션을 사용하는 위젯에 대한 적응형 카드 JSON 페이로드의 일부를 보여줍니다. 아래 섹션에서는 기본 헤더를 재정의하도록 이 템플릿을 수정하는 예제가 제공됩니다.

{ 
    "type": "AdaptiveCard", 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", 
    "version": "1.6", 
    "body": [
        { "type": "TextBlock", "text": "Weather for Redmond" }
    ] 
  } 

표시 이름 문자열 재정의

위젯 호스트로 보내기 전에 새 표시 이름이 포함된 필드를 JSON 페이로드에 추가하여 앱 매니페스트의 header 특성에 지정된 값을 재정의할 수 있습니다.

다음 예제에서는 표시 이름 문자열을 재정의하는 방법을 보여 줍니다.

{ 
    "type": "AdaptiveCard", 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", 
    "version": "1.6", 
    "body": [
        { "type": "TextBlock", "text": "Weather for Redmond" }
    ] ,
    "header": "Redmond Weather"
  } 

표시 이름 문자열 및 아이콘 재정의

앱 매니페스트에 지정된 표시 이름 문자열과 아이콘을 모두 재정의하려면 header 개체에 text 및 iconUrl 필드를 추가합니다.

다음 예제에서는 표시 이름 문자열 및 아이콘을 재정의하는 방법을 보여 줍니다.

{ 
    "type": "AdaptiveCard", 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", 
    "version": "1.6", 
    "body": [
        { "type": "TextBlock", "text": "Weather for Redmond" }
    ] ,
    "header": { 
         "text": "Redmond weather", 
         "iconUrl": "https://contoso.com/weatherimage.png" 
      } 
  } 

헤더를 비워 두도록 설정

일부 위젯 공급자는 위젯의 이 영역이 실행 가능하지 않더라도 전체 UX가 위젯의 헤더 영역으로 확장되도록 허용할 수 있습니다. 이 시나리오에서는 필드를 header.로 설정 null 하여 헤더를 비워 둘 수 있습니다. 헤더의 UX는 사용자가 클릭할 수 없습니다.

다음 예제에서는 빈 헤더를 설정하는 방법을 보여 줍니다.

{ 
    "type": "AdaptiveCard", 
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", 
    "version": "1.6", 
    "body": [
        { "type": "TextBlock", "text": "Weather for Redmond" }
    ] ,
    "header": null
}