RadPanelBar

[Vicki]

I would like to change custom style for RadpanelBar to display the arrow on the left instead of on the right side.
How can I customize it?  Also, when the row is expanded, the arrow will display differently.

[Tina Stancheva]

Hello Vicki,

In order to implement your requirements, you need to edit the default ControlTemplate of the RadPanelBarItem. In it you can reorganize the elements positions and place the arrow element at most-left part of the control. Also, you can edit the VIsualStates to implement the expanded state change in the arrow.

I attached a sample solution to demonstrate how to move the arrow at the left of the RadPanelBarItem control. I hope the project will be a good starting point for you.

Regards,
Tina Stancheva
the Telerik team

[Vicki]

Thank you very much for the response.

I have the following questions:

1. Did you update the RadPanelBarItem style in Expression Blend?  

2. I assume the answer for the question #1 is yes.
When I am in the Expression Blend, how can I update the style for RadPanelBarItem?
Should I choose Object -> Edit Style?  or Edit Template?  or Edit Additional Template?
Under Edit Additional Template, there are 6 different options that I can choose from.
It will be helpful that you can show/describe to me how did you do it.

Thanks again,
Vicki

[Tina Stancheva]

Hello Vicki,

Yes, you're right, I did edit the style of the control in Blend. You can take a look at this article for more informaiton on how to edit the RadControls ControlTemplates in Blend.

Basically, you can choose Edit Style to edit the style resources of the control. After clicking 'OK', Expression Blend will generate the default style of the RadPanelBarItem control in the Resources section of your Window (or in a separate ResourceDictionary - based on your choice in the Edit Style dialog window). The properties available for the style will be loaded in the 'Properties' pane and you will be able to modify their default values.

You can modify these properties to achieve the desired appearance. However most of the visual parts of the RadPanelBarItem have to be styled in its template. To modify it, select the style in the 'Objects and Timeline' pane, right-click on it and choose Edit Template -> Edit Current. In the same pane the element parts for the RadPanelBarItem 's template will get loaded.

Choosing Object->Eidt Template will generate the style and the template toghether and will load the the element parts for the RadPanelBarItem 's template in the 'Objects and Timeline' pane.

Object->Edit Additional Styles/Templates allows you to edit additional styles/templates exposed by the RadPanelBarItem class but in this case, you don't have to use any of the options provided in that list.

I hope this information helps.

Regards,
Tina Stancheva
the Telerik team

[Ram]

Hi,

I created the style in the App.xaml as described above using blend. Without any modification I get an error after clicking the header to expand -

'directionRotation' name cannot be found in the name scope of 'System.Windows.Controls.Grid'. Please advise.

Thanks

[Petar Mladenov]

Hello Ram,

We already answered this question in this forum thread.

Regards,
Petar Mladenov
Telerik

 

 

[Ram]

Thanks for helping in fixing the arrow position

But now Telerik themes cannot be applied after extracting the style. I have provided the screenshot with "Expression_Dark" theme and a sample xaml in the same forum.

Thanks