Xceed DataGrid for WPF v7.2 Documentation
Part 3: Styling
Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.2 > Xceed DataGrid for WPF > Tutorial: Creating a Custom Theme > Part 3: Styling

    

Styling is the "easier" part of creating a custom theme, so I will start with this to get you in the mood. Do you remember the naming convention described earlier? We will be searching for elements using this convention, so if you don't remember, take a moment to refresh your memory and reread the naming convention section in part 1.

The list of elements to style was provided in the previous part, but for simplicity's sake, it has been copied over to this part as well (see Table 1). Each modified style will be included for those of you who prefer to just copy-and-paste code.

Table 1: Elements to style

Element to style What we will be changing
DataGridControl Background, Foreground, and FontFamily
RowSelectorPane Background and Foreground
Row SelectionBackground and SelectionForeground
ColumnManagerRow Background, BorderBrush, and BorderThickness
ColumnManagerCell Padding
HierarchicalGroupByControl Background and Foreground
GroupByItem Background, BorderBrush, and BorderThickness
GroupHeaderControl Background, BorderThickness, and BorderBrush
TableView HorizontalGridLineBrush and VerticalGridLineThickness
groupByConnectionLinePen resource
( GroupByControl.ConnectionLinePen)		 Providing a new Pen
dropMarkPen resource
( ViewBase.DropMarkPen)		 Providing a new Pen

Styling Elements

  1. The first element to style—although order has no importance what-so-ever—is the DataGridControl, so in your custom-theme project:
    search for "STYLE: DataGridControl". This style will change the background to white, the foreground to black, and the font family to Calibri (only available when Office 2007 is installed).

    View the modified properties of the DataGridControl style

    XAML
    Copy Code 
    <Setter Property="Background"
        Value="White"/>
<Setter Property="Foreground"
        Value="Black" />
<Setter Property="TextElement.FontFamily" 
        Value="Calibri"/>
  2. Next, we will be providing a new style for the RowSelectorPane, so search for "STYLE: RowSelectorPane". This style will change the background so that is uses the rowSelectorBrush static resource and sets the foreground to #9AC6FF (some sort of blue... I'm not a graphical designer).

    The linear gradient brush represented by the rowSelectorBrush resource must be added to the "Resources specific to this view/theme/colorscheme" section of the TableView.Office2007Tutorial.xaml file.

    View the modified properties of the RowSelectorPane style

    XAML
    Copy Code 
    <Setter Property="Background"
        Value="{StaticResource rowSelectorBrush}"/>
<Setter Property="TextElement.Foreground"
        Value="#9AC6FF"/>

    View the declaration of the rowSelectorBrush resource

    XAML
    Copy Code 
    <LinearGradientBrush x:Key="rowSelectorBrush"
                       StartPoint="0,0.5"
                       EndPoint="1,0.5">
    <GradientStop Color="#FFFFFF"
                  Offset="0"/>
    <GradientStop Color="#C4DDFF"
                  Offset="1"/>   
</LinearGradientBrush>

  3. The third style will change the selection background and foreground of the standard Row element to #A7CDF0 and black respectively, so search for "STYLE: Row" to change the colors (you will get more than one hit if you don't have the "match whole word" search option enabled).


    View the modified properties of the Row style

    XAML
    Copy Code 
    <Setter Property="SelectionBackground"
        Value="#A7CDF0"/>
<Setter Property="SelectionForeground"
        Value="Black"/>

  4. Next up is the style for the ColumnManagerRow element in which we will change the background so that it uses the columnManagerBrush static resource, sets the border brush to #6593CF, and the border thickness to display a 1-pixel border on the top and bottom. As you probably have guessed, search for "STYLE: ColumnManagerRow" to find the style and change the values.

    The linear gradient brush represented by the columnManagerBrush resource must be added to the "Resources specific to this view/theme/colorscheme" section of the TableView.Office2007Tutorial.xaml file.

    View the modified properties of the ColumnManagerRow style

    XAML
    Copy Code 
    <Setter Property="Background"
        Value="{StaticResource columnManagerBrush}" />
     
