Replacing arrow with an image

[Subash]

Hi,

I need to display the rad panel bar with an expandable button, but not with an arrow. I want to have an button image instead of default arrow. I have attached the sample image of it.

Kindly help me in acheiving this.

Thanks,
Subash

[Pavel R. Pavlov]

Hello Subash,

In order to change the Expand/Collapse arrow you have to edit the default template of the RadPanelBarItem control. For your convenience I extracted and changed the template according your requirements.

By design that arrow is a Path control (for better performance) called "arrow". You can replace it with the desired Image but keep in mind that you also have to apply the rotate transformation animation. In the sample application we use DoubleAnimationUsingKeyFrames to rotate the Image when a RadPanelBarItem is expanded. Also, please note that the Image is visualized on the left side of the RadPanelBarItem.Header.  We achieved this by editing the columns of the Grid wrapping the Image (called "HeaderRow") and moving that Image in the first column rather than leaving it in the last one.

Please take a look at the attached project and let me know if it fits your needs.

Regards,
Pavel R. Pavlov
the Telerik team