Windows Dev Center

Langage: HTML | XAML

Démarrage rapide : définition des dispositions (XAML)

Lorsque vous créez une application Windows Runtime en C++, C# ou Visual Basic, vous disposez d’un système de disposition souple permettant de l’adapter à plusieurs appareils et états d’application. Grâce à cette structure souple, vous pouvez valoriser votre application en modifiant son apparence à l’écran, notamment en variant les tailles de fenêtre d’application, les résolutions, les densités de pixels et les orientations. Nous expliquons comment concevoir une interface utilisateur qui s’ajuste automatiquement à diverses tailles.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Prérequis

Cette rubrique suppose que vous savez créer une application Windows Runtime élémentaire en C++, C# ou Visual Basic. Pour obtenir des instructions lors de la création de votre première application Windows Runtime, voir Génération de votre première application du Windows Store en C# ou Visual Basic.

Recommandations en matière d’interface utilisateur (meilleures pratiques)

Bien que cette rubrique vous présente certaines dispositions de base, il convient de garder à l’esprit un certain nombre de recommandations en matière d’interface utilisateur.

Vue d’ensemble de la disposition

La création d’une disposition consiste à dimensionner et positionner des objets au sein de l’interface utilisateur de votre application. Pour positionner des objets visuels, vous devez les placer dans un objet Panel ou tout autre objet conteneur. L’infrastructure XAML fournit diverses classes Panel, notamment Canvas, StackPanel et Grid, qui servent de conteneurs et vous permettent de positionner et d’organiser les éléments d’interface utilisateur.

Le système de disposition XAML prend en charge les dispositions fixes et les dispositions dynamiques. Dans une disposition fixe, les éléments sont dimensionnés et positionnés à l’aide de dimensions explicites. Par exemple, vous pouvez utiliser un panneau Canvas pour le positionnement fixe et vous pouvez définir une taille fixe sur un élément quel que soit le panneau de disposition qui le contient. Dans une disposition dynamique, l’interface utilisateur est dimensionnée automatiquement aux bonnes proportions (dans le cas de lignes et de colonnes Grid), selon le contenu des panneaux et contrôles ou selon différentes résolutions d’écran. Pour une disposition dynamique, utilisez par exemple un objet StackPanel, Grid ou VariableSizedWrapGrid.

Disposition fixe

Dans ce type de disposition, vous organisez les éléments enfants au sein d’un panneau de disposition en spécifiant leur emplacement et leur taille exacts par rapport à l’élément parent. Le positionnement fixe ne considère pas forcément que la taille de l’écran ou de la fenêtre d’application sera différente sur différents appareils. Si l’application nécessite le positionnement fixe des éléments de l’interface utilisateur, ainsi que l’adaptation à la taille de la fenêtre d’application, vous pouvez concevoir différentes pages pour différentes résolutions d’écran ou utiliser la mise à l’échelle comme solution.

Tous les panneaux dans l’infrastructure XAML prennent en charge le positionnement fixe, mais Canvas est un exemple de panneau qui prend uniquement en charge le positionnement fixe. Pour positionner un élément enfant dans un objet Canvas, définissez les propriétés jointes Canvas.Left et Canvas.Top de l’élément enfant. Avec le concepteur XAML de Microsoft Visual Studio, ces propriétés sont mises à jour quand vous faites glisser l’élément enfant dans Canvas sur l’aire de conception.

Disposition dynamique

Dans une disposition dynamique, l’interface utilisateur s’adapte aux diverses résolutions d’écran et tailles de fenêtre d’application. Vous disposez les éléments enfants en spécifiant comment ils sont organisés les uns par rapport aux autres et comment ils doivent être positionnées par rapport à leur contenu et/ou parent. Par exemple, vous pouvez organiser les éléments d’interface utilisateur d’un panneau et spécifier qu’ils doivent être renvoyés à la ligne horizontalement. Pour utiliser le redimensionnement proportionnel ou automatique, affectez des valeurs aux propriétés Height et Width. Voici les paramètres recommandés pour une disposition dynamique :

  • Affectez Auto à Height et Width des éléments d’interface utilisateur. Quand ces valeurs sont utilisées pour des éléments d’interface utilisateur dans la disposition Grid, le panneau Grid remplit la cellule qui le contient. Le redimensionnement Auto est pris en charge pour les éléments d’interface utilisateur en général, ainsi que pour les dispositions Grid et StackPanel.
  • Pour les éléments d’interface utilisateur qui contiennent du texte (éléments de texte), laissez les propriétés Height et Width non définies, puis définissez les propriétés MinWidth ou MinHeight. Cela empêche que le texte soit mis à l’échelle avec une taille illisible, car il est coupé par le conteneur de disposition.
  • Pour définir des valeurs proportionnelles pour les éléments RowDefinition et ColumnDefinition qui définissent la structure de cellule d’une disposition Grid, utilisez des valeurs relatives Height et Width. À titre d’exemple, dans une disposition à deux colonnes, pour spécifier qu’une colonne est cinq fois plus large que l’autre colonne, utilisez « * » et « 5* » pour les propriétés Width des éléments ColumnDefinition.

