Search code examples
wpfxamlgridstylescontroltemplates

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


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


Solution

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