Guide Frontend HTML/CSS pour Développeurs WPF et Avalonia : Gestion des Bordures

Ce guide s'adresse aux développeurs WPF et Avalonia, en se concentrant sur l'équivalence des propriétés de gestion des bordures (Border) entre ces frameworks .NET et les technologies frontend web HTML/CSS. L'objectif est de fournir une compréhension claire de la manière de reproduire des comportements visuels similaires en utilisant des approches web standards.

Introduction aux Composants de Bordure

Dans les environnements WPF et Avalonia, le contrôle Border est fondamental pour la personnalisation visuelle. Il permet de gérer les contours, les couleurs de fond, et même d'appliquer des effets comme les ombres, ce qui est essentiel pour la création d'interfaces utilisateur attrayantes, qu'il s'agisse de cartes, d'images ou de séparateurs.

Nous allons explorer les aspects suiavnts liés aux bordures :

Dimensions et alignement
Marges extérieures
Rembourrage intérieur (Padding)
Couleur et épaisseur des bordures
Arrondis d'angle
Ombres portées
Visibilité
Opacité

Dimensions et Alignement (Width, Height, HorizontalAlignment, VerticalAlignment)

Les concepts de largeur, hauteur et alignement, déjà abordés dans le contexte de la disposition Grid, trouvent leurs équivalents en CSS. Il est important de noter que l'alignement en CSS est souvent dépendant du contexte de layout (comme Flexbox ou Grid).

Correspondances des Propriétés

Voici un tableau comparatif des propriétés couramment utilisées :

WPF / Avalonia	HTML / CSS	Remarques
`Width`	`width`	Peut accepter des valeurs en pixels (ex: `80px`).
`Height`	`height`	Peut accepter des valeurs en pixels (ex: `80px`).
`HorizontalAlignment="Left"`	`justify-self: self-start;`	Dans un contexte Grid, alignement horizontal à gauche.
`HorizontalAlignment="Right"`	`justify-self: self-end;`	Dans un contexte Grid, alignement horizontal à droite.
`HorizontalAlignment="Center"`	`justify-self: center;`	Dans un contexte Grid, alignement horizontal au centre.
`VerticalAlignment="Top"`	`align-self: self-start;`	Dans un contexte Grid, alignement vertical en haut.
`VerticalAlignment="Bottom"`	`align-self: self-end;`	Dans un contexte Grid, alignement vertical en bas.
`VerticalAlignment="Center"`	`align-self: center;`	Dans un contexte Grid, alignement vertical au centre.
`VerticalAlignment="Stretch"`	`align-self: stretch;`	Dans un contexte Grid, étirement vertical pour remplir l'espace disponible.
`HorizontalAlignment="Stretch"`	`justify-self: stretch;`	Dans un contexte Grid, étirement horizontal pour remplir l'espace disponible.

Exemple de Dimensionnement et Alignement

Considérons un composant Border au sein d'un Grid :

<Grid
   Width="300"
   Height="300"
   Background="Aqua">

   <Border
       Width="100"
       Height="50"
       HorizontalAlignment="Left"
       VerticalAlignment="Bottom"
       Background="Yellow" />
</Grid>

L'équivalent en HTML/CSS, en utilisant une disposition de type Grid pour le conteneur :

<template>
 <div class="grid-container">
   <div class="border-element"></div>
 </div>
</template>

<style lang="css" scoped>
 .grid-container {
   display: grid;
   background-color: aqua;
   width: 300px;
   height: 300px;
 }

 .border-element {
   align-self: self-end; /* Équivalent de VerticalAlignment="Bottom" */
   justify-self: self-start; /* Équivalent de HorizontalAlignment="Left" */
   background-color: yellow;
   width: 100px;
   height: 50px;
 }
</style>

Marges Extérieures (Margin)

La gestion des marges extérieures est une fonctionnalité commune. WPF et Avalonia utilisent la propriété Margin de type Thickness, tandis que CSS emploie la propriété margin.

Marges Simples

Pour appliquer une marge uniforme de 5 unités autour d'un élément :

<Grid
   Width="300"
   Height="300"
   Background="Aqua">

   <Border
       Margin="5"
       HorizontalAlignment="Stretch"
       VerticalAlignment="Stretch"
       Background="Yellow" />
</Grid>

L'équivalent CSS :

<template>
 <div class="grid-container">
   <div class="border-element"></div>
 </div>
</template>

<style lang="css" scoped>
 .grid-container {
   display: grid;
   background-color: aqua;
   width: 300px;
   height: 300px;
 }

 .border-element {
   align-self: stretch;
   justify-self: stretch;
   background-color: yellow;
   margin: 5px; /* Marge uniforme de 5 pixels */
 }
</style>

Marges Spécifiques par Direction

WPF/Avalonia utilise le format "Gauche, Haut, Droite, Bas" pour Margin, tandis que CSS utilise "Haut Droite Bas Gauche" pour margin (ou des propriétés dédiées comme margin-top).

