Edit this page

Customizing Backstage View

The process of customizing the PageViewMode.Backstage mode of RadPageView includes several different stages:

All customizations are possible both through code and by creating/modifying a theme in Visual Style Builder except the customization of the items (RadPageViewPage items or simply called tabs) since they use ImageShape for their appearance.

note

The items in PageViewMode.Backstage can be styled only through Visual Style Builder, since they use the ImageShape functionality of our Telerik Presentation Framework in order to achieve their default view.

Customizing the content area

Follows an example on how to customize the content area with Visual Style Builder using the ControlDefault theme as a base.

1. Open the Visual Style Builder and select File >> Export Built-in Themes…

2. Then click File >> Open Package and load the ControlDefault theme.

3. After the theme is loaded, navigate to RadPageView in the Control Structure pane, right click it and select Backstage View

pageview-backstageview-customizing-backstageview 001

4. Expand RadPageViewBackstageElement and select RadPageViewContentAreaElement.

5. In the Elements Window, expand the RadPageViewBackstageElement and set its BackColor property to 191, 219, 255.

pageview-backstageview-customizing-backstageview 002

6. Save your theme, load it to your application and set the RadPageView theme to be the currently created theme as explained in Using Custom Themes section.

Another way of customizing the content area is in code. The following code snippet demonstrates how to access the content area:

Accessing the content area of Backstage View

RadPageViewBackstageElement backStageElement = radPageView1.ViewElement as RadPageViewBackstageElement;
backStageElement.ContentArea.BackColor = Color.Yellow;

Dim backStageElement As RadPageViewBackstageElement = TryCast(RadPageView1.ViewElement, RadPageViewBackstageElement)
backStageElement.ContentArea.BackColor = Color.Yellow

Customizing the items (RadPageViewPages) area

The approach for customizing is the same, you just have to select the appropriate element from the Element Structure tree. In this case this is StripViewItemLayout.

pageview-backstageview-customizing-backstageview 003

Use the following code snippet to access the element in code:

Accessing the content area of Backstage View

RadPageViewBackstageElement backStageElement = radPageView1.ViewElement as RadPageViewBackstageElement;
StripViewItemLayout itemLayout = backStageElement.ItemContainer.ItemLayout as StripViewItemLayout;
itemLayout.BackColor = Color.Red;

Dim backStageElement As RadPageViewBackstageElement = TryCast(RadPageView1.ViewElement, RadPageViewBackstageElement)
Dim itemLayout As StripViewItemLayout = TryCast(backStageElement.ItemContainer.ItemLayout, StripViewItemLayout)
itemLayout.BackColor = Color.Red

Customizing the buttons area

To access the element responsible for the buttons area, expand RadPageViewBackstageElement >> StripViewItemContainer and select StripViewButtonsPanel. Expanding the latter will give you the opportunity to customize the different buttons in the buttons panel.

Have in mind that the StripViewButtonsPanel is not visible by default. After you select it, you can make it visible by first expanding the StripViewButtonsPanel and then setting the Visibility property to Visible. In addition, by default it does not have a fill, so you have to set the DrawFill property to true. Now, you can customize its fill appearance.

pageview-backstageview-customizing-backstageview 004

The buttons panel can be accessed from the ItemsContaier of the RadPageViewBackstageElement:

Accessing the content area of Backstage View

RadPageViewBackstageElement backStageElement = radPageView1.ViewElement as RadPageViewBackstageElement;
StripViewButtonsPanel buttonsPanel = backStageElement.ItemContainer.ButtonsPanel as StripViewButtonsPanel;
buttonsPanel.Visibility = ElementVisibility.Visible;
buttonsPanel.DrawFill = true;
buttonsPanel.BackColor = Color.Green;

Dim backStageElement As RadPageViewBackstageElement = TryCast(RadPageView1.ViewElement, RadPageViewBackstageElement)
Dim buttonsPanel As StripViewButtonsPanel = TryCast(backStageElement.ItemContainer.ButtonsPanel, StripViewButtonsPanel)
buttonsPanel.Visibility = ElementVisibility.Visible
buttonsPanel.DrawFill = True
buttonsPanel.BackColor = Color.Green

Customizing RadPageViewItems

As already mentioned, such a customization is only possible with Visual Style Builder.

By default, page items use ImageShape for their appearance. This gives you the opportunity to create an image that will have the exact size of the page item (for your application) and just apply it through the theme, or you can use the functionality that our TPF offers with the so called ImageShape. In our scenario we have three images to cover the Selected, MouseOver and MouseDown states of the page item:

Down
pageview-backstageview-customizing-backstageview 005
Over
pageview-backstageview-customizing-backstageview 006
Selected
pageview-backstageview-customizing-backstageview 007

We will use the ImageShape functionality to stretch those images in order to fill the desired items size.

1. The element responsible for the items in Backstage View is called RadPageViewStripItem. Locate it in the Element Structure pane. (For the sake of this example ControlDefault theme is loaded in advance)

pageview-backstageview-customizing-backstageview 008

2. Choose the desired states in this case Selected, MouseOver and MouseDown.

pageview-backstageview-customizing-backstageview 009

3. Edit the corresponding ImageShape repository items for each state.

pageview-backstageview-customizing-backstageview 010

4. Set the desired image and assign the desired properties in order to customize the image according to your requirement. For more information refer to the ImageShape article.

pageview-backstageview-customizing-backstageview 011

5. Save and load your new theme into the application, as described in Using Custom Themes article.

pageview-backstageview-customizing-backstageview 012

Customizing RadPageViewStripGroupItem

RadPageViewStripGroup item is responsible for the group items in RadPageView . Every group item have an underline which is also customizable (PageViewGroupItemUnderline).

pageview-backstageview-customizing-backstageview 013

The following code snippet demonstrates how to access and customize the group items in code:

Accessing the content area of Backstage View

RadPageViewBackstageElement backStageElement = radPageView1.ViewElement as RadPageViewBackstageElement;
StripViewItemLayout itemLayout = backStageElement.ItemContainer.ItemLayout as StripViewItemLayout;
foreach (RadPageViewStripItem item in itemLayout.Children)
{
    RadPageViewStripGroupItem groupItem = item as RadPageViewStripGroupItem;
    if (groupItem != null)
    {
        groupItem.BackColor = Color.Yellow;
        groupItem.NumberOfColors = 1;
        LightVisualElement underlineElement = ((LightVisualElement)groupItem.Children[1]);
        underlineElement.BorderBottomColor = Color.Blue;
        underlineElement.BorderTopColor = Color.Red;
    }
}

Dim backStageElement As RadPageViewBackstageElement = TryCast(RadPageView1.ViewElement, RadPageViewBackstageElement)
Dim itemLayout As StripViewItemLayout = TryCast(backStageElement.ItemContainer.ItemLayout, StripViewItemLayout)
For Each item As RadPageViewStripItem In itemLayout.Children
    Dim groupItem = TryCast(item, RadPageViewStripGroupItem)
    If groupItem IsNot Nothing Then
        groupItem.BackColor = Color.Yellow
        groupItem.NumberOfColors = 1
        Dim underlineElement = TryCast(groupItem.Children(1), LightVisualElement)
        underlineElement.BorderBottomColor = Color.Blue
        underlineElement.BorderTopColor = Color.Red
    End If
Next

pageview-backstageview-customizing-backstageview 014

See Also