Dans l’article Créer des vues nous avons décrit les étapes de base indispensables pour créer le squelette d’une nouvelle vue. Nous avons également montré comment enregistrer une telle vue, encore vide, pour qu’elle soit gérable lors du fonctionnement de l’application (chapitre Enregistrer vues à naviguer et à gérer l’affichage dans l’article Créer de vues).

Chaque élément (contrôle) marqué avec l’identifiant unique LayoutId devient automatiquement gérable. Leur gestion c’est dans la plupart des cas une possibilité de manipuler leurs certaines propriétés comme la couleur d’arrière-plan, du texte, le formatage de la police, les marges, la largeur, la hauteur etc. Tout cela a été également décrit dans le chapitre précédent.

Les éléments gérables reçoivent une caractéristique supplémentaire au moment où ils sont déclarés à l’intérieur d’un des conteneurs disponibles dans l’application POS : Grid et ItemsContainer (de l’espace Comarch.POS.Presentation.Core.Controls). Cette caractéristique permet de déterminer si et où un élément doit être placé dans un conteneur.

Gestion des éléments dans le conteneur ItemsContainer

L’ajout de contrôles à l’intérieur du conteneur ItemsContainer entraîne leur présentation par défaut dans l’ordre où ils ont été déclarés. La particularité du conteneur fait que les éléments sont positionnés par défaut horizontalement ou verticalement, en fonction de la propriété Orientation (qui peut être également gérable) définie sur le conteneur. Si le conteneur possède le LayoutId unique, il devient gérable ce qui permet à l’utilisateur de manipuler ses éléments (tous les éléments doivent également posséder ses identifiants LayoutId uniques). Lorsque l’utilisateur active le mode de gestion de la vue contenant ce conteneur, il pourra, à l’aide de la souris, attraper n’importe quel contrôle à son intérieur et le faire glisser en modifiant l’ordre des éléments intérieurs du conteneur ou même supprimer l’élément du conteneur ou l’ajouter à nouveau.

Les éléments déclarés à l’intérieur du conteneur ItemsContainer ne peuvent exister que dans ce conteneur. Cela veut dire que l’utilisateur ne peut pas ajouter le contrôle à un autre conteneur. Cette restriction est enlevée par un conteneur du type Grid.

Exemple :

<StackPanel>
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer1">
          <TextBlock core:Layout.Id="ExampleView.TextBlock1"/>
          <Button core:Layout.Id="ExampleView.Button1"/>
      </controls:ItemsContainer>
      
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer2">
          <TextBlock core:Layout.Id="ExampleView.TextBlock2"/>
          <Button core:Layout.Id="ExampleView.Button2"/>
      </controls:ItemsContainer>
  <StackPanel>

Dans l’exemple ci-dessus nous voyons une vue composée de deux conteneurs gérables ExampleView.ItemsContainer1 et ExampleView.ItemsContainer2. Les éléments déclarés à l’intérieur de ces conteneurs seront affichés par défaut dans l’ordre dans lequel ils sont enregistrés.

Après avoir activé le mode de gestion de cette vue, l’utilisateur pourra modifier l’ordre des éléments. Il pourra supprimer un élément/des éléments du conteneur ou les y réinsérer (s’ils ont été supprimés avant). En revanche, il ne pourra pas transférer, par exemple l’élément ExampleView.TestBlock1 du conteneur ItemsContainer1 vers le conteneur ItemsContainer2. Le transfert des éléments entre les conteneurs ne sera pas possible.

Gestion des éléments dans le conteneur Grid

Un autre conteneur qui permet de manipuler ses éléments est Grid. Ce conteneur nécessite de définir une grille des colonnes et des lignes où il sera possible d’emplacer des éléments. Cette grille peut être définie par défaut dans xaml ou elle peut être gérée par l’utilisateur (l’utilisateur peut modifier le nombre de colonnes et de lignes). Par défaut, chaque élément ajouté au Grid ne sera pas affiché jusqu’à ce que l’utilisateur fasse glisser en mode de gestion l’élément dans la cellule sélectionnée du conteneur.