<Setter Property="BorderBrush"
        Value="#6593CF"/>

<Setter Property="BorderThickness"
        Value="0,1,0,1"/>

    View the declaration of the columnManagerBrush resource

    XAML
    Copy Code 
    <LinearGradientBrush x:Key="columnManagerBrush"
                       StartPoint="0.5,0"           
                       EndPoint="0.5,1">
    <GradientStop Color="#FFFFFF"
                  Offset="0" />         
    <GradientStop Color="#C4DDFF"
                  Offset="1" /> 
  </LinearGradientBrush>

  5. At this point, you probably get how this works, so I will just put the modified styles for the remaining elements. You can refer to Table 1 for the list of properties that will be modified as well as read the comments in the XAML code for more information.


    ColumnManagerCell style modifications

    XAML
    Copy Code 
    <Setter Property="Padding"
        Value="4,5,0,0" />

    HierarchicalGroupByControl style modifications

    XAML
    Copy Code 
    <Setter Property="Background"
       Value="{StaticResource groupByControlBackgroundBrush}" />

<Setter Property="Foreground"
        Value="#15428B"/>
    The linear gradient brush represented by the groupByControlBackgroundBrush resource must be added to the "Resources specific to this view/theme/colorscheme" section of the TableView.Office2007Tutorial.xaml file.
    XAML Copy Code
    <LinearGradientBrush x:Key="groupByControlBackgroundBrush"
       StartPoint="0.5,0"
       EndPoint="0.5,1">
       <GradientStop Color="#E3EFFF"
        Offset="0" />
       <GradientStop Color="#AFD2FF"
        Offset="1" />
      </LinearGradientBrush>

    HierachicalGroupByItem style

    XAML
    Copy Code 
    <Setter Property="Background"
        Value="{StaticResource columnManagerCellBrush}" />

 <Setter Property="BorderBrush"
         Value="{StaticResource borderBrush}" />

<Setter Property="BorderThickness"
        Value="1" />

    TableView style

    Contrary to the other styles, the TableView style can be located by searching for "Default values for the View".

    XAML
    Copy Code 
    <Setter Property="VerticalGridLineThickness"
              Value="0" />
<Setter Property="HorizontalGridLineBrush"
        Value="#E3EFFF" />

  6. The style for the dropMarkPen resource is modified in the same way as other element styles; however, it is not found in the same manner. Resources are used in multiple styles by various elements. Therefore, they are declared in a resource dictionary, which all elements can access (I will let the Microsoft SDK explain that one). To find the dropMarkPen resource, search for "x:Key="dropMarkPen"".

    If you did not notice, all the styles except dropMarkPen were located in TableView.Office2007Tutorial.xaml. The dropMarkPen resource is different because it is located in the Office2007Tutorial.Resources.xaml file, which contains resources that are available to all the views (if we were supporting more than TableView). This file is included into the resource dictionary in the TableView.Office2007Tutorial.xaml file. OK, enough reading, here are the modified styles:

  7. dropMarkPen style

    XAML
    Copy Code 
    <Pen x:Key="dropMarkPen"
     Brush="#A7CDF0"
     Thickness="7" />

    The last step is to add a new Pen named "groupByConnectionLinePen" to the theme and assign it to the ConnectionLinPen property of the GroupByControl through a setter in the style.

    groupByConnectionLinePen style

    XAML
    Copy Code 
    <Pen x:Key="groupByConnectionLinePen"
     Thickness="1"
     Pen.Brush="#6F9DD9"/>

<Setter Property="ConnectionLinePen"
        Value={StaticResource groupByConnectionLinePen}/>

That's it for the styles! Now go get a coffee—or any other drink of choice—because next come the templates. 

    

 

 

Copyright Xceed Software Inc

Send Feedback