This is a migrated thread and some comments may be shown as answers.

RadPageViewItem color

14 Answers 439 Views

PageView

This is a migrated thread and some comments may be shown as answers.

Eric asked on 22 Dec 2011, 10:09 PM

TabsHelp.png

I have a RadPageView (DetailTabControl). I want to change the strip item's back color to red under some condition. Then I might need to change it back. I figured out how to change it to red. Restoring the prior values does not restore the tab as I expected. The back color (which I caught before setting to Red, ARGB(255, 191, 219, 255)) is for that of the PageView, not the PageViewPage. Please see attached images.

public class Globals 

{

	public static Color DefaultTabColor = Color.FromArgb(255, 191, 219, 255);

}

...

private void CancelTab(int offset)

{

DetailTabControl.Pages[offset].Item.DrawFill = true;

DetailTabControl.Pages[offset].Item.NumberOfColors = 1;

DetailTabControl.Pages[offset].Item.BackColor = Color.Red;

}

private void UncancelTab(int offset)

{

DetailTabControl.Pages[offset].Item.BackColor = Globals.DefaultTabColor;

DetailTabControl.Pages[offset].Item.NumberOfColors = 2;

DetailTabControl.Pages[offset].Item.DrawFill = false;

}

14 Answers, 1 is accepted

answered on 27 Dec 2011, 11:36 AM

Hello Eric,

Thank you for writing.

You can reset the values of every RadObject to different states of their values by using the Reset method. In your case you need to reset them to Local settings. Here is how your UncancelTab method should look like:

private void UncancelTab(int offset)

{

DetailTabControl.Pages[offset].Item.ResetValue(RadPageViewItem.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);

DetailTabControl.Pages[offset].Item.ResetValue(RadPageViewItem.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);

DetailTabControl.Pages[offset].Item.ResetValue(RadPageViewItem.DrawFillProperty, Telerik.WinControls.ValueResetFlags.Local);

}

I hope that the provided information addresses your question. Should you have any other questions, do not hesitate to contact us.

