Personnaliser la zone d’en-tête du widget

Les applications qui implémentent Windows widgets peuvent personnaliser l’en-tête affiché pour leur widget dans le panneau Widgets, en remplaçant la présentation par défaut. La personnalisation de l’en-tête est implémentée dans la charge utile de carte adaptative que vous transmettez au système d’exploitation à partir de votre fournisseur de widgets. Les étapes sont donc identiques, quel que soit le langage dans lequel votre fournisseur de widgets est implémenté. Pour obtenir une procédure pas à pas de création d’un fournisseur de widgets, consultez Implémenter un fournisseur de widgets dans une application Windows C# ou Implémenter un fournisseur de widgets dans une application Win32 (C++/WinRT).

La personnalisation de l’en-tête dépend de la prise en charge de l’hôte. La propriété de modèle $host.isHeaderSupported indique si l’hôte le prend en charge ; consultez propriétés de l’hôte du widget Windows. Le champ header est une extension de widget Windows à la charge utile de la carte. Validez sa présentation dans le panneau Widgets, pas seulement dans le Concepteur de Cartes adaptatives à usage général.

En-tête par défaut

Par défaut, l’en-tête du widget affiche le nom d’affichage et l’icône spécifiée dans le fichier manifeste de l’application. Le nom d’affichage est spécifié avec l’attribut DisplayName de l’élément Definition et l’icône est spécifiée avec un élément Icon sous ThemeResources. Pour plus d’informations sur le format de fichier manifeste de l’application widget, consultez format XML du manifeste de package du fournisseur de widgets.

L’exemple suivant montre une partie de la charge utile JSON de carte adaptative pour un widget qui utilise la présentation par défaut. Dans les sections ci-dessous, des exemples seront fournis pour modifier ce modèle afin de remplacer l’en-tête par défaut.

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

Remplacer la chaîne du nom d'affichage

Vous pouvez remplacer la valeur spécifiée par l’attribut DisplayName dans le manifeste de l’application en ajoutant un header champ avec le nouveau nom d’affichage à la charge utile JSON avant de l’envoyer à l’hôte du widget.

L’exemple suivant illustre la substitution de la chaîne du nom d'affichage.

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

Modifier la chaîne du nom d’affichage et l’icône

Pour remplacer la chaîne de nom d’affichage et l’icône spécifiée dans le manifeste de l’application, ajoutez un objet header avec des champs pour text et iconUrl.

L’exemple suivant illustre la substitution de la chaîne du nom d'affichage et de l’icône.

{ 
    "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" 
      } 
  } 

Mettre l'en-tête à vide

Certains fournisseurs de widgets peuvent souhaiter permettre à leur expérience utilisateur complète de se développer dans la région d’en-tête du widget, même si cette zone du widget n’est pas exploitable. Pour ce scénario, vous pouvez laisser l’en-tête vide en définissant le champ header à null. Notez que l’expérience utilisateur dans l’en-tête n’est pas cliquable par l’utilisateur.

L’exemple suivant illustre la définition d’un en-tête vide.

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