Il est possible de modifier l’affichage par défaut des composants pour que cela fonctionne comme dans le cas du conteneur ItemsContainer. Dans le cas où la propriété DefaultShowChildren=true, tous les éléments seront par défaut affichés dans la vue.

Comme dans le cas du conteneur du type ItemsContainer, chaque élément défini dans le conteneur Grid peut être supprimé/ajouté au conteneur. En outre, si un autre conteneur (Grid ou ItemsContainer) existe à l’intérieur du conteneur, les éléments peuvent être ajoutés directement dans le conteneur imbriqué. Grâce à cela, il est possible de transférer par exemple les contrôles entre les conteneurs ItemsContainer différents.

Exemple :

<controls:Grid core:Layout.Id="ExampleView.BaseGrid">
      <TextBlock core:Layout.Id="ExampleView.TextBlock1"/>
      <Button core:Layout.Id="ExampleView.Button1"/>
      <TextBlock core:Layout.Id="ExampleView.TextBlock2"/>
      <Button core:Layout.Id="ExampleView.Button2"/>
 
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer1">     
      <controls:ItemsContainer core:Layout.Id="ExampleView.ItemsContainer2">
  </controls:Grid>

Dans l’exemple ci-dessus, tous les contrôles ont été définis directement dans le Grid. Maintenant, lors du premier démarrage de cette vue, l’utilisateur verra une vue vide. Cela est dû au fait que, par défaut, le Grid n’affiche pas les éléments. En revanche, en mode de gestion il sera possible de définir la grille du Grid (ses colonnes et lignes) ainsi que de faire glisser dans le Grid chaque contrôle défini. Il sera également possible de transférer, par exemple, le contrôle ExampleView.TextBlock1 directement dans le conteneur ExampleView.ItemsContainer1 ou ExampleView.ItemsContainer2, après avoir ajouté au préalable ces conteneurs dans le Grid.

La grille par défaut du Grid peut être également définie dans le xaml à l’aide de la propriété ColumnDefinition et RowDefinition.  Le nombre souhaité de colonnes ou de lignes est déterminé en saisissant autant de valeurs (nombre spécifique, * ou Auto) que le nombre de colonnes/lignes souhaité, séparées par des virgules.

Ainsi, par exemple, pour définir cinq colonnes, dont la première aura une largeur de 100, la deuxième sera automatiquement sélectionnée et les autres obtiendront proportionnellement l’espace restant, la propriété ColumnDefinition doit avoir la valeur : „100,Auto,*,*,*”.

Il est également possible de définir, à l’aide de la propriété Grid.Position, l’emplacement par défaut des éléments dans une cellule appropriée du Grid. La valeur est définie à l’aide de quatre chiffres séparés par des virgules qui signifie le numéro de ligne (numérotation à partir de 0), le numéro de colonne (numérotation à partir de 0), le nombre de lignes (au moins 1) et le nombre de colonnes respectivement, qui doit être occupées par le contrôle.

Exemple :

<controls:Grid core:Layout.Id="ExampleView.BaseGrid" DefaultShowChildren="True">
        <controls:Grid.Style>
            <Style TargetType="controls:Grid" BasedOn="{StaticResource {x:Type controls:Grid}}">
                <Setter Property="ColumnDefinition" Value="*,*,*" />
                <Setter Property="RowDefinition" Value="*,*,*" />
            </Style>
        </controls:Grid.Style>
 
        <TextBlock core:Layout.Id="ExampleView.TextBlock1" Text="Hello">
            <TextBlock.Style>
                <Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
                    <Setter Property="controls:Grid.Position" Value="1,1,1,1" />
                </Style>
            </TextBlock.Style>
        </TextBlock>
 
    </controls:Grid>

Maintenant, la vue est composée du Grid pour lequel nous avons activé l’affichage des éléments par défaut et pour lequel nous avons définis trois colonnes de la même largeur (largeur définie dynamiquement, en fonction de la largeur de la vue) et trois lignes de la même hauteur (hauteur définie dynamiquement comme dans le cas de la largeur). Le conteneur contient un élément TextBlock dont la position par défaut dans le conteneur a été défini comme la cellule centrale.