Styling a WPF layout grid background (of each cell, row, column)

Question

I would like to know if there is any way to style a WPF layout grid's cells, rows and columns. I've been trying to find any information and the few mentions I've found have not been that informative.

I would like to style the grid to look like the one in the linked screenshot.

If the actual control does not support it, can I inherit it somehow and do it then? I am quite new to WPF so any help would be very appreciated.

One other thing, I know I can style each and every control within the grid, but it seems like overkill. I would like to have a grid that does it itself.

screenshot http://img21.imageshack.us/img21/2842/capturehz8.png

Answer 1

Here's a quick (very rough sample) that you could hack around to get the format you want (if you're serious about working with WPF, you'll find Blend an enormous help in getting your layouts looking good):

<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>

Answer 2

I found this post when looking for method for setting margin (or padding) for DataGrid cells. My problem was solved thanks to example xaml code posted at (near the end) -- pretty minimalistic.

http://forums.silverlight.net/forums/p/16842/55997.aspx

Answer 3

The WPF Grid doesn't have visible cells as such. Think of them as invisible grid lines against which you can have child elements be aligned.

So, to style the grid's cells, you have to style the items that are aligned inside the grid.

It is confusing to think of the Grid as being anything like a WinForms DataGrid. I guess its closest WinForms equivalent is the TableLayout control.

Check out some 3rd party grid controls. I used the DevExpress one while it was in beta and found it pretty straightforward.

Answer 4

I would recommend using borders for your styling.

You could recreate that layout pretty easily by creating borders for each row and each column and set the rowspans and colspans accordingly.

You will have 5 borders with colspan 2, these borders will take care of your gradient backgrounds for each row and the borders along the top and bottom of each row. Then you will have 2 borders with rowspan 5 these will handle the column borders. Imagine that you are overlaying the borders to form the visual grid effect you are after.

For the header and outer border, just wrap the entire grid with a border and style as needed.

I would recommend storing your styles as resources so you can keep all your styling info in one place.

Take care to learn how the styling works because it is pretty powerful, but there is a learning curve as it is quite different to the way CSS works. I would recommend reading WPF Unleashed if you can.

Answer 5

@Dan recommends WPF Unleashed, which I'm currently reading. Just this morning, I come across a section addressing your question.

Chapter 6, Page 161:

FAQ: How can I give Grid cells background colors, padding, and borders like I can with cells of a HTML Table?

There is no intrinsic mechanism to give Grid cells such properties, but you can simulate them pretty easily thanks to the fact that multiple elements can appear in any Grid cell. To give a cell a background color, you can simply plop in a Rectangle with the appropriate Fill, which stretches to fill the cell by default. To give a cell padding, you can use auto sizing and set the Margin on the appropriate child element. For borders, you can again use a Rectangle but give it an explicit Stroke of the appropriate color, or you can simply use a Border element instead.

Just be sure to add such Rectangles or Borders to the Grid before any of the other children (or explicitly mark them with the ZIndex attached property), so their Z order puts them behind the main content.

Btw, WPF Unleashed rocks. Its very well written, and the print in full color makes it even more easier to read.