BackStage customization

[pierre-jean]

Hello

I have a radpageView in BackStage ViewMode and I would like to:

1. change the color(s) of the item when the Mouse is "down" on the element (The default is a 2 color orange)

2. Increase the space between the image and the text in the Element

3. Reduce the width of the BackStage section, or have it automatically adjusted to the width of the largest element

I have tried and searched but I have been unsuccessfull

Thanks in advance

Pierre-Jean

[Nadya | Tech Support Engineer]

Hello Pierre-Jean,

You can achieve this as follows:

1. To change the color of the RadPageViewItem for a specified visual state you can use SetThemeValueOverride method:

this.radPageViewPage1.Item.SetThemeValueOverride(RadPageViewStripItem.BackColorProperty, Color.YellowGreen, "MouseDown");
this.radPageViewPage1.Item.SetThemeValueOverride(RadPageViewStripItem.DrawFillProperty,true, "MouseDown");
this.radPageViewPage1.Item.SetThemeValueOverride(RadPageViewStripItem.NumberOfColorsProperty, 1, "MouseDown");

2. To increase the space between the image and the text in the RadPageViewItem you can set an appropriate margin:

this.radPageViewPage1.Item.Layout.LeftPart.Margin = new Padding(20,0,0,0);

3. To set the width of the items area you should use the ItemAreaWidth property:

RadPageViewBackstageElement backStageViewElement = (RadPageViewBackstageElement)this.radPageView1.ViewElement;
backStageViewElement.ItemAreaWidth = 250;

I hope this helps. Should you have any other questions do not hesitate to ask.

Regards,
Nadya
Progress Telerik

[pierre-jean]

Hello Nadya and thanks for your advice

the Padding and ItemAreaWidth work perfectly
However I still hav a problem with the colors (I think I gave you wrong indications, sorry ...)

The color I wish to modify is the Orange that shows when the mouse leaves the selected item.

When I clic on an item it gets a White background and Blue foreground (I think I have modified these colors thru the Edit UI Elements option, but I dont recall where I have made the changes ..)

But when the mouse leaves the selected item the color goes to Orange and I would like to change this

I have attached here below the code snipet that is called after the "initializeComponents" and a screenxhot of the form after the mouse leaves the selected item

 

Thanks for your advice

---------------------------------------------------------------

 

 

        Dim backStageViewElement As RadPageViewBackstageElement = CType(pvParameters.ViewElement, RadPageViewBackstageElement)
        backStageViewElement.ItemAreaWidth = 200
        Dim StripElement As RadPageViewStripElement = pvParameters.ViewElement
        For Each Item As RadPageViewItem In StripElement.Items
            Item.NumberOfColors = 1
            Item.BackColor = My.Settings.WJBackColor 'Blue
            Item.ForeColor = My.Settings.WJForeColor 'White
            Item.Layout.LeftPart.Margin = New Padding(12, 0, 0, 0)
            Item.SetThemeValueOverride(LightVisualElement.BackColorProperty, Color.Yellow, "MouseDown")
            Item.SetThemeValueOverride(LightVisualElement.DrawFillProperty, True, "MouseDown")
            Item.SetThemeValueOverride(LightVisualElement.NumberOfColorsProperty, 1, "MouseDown")
        Next

[Nadya | Tech Support Engineer]

Hello Pierre-Jean,

The provided information is much appreciated. It helps me to understand that you would like a different color when the item is selected. In this case, you can use the SetThemeValueOverride method and override the Selected state as well:

this.radPageViewPage2.Item.SetThemeValueOverride(RadPageViewStripItem.BackColorProperty, Color.Red, "Selected");
this.radPageViewPage2.Item.SetThemeValueOverride(RadPageViewStripItem.DrawFillProperty, true, "Selected");
this.radPageViewPage2.Item.SetThemeValueOverride(RadPageViewStripItem.NumberOfColorsProperty, 1, "Selected");

You can refer to the following documentation article which demonstrates how to override the theme settings for a specific element state without losing the applied style for the rest of the states: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/override-theme-settings-at-run-time.

I hope this information helps. Please let me know if there is anything else I can help you with.

Regards,
Nadya
Progress Telerik

[pierre-jean]

Hello Nadya

thanks a lot this is exactly what I was looking for

I will look into the presentation framework to better understand the mecanisms 

Kind Regards 

Pierre-Jean

[Nadya | Tech Support Engineer]

Hello Pierre-Jean,

I am glad that you achieved the desired look. Do not hesitate to contact us if you have other questions.

Regards,
Nadya
Progress Telerik