Replacing arrow with an image

2 posts, 0 answers
  1. Subash
    Subash avatar
    15 posts
    Member since:
    Dec 2012

    Posted 04 Jan 2013 Link to this post


    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.

  2. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1237 posts

    Posted 09 Jan 2013 Link to this post

    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.

    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top