Dimensionnement auto et proportionnel

Le dimensionnement automatique permet aux contrôles de s’adapter à leur contenu, même si la taille de ce dernier est modifiée. Le dimensionnement proportionnel sert à répartir l’espace disponible entre les lignes et les colonnes d’une grille de manière proportionnelle. En langage XAML, les valeurs proportionnelles sont exprimées par * (ou n* pour le dimensionnement proportionnel pondéré). Par exemple, si la grille fait quatre colonnes, vous pouvez définir la largeur des colonnes selon les valeurs indiquées ici :

Colonne_1AutoLa taille de la colonne s’adaptera à son contenu.
Colonne_2*Une fois les colonnes Auto calculées, la colonne conserve une partie de la largeur restante. Colonne_2 sera deux fois moins large que Colonne_4.
Colonne_3AutoLa taille de la colonne s’adaptera à son contenu.
Colonne_42*Une fois les colonnes Auto calculées, la colonne conserve une partie de la largeur restante. Colonne_4 sera deux fois plus large que Colonne_2.

 

Contrôles de panneau

Les panneaux de disposition intégrés en XAML comportent le panneau Canvas pour la disposition fixe et plusieurs autres panneaux pour différentes techniques de disposition dynamique.

Zone de dessin

Le panneau Canvas positionne ses éléments enfants à l’aide de points de coordonnées fixes. Vous spécifiez les points des éléments enfants individuels en définissant les propriétés jointes Canvas.Left et Canvas.Top de chaque élément. Durant la disposition, l’objet parent Canvas utilise sa logique de classe pour lire les valeurs de propriétés jointes de ses enfants. Il se sert ensuite de ces valeurs pendant la passe de disposition Arrange.


<Canvas Background="Black">
  <Rectangle Canvas.Left="200" Canvas.Top="100"
    Fill="Red" Width="350" Height="350" />
</Canvas>

Le code XAML qui précède produit un résultat semblable à l’illustration suivante :

Exemple de structure

Avec le positionnement fixe, vous pouvez créer des chevauchements d’objets, où un objet est dessiné au-dessus d’un autre objet. Pour faciliter la modification de l’ordre de dessin des enfants, ainsi que pour permettre la modification de l’ordre de dessin au moment de l’exécution, Canvas prend également en charge Canvas.ZIndex. Propriété jointe que vous pouvez définir pour chacun des éléments enfants. La valeur Canvas.ZIndex la plus élevée est dessinée en dernier. Ainsi, elle est dessinée au-dessus des autres éléments qui partagent le même espace ou qui se chevauchent. Pour plus d’informations, voir Canvas.ZIndex. Notez que la valeur alpha (transparence) est respectée. Ainsi, même si des éléments se chevauchent, le contenu affiché dans les zones de chevauchement peut être fusionné si le contenu supérieur a une valeur alpha non maximale.

Utilisez le panneau Canvas en fonction de vos besoins. Bien qu’il soit pratique de pouvoir contrôler précisément les positions des éléments de l’interface utilisateur dans certains scénarios, un panneau de disposition positionné de manière fixe rend cette zone de l’interface utilisateur moins adaptable à l’ensemble des modifications de taille de fenêtre de l’application. Le redimensionnement des fenêtres d’application peut être dû au changement d’orientation de l’appareil, au fractionnement des fenêtres d’application, au changement de moniteur, ainsi qu’à plusieurs autres scénarios utilisateur.

StackPanel

Le panneau StackPanel est un simple panneau de disposition qui organise ses éléments enfants sur une seule ligne orientable horizontalement ou verticalement. Vous pouvez utiliser la propriété Orientation pour préciser l’orientation des éléments enfants. La valeur par défaut de Orientation est Vertical. Les contrôles StackPanel sont généralement utilisés quand vous souhaitez organiser une petite sous-section de l’interface utilisateur sur votre page.

Le code XAML suivant indique comment créer un empilement StackPanel vertical des éléments.


<StackPanel Margin="20">
  <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
  <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
</StackPanel>

