Style d'un fond de grille de mise en page 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 mise en page WPF. J'ai essayé de trouver des informations et les quelques mentions que j'ai trouvées n'ont pas été aussi informatives.
Je voudrais styliser la grille pour ressembler à celle de la capture d'écran liée.
Si le contrôle réel ne le supporte pas, puis-je l'hériter d'une manière ou d'une autre et le faire alors? Je suis assez nouveau sur WPF, donc toute aide serait très appréciée.
Une autre chose, je sais que je peux style chaque contrôle dans la grille, mais il semble exagéré. Je voudrais avoir une grille qui fait lui-même.
Capture d'écran http://img21.imageshack.us/img21/2842/capturehz8.png
5 réponses
Voici un exemple rapide (très approximatif) que vous pourriez pirater pour obtenir le format que vous voulez (si vous êtes sérieux au sujet de travailler avec WPF, vous trouverez Blend une aide énorme pour obtenir vos mises en page):
<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. Juste ce matin, je suis tombé sur une section traitant de votre question.
Chapitre 6, Page 161:
FAQ: Comment puis-je donner aux cellules de la grille des couleurs d'arrière-plan, un remplissage et des bordures comme je peux le faire avec les cellules d'une Table HTML?
Il N'y a pas de mécanisme intrinsèque pour donner de telles propriétés aux cellules de la grille, mais vous pouvez les simuler assez facilement grâce au fait que plusieurs éléments peuvent apparaître dans n'importe quelle grille cellule. Pour donner une couleur d'arrière-plan à une cellule, vous pouvez simplement plop dans un Rectangle avec le remplissage approprié, qui s'étend 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 l'un des autres les enfants (ou les marquer explicitement avec la propriété ZIndex attached), de sorte que leur ordre Z les place derrière le contenu principal.
Btw, WPF déchaîné roches. 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. Pensez-y comme des lignes de grille invisibles contre lesquelles vous pouvez aligner des éléments enfants.
Donc, pour styliser les cellules de la grille, vous devez styliser les éléments qui sont alignés à l'intérieur de la grille.
Il est déroutant de penser à Grid comme étant 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 3ème partie. J'ai utilisé le DevExpress alors qu'il était en version bêta et trouvé assez simple.
Je recommande d'utiliser des bordures pour votre style.
Vous pouvez recréer cette disposition assez facilement en créant des bordures pour chaque ligne et chaque colonne et définir les rowspans et colspans en conséquence.
Vous aurez 5 bordures avec colspan 2, ces bordures prendront soin de vos arrière-plans de dégradé pour chaque ligne et les bordures le long du haut et du bas de chaque ligne. Ensuite, vous aurez 2 bordures avec rowspan 5 celles-ci géreront les bordures de colonne. Imaginez que vous êtes superposer les bordures pour former l'effet de grille visuelle que vous recherchez.
Pour l'en-tête et la bordure extérieure, il suffit d'envelopper toute la grille avec une bordure et un style au besoin.
Je recommande de stocker vos styles en tant que ressources afin que vous puissiez conserver toutes vos informations de style au même endroit.
Prenez soin d'apprendre comment le style fonctionne 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 fonctionne CSS. Je recommande de lire WPF Unleashed Si vous le pouvez.
J'ai trouvé ce post en recherchant 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 posté à (près de la fin) - assez minimaliste.