L’interface de l’application POS a été créée de la façon qui permet de garder la cohérence de la mise en page de toutes les vues et la facilité de gestion. C’est pourquoi nous avons définis les noms des couleurs qui peuvent être utilisées lors de la création/modification d’une vue.

Les noms des couleurs définis sont divisés en deux groupes. Les couleurs gérées directement par l’utilisateur dans l’interface POS et les couleurs gérées indirectement, qui ne peuvent pas être modifiées directement par l’utilisateur, mais qui sont définies automatiquement à la base des couleurs gérées directement.

Couleurs gérées directement

• ThemeColor – couleur de base du motif, utilisée comme :
  • couleur du texte dans les vues de base et modales,
  • couleur de l’arrière-plan dans la vue de message,
  • couleur de l’arrière-plan des boutons dans la vue de message,
  • couleur de l’arrière-plan du bouton Rechercher/Ajouter par exemple dans la liste des ventes, des reçus, des produits,
  • couleur de l’arrière-plan de la position marquée dans le contrôle ComboBox,
  • couleur de l’arrière-plan des notifications,
  • couleur de rediobutton et de checkbox sélectionné/marqué
• ThemeBackground – couleur de base du motif, utilisée comme :
  • couleur de l’arrière-plan de la vue de base et modale,
  • couleur du texte et des icônes vectorielles des boutons (sans menu latéral),
  • couleur du texte et des icônes vectorielles dans la vue de message,
  • couleur du texte et de l’encadrement des boutons dans la vue de message,
  • couleur du texte dans le bouton Rechercher/Ajouter,
  • couleur du texte et de l’icône vectorielle de la notification,
  • couleur du texte de radiobutton et de checkbox sélectionné/marqué

Couleurs gérées indirectement

• ThemeColor2 – couleur de base (ThemeColor) avec la transparence au niveau de 85%, utilisée comme :
  • couleur de l’en-tête des listes (DataGrid)
• ThemeColor3 – couleur de base (ThemeColor) avec la transparence au niveau de 25%, utilisée comme :
  • couleur de sélection d’une position dans la liste
• ThemeColor4 – couleur de base (ThemeColor) avec la transparence au niveau de 65%, utilisée comme :
  • couleur de sélection d’une ligne dans la liste après le survol de la souris,
  • couleur de sélection de l’encadrement d’un bouton composé uniquement d’une icône vectorielle (HeaderButton) après le survol de la souris,
  • couleur de sélection d’une position dans le menu latéral après le survol de la souris,
• HintColor – couleur de l’indice dans le contrôle TextBox
• Background – couleur fixe avec une transparence définie – #1ADFE5E5, utilisée comme :
  • couleur de l’arrière-plan d’une liste

Utilisation des couleurs dans le code

Dans tout extrait de code xaml, les couleurs sont utilisées via la commande DynamicResource, par exemple :

<TextBox Foreground="{DynamicResource ThemeColor}" />

Dans la plupart des cas, l’exemple ci-dessus n’a aucune raison d’être, car les paramètres prédéfinis rendent une configuration supplémentaire de la propriété Foreground redondante.

Police

La police a été également définie pour l’application entière et elle est gérée au niveau de l’interface d’utilisateur POS. Pour la plupart des contrôles, il n’est pas nécessaire de la définir en plus. Une exception serait par exemple la définition des colonnes de liste où il ne faut pas oublier de définir la police de la façon suivante :

<DataGridTextColumn FontFamily="{DynamicResource FontFamily}" />