<Grid
   Width="300"
   Height="300"
   Background="Aqua">

   <Border
       Margin="0,10,20,40" /* Gauche=0, Haut=10, Droite=20, Bas=40 */
       HorizontalAlignment="Stretch"
       VerticalAlignment="Stretch"
       Background="Yellow" />
</Grid>

L'équivalent CSS :

<template>
 <div class="grid-container">
   <div class="border-element"></div>
 </div>
</template>

<style lang="css" scoped>
 .grid-container {
   display: grid;
   background-color: aqua;
   width: 300px;
   height: 300px;
 }

 .border-element {
   align-self: stretch;
   justify-self: stretch;
   background-color: yellow;
   /* Haut=10px, Droite=20px, Bas=40px, Gauche=0px */
   margin: 10px 20px 40px 0px;
 }
</style>

Arrière-plan (Background)

La propriété Background gère la couleur ou l'image de fond. Les types de Brush en WPF/Avalonia (SolidColorBrush, ImageBrush, GradientBrush) ont des correspondances en CSS.

Couleurs Unies (SolidColorBrush)

En WPF/Avalonia, on peut spécifier des couleurs par nom ou par code hexadécimal.

<Border Background="Aqua" />
<!-- Ou avec une structure plus détaillée -->
<Border>
   <Border.Background>
       <SolidColorBrush Color="Aqua" />
   </Border.Background>
</Border>

En CSS, cela se traduit par background ou background-color :

.element {
 background: aqua;
 /* ou */
 background-color: #00FFFF; /* Code hexadécimal pour Aqua */
}

Valeurs Hexadécimales et RGB

Les codes hexadécimaux et les valeurs RGB sont gérés de manière similaire.

.element {
 background: #66CCFF; /* Code hexadécimal */
 /* Ou avec une transparence (RGBA) */
 background: rgba(123, 23, 12, 0.5); /* Rouge-orangé avec 50% d'opacité */
}

Dégradés Linéaires (LinearGradientBrush)

Les dégradés linéaires en WPF/Avalonia utilisent LinearGradientBrush avec des GradientStop. En CSS, on utilise la fonction linear-gradient().

<Border>
   <Border.Background>
       <LinearGradientBrush StartPoint="0%,50%" EndPoint="100%,50%">
           <GradientStop Offset="0.0" Color="Aqua" />
           <GradientStop Offset="1.0" Color="Yellow" />
       </LinearGradientBrush>
   </Border.Background>
</Border>

Équivalent CSS :

.element {
 /* Dégradé de gauche à droite (90deg), de Aqua à Yellow */
 background: linear-gradient(90deg, aqua 0%, yellow 100%);
}

Il est à noter que la propriété CSS pour les dégradés est background ou background-image, et non background-color.

Images de Fond (ImageBrush)

Pour utiliser une image comme fond, WPF/Avalonia utilise ImageBrush. En CSS, c'est la propriété background-image avec la fonction url().

<Border>
   <Border.Background>
       <ImageBrush Source="chemin/vers/image.png" Stretch="UniformToFill" />
   </Border.Background>
</Border>

CSS pour l'image de fond :

.element {
 background-image: url('chemin/vers/image.png');
 background-repeat: no-repeat; /* Empêche la répétition */
 background-position: center; /* Centre l'image */
 background-size: cover; /* Équivalent de Stretch="UniformToFill" pour couvrir la zone */
 /* Ou background-size: contain; pour équivaloir à Stretch="Uniform" */
}

Couleur et Épaisseur des Bordures (BorderBrush, BorderThickness)

La définition d'une bordure se fait en combinant couleur et épaisseur.

Bordure Simple

Pour une bordure rouge de 2 pixels :

<Border
   Background="Aqua"
   BorderBrush="Red"
   BorderThickness="2" />

En CSS, cela se gère avec la propriété border :

.element {
 background: aqua;
 border: 2px solid red; /* Épaisseur, style, couleur */
}

La syntaxe border accepte : [épaisseur] [style] [couleur]. Les styles possibles incluent solid, dashed, dotted, etc.

Épaisseurs Multiples (Directions)

Pour appliquer des épaisseurs différentes sur chaque côté (ex: une bordure supérieure de 2px) :

<Border
   BorderBrush="Red"
   BorderThickness="0,2,0,0" /* Gauche, Haut, Droite, Bas */ />

En CSS, on utilise des propriétés spécifiques comme border-top :

.element {
 background: aqua;
 border-top: 2px solid red; /* Bordure supérieure uniquement */
 /* D'autres propriétés existent : border-right, border-bottom, border-left */
}

Arrondis d'Angle (CornerRadius)

L'arrondi des coins est géré par CornerRadius en WPF/Avalonia et border-radius en CSS.

<Border
   Background="DarkBlue"
   CornerRadius="10" />

Équivalent CSS :

.element {
 background: darkblue;
 border-radius: 10px; /* Arrondi de 10 pixels sur tous les coins */
}

Ombres Portées (Shadow)

Les effets d'ombre peuvent être implémentés via DropShadowEffect (WPF/Avalonia) ou la propriété BoxShadow (Avalonia), et box-shadow en CSS.

