wpf
Principe de conception "Half the Whitespace"
Recherche…
Introduction
Lors de la mise en place des contrôles, il est facile de coder en dur des valeurs spécifiques dans les marges et les rembourrages afin de les adapter à la mise en page souhaitée. Cependant, en codant en dur ces valeurs, la maintenance devient beaucoup plus coûteuse. Si la disposition change, dans ce qui peut être considéré comme une manière triviale, alors beaucoup de travail doit être fait pour corriger ces valeurs.
Ce principe de conception réduit les coûts de maintenance de la mise en page en pensant à la disposition différemment.
Démonstration du problème et de la solution
Par exemple, imaginez un écran avec 3 sections, disposées comme ceci: 
La boîte bleue pourrait recevoir une marge de 4,4,0,0. La boîte verte pourrait recevoir une marge de 4,4,4,0. La marge de la boîte mauve serait 4,4,4,4. Voici le XAML: (j'utilise une grille pour réaliser la mise en page, mais ce principe s'applique quelle que soit la méthode choisie pour réaliser la mise en page):
<UserControl x:Class="WpfApplication5.UserControl1HardCoded"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" Margin="4,4,0,0" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="1" Grid.Row="0" Margin="4,4,4,0" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
<Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>
Maintenant, imaginons que nous voulons modifier la disposition, pour mettre la boîte verte à gauche de la boîte bleue. Devrait être simple, n'est-ce pas? Sauf que quand on déplace cette boîte, il faut maintenant bricoler les marges. Soit nous pouvons changer les marges de la boîte bleue à 0,4,4,0; ou nous pourrions changer en bleu à 4,4,4,0 et vert à 4,4,0,0. Voici le XAML:
<UserControl x:Class="WpfApplication5.UserControl2HardCoded"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="0" Margin="4,4,4,0" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="0" Grid.Row="0" Margin="4,4,0,0" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
<Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>
Maintenant, mettons la boîte violette en haut. Les marges bleues deviennent alors 4,0,4,4; le vert devient 4,0,0,4.
<UserControl x:Class="WpfApplication5.UserControl3HardCoded"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="1" Margin="4,0,4,4" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="0" Grid.Row="1" Margin="4,0,0,4" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
<Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Margin="4,4,4,4" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>
Ne serait-ce pas bien de pouvoir déplacer les choses pour ne pas avoir à ajuster ces valeurs? Cela peut être réalisé simplement en pensant aux espaces de manière différente. Plutôt que d’allouer tout l’espace à un contrôle ou à un autre, imaginez que la moitié des espaces soient attribués à chaque case: (mon dessin n’est pas tout à fait à l’échelle - les lignes pointillées doivent se trouver à mi-chemin .
La boîte bleue a donc des marges de 2,2,2,2; la boîte verte a des marges de 2,2,2,2; la boîte pourpre a des marges de 2,2,2,2. Et le contenant dans lequel ils sont logés reçoit un rembourrage (pas de marge) de 2,2,2,2. Voici le XAML:
<UserControl x:Class="WpfApplication5.UserControl1HalfTheWhitespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Padding="2,2,2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Column="0" Grid.Row="0" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="1" Grid.Row="0" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
<Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>
Maintenant, essayons de déplacer les boîtes, comme avant ... Mettons la boîte verte à gauche de la boîte bleue. OK fait. Et il n'y avait pas besoin de changer les rembourrages ou les marges. Voici le XAML:
<UserControl x:Class="WpfApplication5.UserControl2HalfTheWhitespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Padding="2,2,2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="0" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="0" Grid.Row="0" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
<Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>
Maintenant, mettons la boîte violette en haut. OK fait. Et il n'y avait pas besoin de changer les rembourrages ou les marges. Voici le XAML:
<UserControl x:Class="WpfApplication5.UserControl3HalfTheWhitespace"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Padding="2,2,2,2">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Border Grid.Column="1" Grid.Row="1" Margin="2,2,2,2" Background="DodgerBlue" BorderBrush="DarkBlue" BorderThickness="5"/>
<Border Grid.Column="0" Grid.Row="1" Margin="2,2,2,2" Background="Green" BorderBrush="DarkGreen" BorderThickness="5"/>
<Border Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" Margin="2,2,2,2" Background="MediumPurple" BorderBrush="Purple" BorderThickness="5"/>
</Grid>
</UserControl>
Comment l'utiliser dans le code réel
Pour généraliser ce que nous avons démontré ci - dessus: les choses individuelles contiennent une marge fixe de « demi-the-espaces », et le conteneur , ils sont maintenus en devrait avoir un rembourrage de « demi-the-espaces ». Vous pouvez appliquer ces styles dans votre dictionnaire de ressources d'application et vous n'aurez même pas besoin de les mentionner sur les éléments individuels. Voici comment définir "HalfTheWhiteSpace":
<system:Double x:Key="DefaultMarginSize">2</system:Double>
<Thickness x:Key="HalfTheWhiteSpace" Left="{StaticResource DefaultMarginSize}" Top="{StaticResource DefaultMarginSize}" Right="{StaticResource DefaultMarginSize}" Bottom="{StaticResource DefaultMarginSize}"/>
Ensuite, je peux définir un style de base sur lequel baser mes autres styles de contrôles: (cela pourrait aussi contenir vos polices FontFamily, FontSize, etc. par défaut)
<Style x:Key="BaseStyle" TargetType="{x:Type Control}">
<Setter Property="Margin" Value="{StaticResource HalfTheWhiteSpace}"/>
</Style>
Ensuite, je peux définir mon style par défaut pour TextBox afin d'utiliser cette marge:
<Style TargetType="TextBox" BasedOn="{StaticResource BaseStyle}"/>
Je peux faire ce genre de chose pour DatePickers, Labels, etc., etc. (tout ce qui peut être contenu dans un conteneur). Méfiez-vous de styling TextBlock comme ça ... ce contrôle est utilisé en interne par un grand nombre de contrôles. Je vous suggère de créer votre propre contrôle qui dérive simplement de TextBlock. Vous pouvez styler votre TextBlock pour utiliser la marge par défaut; et vous devriez utiliser votre TextBlock chaque fois que vous utilisez explicitement un TextBlock dans votre XAML.
Vous pouvez utiliser une approche similaire pour appliquer le remplissage aux conteneurs communs (par exemple, ScrollViewer, Border, etc.).
Une fois cela fait, la plupart de vos contrôles n'auront plus besoin de marges et de remplissage - et vous devrez uniquement spécifier des valeurs dans des endroits où vous souhaitez intentionnellement vous écarter de ce principe de conception.