BackStage customization

6 posts, 0 answers
  1. pierre-jean
    pierre-jean avatar
    108 posts
    Member since:
    Apr 2011

    Posted 08 Oct 2019 Link to this post

    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

  2. Nadya
    Admin
    Nadya avatar
    241 posts

    Posted 09 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. pierre-jean
    pierre-jean avatar
    108 posts
    Member since:
    Apr 2011

    Posted 09 Oct 2019 in reply to Nadya Link to this post

    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
  4. Nadya
    Admin
    Nadya avatar
    241 posts

    Posted 10 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. pierre-jean
    pierre-jean avatar
    108 posts
    Member since:
    Apr 2011

    Posted 10 Oct 2019 Link to this post

    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

  6. Nadya
    Admin
    Nadya avatar
    241 posts

    Posted 10 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top