CSS `box-shadow`

La propriété box-shadow en CSS est l'équivalent le plus direct pour créer des ombres.

.element {
 background: white;
 border-radius: 10px;
 width: 200px;
 height: 250px;
 /* Format: offset-x | offset-y | blur-radius | spread-radius | color */
 box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
}

Notez que le format CSS rgba() place le canal Alpha à la fin, contrairement à certains formats ARGB utilisés dans .NET.

Visibilité (Visibility / IsVisible)

Contrôler l'affichage d'un élément.

WPF: `Visibility`

Utilise Collapsed (l'élément disparaît et libère son espace) ou Hidden (l'élément disparaît mais conserve son espace).

<Border Visibility="Collapsed" />
<!-- ou -->
<Border Visibility="Hidden" />

Avalonia: `IsVisible`

Utilise une simple valeur booléenne.

<Border IsVisible="False" />

CSS: `visibility`

Les valeurs collapse, hidden, et visible sont disponibles, similaires à WPF.

.element {
 visibility: hidden; /* Cache l'élément et son espace */
 /* ou */
 visibility: collapse; /* Comportement similaire à hidden, parfois utilisé pour les tableaux */
 /* ou */
 visibility: visible; /* Affiche l'élément */
}

Pour masquer un élément et le retirer complètement du flux de mise en page, on utilise plutôt display: none; en CSS.

Opacité (Opacity)

Ajuster la transparence d'un élément.

<Border
   Background="Black"
   Opacity="0.1" />

Équivalent CSS :

.element {
 background: black;
 opacity: 0.1; /* 10% d'opacité */
}

Tableau Récapitulatif Final

WPF / Avalonia	HTML / CSS	Remarques
`Width`	`width`	Dimensions.
`Height`	`height`	Dimensions.
`HorizontalAlignment`	`justify-self` (dans Grid)	Alignement horizontal.
`VerticalAlignment`	`align-self` (dans Grid)	Alignement vertical.
`Margin`	`margin`	Marges extérieures.
`Background`	`background`, `background-image`	Couleur, dégradés, images de fond.
`BorderBrush`	`border-color`	Couleur de la bordure.
`BorderThickness`	`border-width`, `border-top-width`, etc.	Épaisseur de la bordure.
`CornerRadius`	`border-radius`	Arrondi des coins.
`DropShadowEffect`, `BoxShadow`	`box-shadow`	Ombres portées.
`Visibility`, `IsVisible`	`visibility`, `display`	Contrôle de la visibilité.
`Opacity`	`opacity`	Transparence.

Étiquettes: WPF Avalonia HTML CSS frontend

Publié le 1 juin à 16h38

L'Atelier Monstre

Guide Frontend HTML/CSS pour Développeurs WPF et Avalonia : Gestion des Bordures

Introduction aux Composants de Bordure

Dimensions et Alignement (Width, Height, HorizontalAlignment, VerticalAlignment)

Correspondances des Propriétés

Exemple de Dimensionnement et Alignement

Marges Extérieures (Margin)

Marges Simples

Marges Spécifiques par Direction

Arrière-plan (Background)

Couleurs Unies (SolidColorBrush)

Valeurs Hexadécimales et RGB

Dégradés Linéaires (LinearGradientBrush)

Images de Fond (ImageBrush)

Couleur et Épaisseur des Bordures (BorderBrush, BorderThickness)

Bordure Simple

Épaisseurs Multiples (Directions)

Arrondis d'Angle (CornerRadius)

Ombres Portées (Shadow)

CSS `box-shadow`

Visibilité (Visibility / IsVisible)

WPF: `Visibility`

Avalonia: `IsVisible`

CSS: `visibility`

Opacité (Opacity)

Tableau Récapitulatif Final

Étiquettes Populaires

L'Atelier Monstre

Guide Frontend HTML/CSS pour Développeurs WPF et Avalonia : Gestion des Bordures

Introduction aux Composants de Bordure

Dimensions et Alignement (Width, Height, HorizontalAlignment, VerticalAlignment)

Correspondances des Propriétés

Exemple de Dimensionnement et Alignement

Marges Extérieures (Margin)

Marges Simples

Marges Spécifiques par Direction

Arrière-plan (Background)

Couleurs Unies (SolidColorBrush)

Valeurs Hexadécimales et RGB

Dégradés Linéaires (LinearGradientBrush)

Images de Fond (ImageBrush)

Couleur et Épaisseur des Bordures (BorderBrush, BorderThickness)

Bordure Simple

Épaisseurs Multiples (Directions)

Arrondis d'Angle (CornerRadius)

Ombres Portées (Shadow)

CSS box-shadow

Visibilité (Visibility / IsVisible)

WPF: Visibility

Avalonia: IsVisible

CSS: visibility

Opacité (Opacity)

Tableau Récapitulatif Final

Étiquettes Populaires

CSS `box-shadow`

WPF: `Visibility`

Avalonia: `IsVisible`

CSS: `visibility`