Editing Style Properties Using Expression Blend

Before You Begin

You can use Microsoft® Expression® Blend quickly and easily to modify copies of existing control styles so that you can create your own custom styles that can be assigned to the various Ultimate UI for WPF controls.

A control’s composition determines the procedure you use to modify its styles. For example, the xamGrid™ control exposes style properties for commonly used controls such as the CellControl object. However, other nested controls such as the RowSelectorCellControl object do not have corresponding style properties exposed directly by the xamGrid control. Instead, nested objects within the xamGrid control expose the appropriate style properties. In this particular case, the RowSelectorSettings object exposes a style property for the RowSelectorCellControl object.

This topic assumes you already have a xamGrid control on your page.

What You Will Accomplish

You will learn several techniques to edit a copy of the xamGrid™ control in order to create your own custom styles. You can apply the techniques to the other Ultimate UI for WPF controls to create your own custom styles. The first technique show you how to create a style for properties exposed directly by the xamGrid control. The second technique show you how to create a style for nested controls that do not have a corresponding style property exposed directly by the xamGrid control.

Follow These Steps

Editing xamGrid’s CellStyle Property

Using Expression Blend, find the xamGrid control’s CellStyle property in the Properties panel.

You will notice that you cannot edit the CellStyle property directly in the Properties panel. Fortunately, Expression Blend offers the ability to style these properties by navigating to the following menu item:

Object -> Edit Additional Styles -> Edit Cell Style - > Edit a Copy.

SL Designers Guide Editing Style Properties Using Expression Blend 01.png

Create a copy of the cell style. When you create a copy of a style, Expression Blend automatically copies the entire style, including brushes and any other objects from the generic.xaml file.
1. Open the Object menu.
2. Expand the "Edit Additional Styles" menu item. In order to enable the "Edit Additional Styles" menu item, you must select the xamGrid control on Expression Blend’s Visual design surface. The style properties exposed directly by the xamGrid control will have a corresponding menu item in the sub-menu.
3. Expand the "Edit Cell Style" menu item.
4. Select "Edit a Copy…"

SL Designers Guide Editing Style Properties Using Expression Blend 02.png

Select the Application option and click the OK button to add a copy of the style to the application’s resource dictionary.

Adding the style to the application’s resource dictionary keeps the page clean and allows you to reuse this style in other pages within your application.

SL Designers Guide Editing Style Properties Using Expression Blend 03.png

At this point, Expression Blend will load a Visual design surface that contains the CellControl object by itself.

SL Designers Guide Editing Style Properties Using Expression Blend 04.png

You now have the opportunity to modify the existing control template of the CellControl object.
1. Right-click the CellControl object.
2. Expand the "Edit Template" menu item.
3. Select "Edit Current".

SL Designers Guide Editing Style Properties Using Expression Blend 05.png

At this point, you should see a tree that displays the elements that the CellControl object is composed of. You can edit this template to get the style that you are looking for. As an added bonus, once you’re done editing the template, you can just run your application and see the result because Expression Blend automatically sets the CellStyle property for you.

SL Designers Guide Editing Style Properties Using Expression Blend 06.png

Editing the Style of a Nested Control

Drag an instance of a nested control that you want to style onto your page.

This example uses the RowSelectorCellControl object to edit the xamGrid.RowSelectorSettings.Style property. You can find this control in the Assets panel under Controls -> Infragistics -> Control Parts - > xamGrid.

SL Designers Guide Editing Style Properties Using Expression Blend 07.png

Create a copy of the RowSelectorCellControl object’s style.
1. Open the Object menu.
2. Expand the "Edit Style" menu item.
3. Select "Edit a Copy…".

SL Designers Guide Editing Style Properties Using Expression Blend 08.png

You will see the same dialog that you saw when created a style for the CellControl object; use this dialog to name the style as well as placing it in the application’s resource dictionary.

SL Designers Guide Editing Style Properties Using Expression Blend 09.png

You can edit the control’s template using the same technique you used previously to edit the CellControl object’s template.
1. Right-click the RowSelectorCellControl object.
2. Expand the "Edit Template" menu item.
3. Select "Edit Current".

SL Designers Guide Editing Style Properties Using Expression Blend 10.png

You will now be able to modify the specific elements of the control.

SL Designers Guide Editing Style Properties Using Expression Blend 11.png

There is one additional step needed now to apply your newly created style to the row selector. You must set the RowSelectorSettings object’s Style property to the style that you just created.

In XAML:

<ig:XamGrid>
    <ig:XamGrid.RowSelectorSettings>
        <ig:RowSelectorSettings Style="{StaticResource RowSelectorCellontrolStyle1}" />
    </ig:XamGrid.RowSelectorSettings>
</ig:XamGrid>