Part 3: Styling

Glossary Item Box

    

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.

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.

ShowTable 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).

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

    ShowView the modified properties of the RowSelectorPane style

    XAML Copy Code

    <Setter Property="Background"
            Value="{StaticResource rowSelectorBrush}"/>

    <Setter Property="TextElement.Foreground"
            Value="#9AC6FF"/>


    ShowView 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).


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

    ShowView 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"/>

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


    ShowColumnManagerCell style modifications

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

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

    ShowHierachicalGroupByItem style

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

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

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

    ShowTableView 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. ShowdropMarkPen 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.

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