Mise en forme d'un arrière-plan de grille de présentation WPF (de chaque cellule, ligne, colonne)
Je voudrais savoir s'il existe un moyen de styliser les cellules, les lignes et les colonnes d'une grille de disposition WPF. J'ai essayé de trouver des informations et les quelques mentions que j'ai trouvées n'ont pas été si informatives.
Je voudrais styliser la grille pour qu'elle ressemble à celle de la capture d'écran liée.
Si le contrôle réel ne le prend pas en charge, puis-je l'hériter d'une manière ou d'une autre et le faire ensuite? Je suis tout à fait nouveau à WPF, donc toute aide serait très appréciée.
Une autre chose, je sais que je peux styler chaque contrôle dans la grille, mais cela semble exagéré. J'aimerais avoir une grille qui le fait elle-même.
capture d'écran http://img21.imageshack.us/img21/2842/capturehz8.png
Voici un rapide (échantillon très approximatif) que vous pouvez pirater pour obtenir le format que vous souhaitez (si vous êtes sérieux au sujet de travailler avec WPF, vous trouverez Blend une aide énorme pour que vos mises en page soient belles):
<Page xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml">
<Page.Resources>
<Style x:Key="CustomerDefinition" TargetType="TextBlock">
<Setter Property="Control.FontFamily" Value="Tahoma"/>
<Setter Property="Control.FontSize" Value="12"/>
<Setter Property="Control.Foreground" Value="Red"/>
</Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Width" Value="100"/>
</Style>
<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border
Name="Border"
Background="#FFEBE9E9"
BorderBrush="#FF8B8787"
BorderThickness="1"
CornerRadius="2"
Padding="3">
<ScrollViewer x:Name="PART_ContentHost" Margin="0"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background"
Value="#EEEEEE"/>
<Setter TargetName="Border" Property="BorderBrush"
Value="#EEEEEE"/>
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="#FFF0EDED"/>
<GradientStop Offset="1.0" Color="#FFE1E0E0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="23"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<TextBlock
Grid.ColumnSpan="2"
Grid.Row="0"
Style="{StaticResource CustomerDefinition}"
Text="Customer Definition"/>
<Border
Grid.Column="0"
Grid.Row="1"
Background="#FFEBE9E9"
BorderBrush="#FF8B8787"
BorderThickness="1">
<StackPanel Background="{StaticResource NormalBrush}" Orientation="Horizontal">
<Label Content="Customer Code"/>
<TextBox Text="SMITHA 098 (normally I'd bind here)"/>
</StackPanel>
</Border>
<Border
Grid.Column="1"
Grid.Row="1"
Background="#FFEBE9E9"
BorderBrush="#FF8B8787"
BorderThickness="1">
<StackPanel Background="{StaticResource NormalBrush}" Orientation="Horizontal">
<Label Content="Customer Type"/>
<TextBox Text="PRIVATE INDIVIDUAL"/>
</StackPanel>
</Border>
</Grid> </Page>
@Dan recommande WPF Unleashed, que je lis actuellement. Ce matin même, je tombe sur une section qui répond à votre question.
Chapitre 6, page 161:
FAQ: Comment puis-je donner aux cellules de la grille les couleurs d'arrière-plan, le remplissage et les bordures comme je le peux avec les cellules d'un tableau HTML?
Il n'y a pas de mécanisme intrinsèque pour conférer de telles propriétés aux cellules Grid, mais vous pouvez les simuler assez facilement grâce au fait que plusieurs éléments peuvent apparaître dans n'importe quelle cellule Grid. Pour donner à une cellule une couleur d'arrière-plan, vous pouvez simplement insérer un rectangle avec le remplissage approprié, qui s'étire pour remplir la cellule par défaut. Pour donner un remplissage de cellule, vous pouvez utiliser le dimensionnement automatique et définir la marge sur l'élément enfant approprié. Pour les bordures, vous pouvez à nouveau utiliser un rectangle mais lui donner un trait explicite de la couleur appropriée, ou vous pouvez simplement utiliser un élément de bordure à la place.
Assurez-vous simplement d'ajouter de tels rectangles ou bordures à la grille avant les autres enfants (ou marquez-les explicitement avec la propriété attachée ZIndex), afin que leur ordre Z les place derrière le contenu principal.
Btw, WPF Roches déchaînées. Il est très bien écrit et l'impression en couleur le rend encore plus facile à lire.
Le WPF Grid n'a pas de cellules visibles en tant que telles. Considérez-les comme des lignes de grille invisibles sur lesquelles vous pouvez aligner des éléments enfants.
Ainsi, pour styliser les cellules de la grille, vous devez styliser les éléments alignés à l'intérieur de la grille.
Il est déroutant de penser que le Grid est quelque chose comme un WinForms DataGrid. Je suppose que son équivalent WinForms le plus proche est le contrôle TableLayout.
Découvrez quelques contrôles de grille tiers. J'ai utilisé celui de DevExpress alors qu'il était en version bêta et je l'ai trouvé assez simple.
Je recommanderais d'utiliser des bordures pour votre style.
Vous pouvez recréer cette mise en page assez facilement en créant des bordures pour chaque ligne et chaque colonne et définir les plages de lignes et les colonnes en conséquence.
Vous aurez 5 bordures avec colspan 2, ces bordures prendront soin de vos arrière-plans dégradés pour chaque ligne et les bordures en haut et en bas de chaque ligne. Ensuite, vous aurez 2 bordures avec une rangée de 5, celles-ci géreront les bordures des colonnes. Imaginez que vous superposez les bordures pour former l'effet de grille visuelle que vous recherchez.
Pour l'en-tête et la bordure extérieure, enveloppez simplement la grille entière avec une bordure et un style selon vos besoins.
Je recommanderais de stocker vos styles en tant que ressources afin que vous puissiez conserver toutes vos informations de style en un seul endroit.
Prenez soin d'apprendre comment fonctionne le style car il est assez puissant, mais il y a une courbe d'apprentissage car elle est très différente de la façon dont CSS fonctionne. Je recommanderais de lire WPF Unleashed si vous le pouvez.
J'ai trouvé ce message lors de la recherche d'une méthode pour définir la marge (ou le remplissage) pour les cellules DataGrid. Mon problème a été résolu grâce à l'exemple de code xaml publié à (vers la fin) - assez minimaliste.