Edit this page

Styling RadDataPager

Before reading this topic, you might find it useful to get familiar with the Template Structure of the RadDataPager and the Template Structure of the DataPagerPresenter.

RadDataPager exposes a Style property which allows you to apply a style to it and modify its appearance.

You have two options:

  • To create an empty style and set it up on your own.

  • To copy the default style of the control and modify it.

This topic will show you how to perform the second one.

Modifying the Default Style

To copy the default styles, load your project in Expression Blend and open the User Control that holds RadDataPager. In the 'Objects and Timeline' pane select RadDataPager you want to style. From the menu choose Object -> Edit Style -> Edit a Copy. You will be prompted for the name of the style and where to be placed.

If you choose to define the style in Application, it would be available for the entire application. This allows you to define a style only once and then reuse it where needed.

After clicking 'OK', Expression Blend will generate the default style of RadDataPager control in the Resources section of your User Control. The properties available for the style will be loaded in the 'Properties' pane and you will be able to modify their default values. You can also edit the generated XAML in the XAML View or in Visual Studio.

As the UI of RadDataPager is wrapped in the DataPagerPresenter control, you have to style it, too. It is to be found in the ControlTemplate for RadDataPager. Bring the ControlTemplate into edit by returning to the main scene, selecting RadDataPager and choosing form the menu Object -> Edit Template -> Edit Current. Select the DataPagerPresenter control and from the menu choose Object -> Edit Style -> Edit a Copy. This will generate the default style for it in the Resources section.

If you want to just style the numeric buttons, you don't need to generate the style for the DataPagerPresenter control. The resources responsible for the buttons get generated with RadDataPager's style.

If you go to the 'Resources' pane, you will see an editable list of resources generated together with the style and used by it. In this list you will find the brushes, styles and templates needed to change the visual appearance of RadDataPager. Their names indicate to which part of RadDataPager appearance they are assigned.

  • RadPager_Indicator - represents the brush for the indicators inside the First, Last, Previous, Next buttons.

  • RadPager_NumericPresenter_Border - represents the brush for the border around the numeric buttons.

  • RadPager_NumericPresenter_Background - represents the brush for the background behind the numeric buttons.

  • RadPager_Separator1 - represents the first brush for the separator between the buttons group and the textbox group.

  • RadPager_Separator2 - represents the second brush for the separator between the buttons group and the textbox group.

  • DataPagerPresenterTemplate - represents the ControlTemplate for the DataPagerPresenter.

  • DataPagerPresenterStyle - represents the Style for the DataPagerPresenter.

  • RadDataPagerTemplate - represents the ControlTemplate for RadDataPager.

  • RadPager_Background - represents the brush for the background of RadDataPager.

  • RadPager_Border - represents the brush for the border of RadDataPager.

  • RadPager_Foreground - represents the brush for the foreground of RadDataPager.

  • RadPager_Page_TopShadow - represents the brush for the shadow of the top of the numeric button.

  • RadPager_Page_Over - represents the brush for the background of the numeric button, when the mouse is over it.

  • RadPager_Page_Checked - represents the brush for the background of the numeric button, when it is selected.

  • RadPager_Page_Disabled - represents the brush for the background of the numeric button's disabled visual element.

  • RadPageTemplate - represents the ControlTemplate for the numeric button.

  • RadPager_Page_Background - represents the brush for the background of the numeric button in its normal state.

  • RadPager_Page_Border - represents the brush for the border of the numeric button.

  • RadPageStyle - represents the Style for the numeric button.

  • RadDataPagerStyle - represents the Style for RadDataPager.

See Also

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy