Hello Telerik,
I would like to customize RadPageView in mode Backstage. I like how it looks with 'TelerikMetro' theme, but I would like to change method for selecting active page - instead of using image (green arrow) I would like to use simple border on the left side. That what I am doing:
1. Open Visual Style Builder
2. Select RadPageView control and set it to Backstage.
3. Apply to 'TelerikMetro' theme.
4. Expand control tree and select 'RadPageViewStripItem' for customization.
5. Go to 'Element states' window for customization needed states for item. In my case I am looking all states where green arrow image is used. There are 'RadPageViewStripItem.Selected','RadPageViewStripItem.MouseDown' and 'RadPageViewStripItem.Selected.MouseOver'.
6. Disable repository item with green arrow.
7. Create new simple repository item - Border. For highlighting active tab.
8. And this is the issue - on preview, I see that when I select page, I have border for some pages that are not selected. It looks like the border line is too long. The same result I have if I try to use this changed theme in my project.
How I can change this and how to make border shorter, only for needed page item? I am really don't understand what causes this error.
I also uploaded video to - https://www.screencast.com/t/ZehV4cXj
I would like to customize RadPageView in mode Backstage. I like how it looks with 'TelerikMetro' theme, but I would like to change method for selecting active page - instead of using image (green arrow) I would like to use simple border on the left side. That what I am doing:
1. Open Visual Style Builder
2. Select RadPageView control and set it to Backstage.
3. Apply to 'TelerikMetro' theme.
4. Expand control tree and select 'RadPageViewStripItem' for customization.
5. Go to 'Element states' window for customization needed states for item. In my case I am looking all states where green arrow image is used. There are 'RadPageViewStripItem.Selected','RadPageViewStripItem.MouseDown' and 'RadPageViewStripItem.Selected.MouseOver'.
6. Disable repository item with green arrow.
7. Create new simple repository item - Border. For highlighting active tab.
8. And this is the issue - on preview, I see that when I select page, I have border for some pages that are not selected. It looks like the border line is too long. The same result I have if I try to use this changed theme in my project.
How I can change this and how to make border shorter, only for needed page item? I am really don't understand what causes this error.
I also uploaded video to - https://www.screencast.com/t/ZehV4cXj
5 Answers, 1 is accepted
0
Hello Yuheni,
Thank you for writing.
The borders of the strip items of the page view when it is set up in BackStageView need to be themed with a background shape. That is why you have been unsuccessful with the approach you have taken. I am attaching a screenshot of the Visual Style Builder tool showing how you can modify the existing repository item with a different shape to paint the border to the left of the item. I am also attaching the custom theme which I tested.
I hope this helps. Should you have further questions please do not hesitate to write back.
Regards,
Hristo
Progress Telerik
Thank you for writing.
The borders of the strip items of the page view when it is set up in BackStageView need to be themed with a background shape. That is why you have been unsuccessful with the approach you have taken. I am attaching a screenshot of the Visual Style Builder tool showing how you can modify the existing repository item with a different shape to paint the border to the left of the item. I am also attaching the custom theme which I tested.
I hope this helps. Should you have further questions please do not hesitate to write back.
Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Yauheni
Top achievements
Rank 1
Rank 1
answered on 30 Oct 2017, 10:26 AM
Thank you Hristo for your help. But I am still have a few questions.
1. So, for styling strip item I should use only ImageShape, am I right? And for border, I should create image with "stick", right?
2. Which format, which size of image it should be?
3. How I should arrange "stick" on an image? For example on an preview I see border from left side, but on original image it is on the top. Also, how it should be arranged for making border on top, right or buttom of a strip item?
4. Do you guys have some tutorial page that covers all of these questions?
1. So, for styling strip item I should use only ImageShape, am I right? And for border, I should create image with "stick", right?
2. Which format, which size of image it should be?
3. How I should arrange "stick" on an image? For example on an preview I see border from left side, but on original image it is on the top. Also, how it should be arranged for making border on top, right or buttom of a strip item?
4. Do you guys have some tutorial page that covers all of these questions?
0
Hello Yauheni,
Thank you for writing back.
The Left, Top, Right and Bottom borders of the strip items need to be styled with an image shape. Regarding your actual scenario, you can create an image with a simple line or a square having the back color you want to use in your application. Then you can experiment with the different settings in the Visual Style Builder tool.
For example, you can also create a square image and display different segments: Left, Top, Right, and Bottom. This way you will be able to paint a border in the segment you have defined. I am sending you attached a short video demonstrating how you can work with the image and create borders for each of the segments. Currently, we do not have other resources on that topic except the article in the documentation: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/primitives/imageshape.
I hope this helps. Please let me know if you have other questions.
Regards,
Hristo
Progress Telerik
Thank you for writing back.
The Left, Top, Right and Bottom borders of the strip items need to be styled with an image shape. Regarding your actual scenario, you can create an image with a simple line or a square having the back color you want to use in your application. Then you can experiment with the different settings in the Visual Style Builder tool.
For example, you can also create a square image and display different segments: Left, Top, Right, and Bottom. This way you will be able to paint a border in the segment you have defined. I am sending you attached a short video demonstrating how you can work with the image and create borders for each of the segments. Currently, we do not have other resources on that topic except the article in the documentation: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/primitives/imageshape.
I hope this helps. Please let me know if you have other questions.
Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Yauheni
Top achievements
Rank 1
Rank 1
answered on 08 Nov 2017, 03:35 PM
Thank you Hristo, for simple border it is clear. But what can you suggest, if I would like to do something like that (please. see in attachment)
0
Hello Yauheni,
Thank you for writing back.
You can accomplish this by using an image already having a gradient and stretching it, some of the effects are shown in the documentation article. I am also sending the theme with which I tested. Please also note that you may want to apply a padding to the RadPageViewStripItem.
I hope this helps. Should you have further questions please do not hesitate to write back.
Regards,
Hristo
Progress Telerik
Thank you for writing back.
You can accomplish this by using an image already having a gradient and stretching it, some of the effects are shown in the documentation article. I am also sending the theme with which I tested. Please also note that you may want to apply a padding to the RadPageViewStripItem.
I hope this helps. Should you have further questions please do not hesitate to write back.
Regards,
Hristo
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.