Le code XAML qui précède produit un résultat semblable à l’illustration suivante :

Exemple de structure

L’imbrication de panneaux à l’aide de plusieurs StackPanel est une technique de disposition courante. Par exemple, vous pouvez créer un volet et une zone de contenu principal avec un StackPanel horizontal, et empiler les éléments du contenu principal avec un StackPanel vertical. Notez que si vous imbriquez les panneaux, les propriétés jointes des éléments d’interface utilisateur qui spécifient les caractéristiques de disposition pour un parent sont interprétées par le panneau parent le plus proche uniquement.

Grid

Le panneau Grid permet d’organiser des contrôles dans des dispositions constituées de plusieurs lignes et colonnes. Vous pouvez spécifier les définitions de ligne et colonne d’un panneau Grid à l’aide des propriétés RowDefinitions et ColumnDefinitions déclarées dans l’élément Grid (utilise la syntaxe d’élément de propriété en XAML). Vous pouvez positionner des objets dans des cellules spécifiques de la grille Grid à l’aide des propriétés jointes Grid.Column et Grid.Row. Vous pouvez répartir l’espace au sein d’une colonne ou d’une ligne en utilisant le dimensionnement Auto ou proportionnel. Le contenu peut s’étendre sur plusieurs lignes et colonnes via les propriétés jointes Grid.RowSpan et Grid.ColumnSpan.

L’exemple XAML qui suit indique comment créer un contrôle Grid à trois lignes et deux colonnes. La hauteur des première et troisième lignes est juste suffisante pour contenir le texte. La hauteur de la deuxième ligne remplit le reste de la hauteur disponible. La largeur des colonnes est répartie de façon égale au sein de la largeur de conteneur disponible.


<Grid Margin="12,0,12,0">

  <Grid.RowDefinitions>
    <RowDefinition Height="auto" />
    <RowDefinition />
    <RowDefinition Height="auto" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

  <TextBox Text="1st row 1st column" FontSize="60" Grid.Column="0" Grid.Row="0" />
  <TextBox Text="3rd row 1st column" FontSize="60" Grid.Column="0" Grid.Row="2" />

  <Button Content="1st row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="0" />
  <Button Content="3rd row 2nd column" FontSize="60" Grid.Column="1" Grid.Row="2" />

</Grid>

Cela produit des résultats semblables à l’illustration suivante.

Exemple de structure

VariableSizedWrapGrid

VariableSizedWrapGrid fournit un panneau de disposition de type grille où la taille de chaque vignette ou cellule peut varier en fonction du contenu. Dans VariableSizedWrapGrid, les éléments sont disposés en lignes ou en colonnes, et sont automatiquement renvoyés à la ligne ou dans une nouvelle colonne quand la valeur MaximumRowsOrColumns est atteinte. La propriété Orientation spécifie si la grille ajoute ses éléments en lignes ou en colonnes avant leur renvoi. Les dimensions des cellules sont spécifiées avec ItemHeight et ItemWidth (valeurs en pixels). Les éléments enfants peuvent utiliser les propriétés jointes VariableSizedWrapGrid.ColumnSpan et VariableSizedWrapGrid.RowSpan (valeurs en nombres de cellules) pour modifier le nombre de cellules variables que l’élément enfant doit utiliser (la valeur par défaut est 1). Pour plus d’informations, voir VariableSizedWrapGrid.

Panneaux pour ItemsControl

WrapGrid et VirtualizingStackPanel sont des panneaux à usage spécifique qui ne peuvent être utilisés que pour afficher des éléments dans ItemsControl. Pour plus d’informations, voir WrapGrid. ItemsStackPanel et ItemsWrapGrid sont des panneaux similaires avec des restrictions sur leur emplacement d’utilisation (ItemsControl avec plusieurs éléments).

Remarques relatives à la migration:  WPF (Windows Presentation Foundation) a une classe VirtualizingStackPanel qui peut être utilisée en tant que panneau à usage général, sans aucune restriction sur son emplacement. Si vous faites migrer du code XAML qui utilisait VirtualizingStackPanel, vous devez modifier le contrôle de données de vos éléments en contrôle ListView. Vous obtiendrez ensuite une virtualisation d’éléments dans votre liste en raison du VirtualizingStackPanel contenu dans le modèle par défaut.

Rubriques associées

Canvas
StackPanel
Grid
VariableSizedWrapGrid
Démarrage rapide : ajout de contrôles de disposition
Ajout de contrôles ListView, SemanticZoom et d’autres contrôles de données

 

 

Afficher:
© 2015 Microsoft