Greetings,
Stefan
the Telerik teamQ3’11 of RadControls for WinForms is available for download (see what's new). Get it today.

answered on 26 Aug 2019, 09:42 AM

tab-color.jpg

i want to change style and color of RadPageView Tabs like this(Please see the attached image)

can you please give me a solution ?

answered on 27 Aug 2019, 12:13 PM

Hello, Raneesras,

According to the provided screenshot, it seems that you use RadPageView in StripView mode. In order to style the page view considering the design from the picture, I can suggest you to access the RadPageViewStripElement and set a shape to its items at the top right corners. You can set appropriate backcolor as well. Please refer to the following code snippet:

public Form1()

{

InitializeComponent();

RadPageViewStripElement stripElement = (RadPageViewStripElement)this.radPageView1.ViewElement;

stripElement.Items[0].DrawFill = true;

stripElement.Items[0].GradientStyle = Telerik.WinControls.GradientStyles.Solid;

stripElement.Items[0].Shape = new RoundRectShape(70, false, false, true, false);

stripElement.Items[0].Text = "Purchase";

stripElement.Items[0].BorderColor = Color.FromArgb(255, 126, 188, 242);

stripElement.Items[0].BackColor = Color.FromArgb(255, 126, 188, 242);

stripElement.Items[1].DrawFill = true;

stripElement.Items[1].GradientStyle = Telerik.WinControls.GradientStyles.Solid;

stripElement.Items[1].Shape = new RoundRectShape(70, false, false, true, false);

stripElement.Items[1].Text = "Purchase Book";

stripElement.Items[1].BorderColor = Color.FromArgb(255, 126, 188, 242);

stripElement.Items[1].BackColor = Color.FromArgb(255, 126, 188, 242);

stripElement.Items[2].DrawFill = true;

stripElement.Items[2].GradientStyle = Telerik.WinControls.GradientStyles.Solid;

stripElement.Items[2].Shape = new RoundRectShape(70, false, false, true, false);

stripElement.Items[2].Text = "Purchase Order";

stripElement.Items[2].BorderColor = Color.FromArgb(255, 126, 188, 242);

stripElement.Items[2].BackColor = Color.FromArgb(255, 126, 188, 242);

}

Note that you can customize the theme you use in your application in a way which is closest to your expected design by using Visual Style Builder. You can read more details about using the Visual Style Builder here:

1. Loading predefined themes
2. Working with Repository Items
3. Saving and Loading Theme Files
4. Loading Themes from an External File
5. Loading Themes from a Resource
6. Applying Theme to a Control
7. https://www.telerik.com/videos/winforms/what-is-new-in-visual-style-builder-for-q1-2010

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

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.

answered on 28 Aug 2019, 10:50 AM

495660-RadPageView-tabs.zip

Hello, Raneesras,

I have attached my sample project for your reference. Could you please give it a try and see how it works on your end? Am I missing something?

However, if this doesn't solve the problem you are facing, feel free to modify the project in a way to reproduce the undesired behavior and get back to me with it so I can investigate it further. Thank you in advance.

I am looking forward to your reply.

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.

answered on 28 Aug 2019, 12:57 PM

tabclosebutton.jpg

thank you Nadya....its worked.....one more thing..is it possible to change tab close button color and size ?

answered on 29 Aug 2019, 01:49 PM

Hello, Raneesras,

Yes, it is possible to achieve this. By default, the close button icon in RadPageView is represented as an image. You can change it and apply an appropriate image according to your requirements by using the following code snippet:

stripElement.Items[0].ButtonsPanel.CloseButton.Image = //your image here;

Another approach I can suggest is to use the glyphs mechanism instead of images via the TelerikWebUI font. Thus, you will benefit the quality stability of the icons when using the glyphs approach when increasing the font size. It is necessary to set the appropriate glyph number to the Text property and use the specified font in order to draw the close icon in the tab. Thus, you will be able to set the desired color and size of the close icon. Please refer to the following code snippet which result is illustrated below:

var font1 = ThemeResolutionService.GetCustomFont("TelerikWebUI");

stripElement.Items[0].ButtonsPanel.CloseButton.CustomFont = font1.Name;

stripElement.Items[0].ButtonsPanel.CloseButton.Text = "\ue11B";

stripElement.Items[0].ButtonsPanel.CloseButton.CustomFontSize = 14;

stripElement.Items[0].ButtonsPanel.CloseButton.ForeColor = Color.Red;

stripElement.Items[0].ButtonsPanel.CloseButton.DrawImage = false;

More information about glyphs and the TelerikWebUI font is available here: https://docs.telerik.com/devtools/wpf/styling-and-appearance/glyphs/common-styles-appearance-glyphs-overview

I hope this helps. Should you have any other questions, I will be glad to help.

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.

answered on 30 Aug 2019, 09:30 AM

stripelement.jpg

hiii Nadya....i can't access these all.... i am using Telerik 2015 version

please check the attached image

regards,

Ranees ras

answered on 30 Aug 2019, 02:18 PM

Hello, Raneesras,

Telerik UI for WinForms supports custom fonts since R2 2017. If you are using an older version you shouldn't be able to have access to the custom font. After changing to the latest version, everything will work as expected.

Could you please upgrade to the latest version and see how it works? Thus, you can also benefit from all the introduced changes and improvements.

I am looking forward to your reply.

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.

answered on 03 Sep 2019, 12:10 PM

page-closing.gif

hii is there any option to get closing page details in page closing event whether its selected page or not ??

answered on 06 Sep 2019, 05:25 AM

Hello, Raneesras,

When you click the close button, the RadPageView.PageRemoving event is fired. In the RadPageViewCancelEventArgs you have access to the affected page. If you need to determine whether this page is selected and can simply compare it with the RadPageView.SelectedPage:

        public RadForm1()
        {
            InitializeComponent();
            
            this.radPageView1.ViewElement.ShowItemCloseButton = true; 
            this.radPageView1.PageRemoving += radPageView1_PageRemoving;
        }
        
        private void radPageView1_PageRemoving(object sender, RadPageViewCancelEventArgs e)
        {
            bool isSelected = e.Page == this.radPageView1.SelectedPage;
            Console.WriteLine(isSelected);
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
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.

Dinko | Tech Support Engineer

commented on 05 Jul 2024, 09:43 AM

If I have correctly understood your questions, certain tabs need to be placed on the right side and others on the left. This functionality is not supported by the RadPageView controls. Currently, you can pin some tabs that will be positioned on the left side. Thus leaving the rest scrollable. You can show the pin button of the tabs in the following way:

RadPageViewStripElement stripElement = (RadPageViewStripElement)this.radPageView1.ViewElement;
stripElement.ShowItemPinButton = true;

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadPageViewItem color

14 Answers, 1 is accepted