Change Expander ToggleButton Image

4 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Sep 2010

    Posted 16 Sep 2010 Link to this post


    Is there a way to change the Up/Down arrow used by  the RadExpander to different images/icons.  I would like to use different .png files for Expand and Collapse state.


  2. Viktor Tsvetkov
    Viktor Tsvetkov avatar
    382 posts

    Posted 17 Sep 2010 Link to this post

    Hi Michael,

    In order to change the default arrow you should edit the template of the RadExpander in Blend, find the Path element named arrow and replace it with your custom Path element.

    Best wishes,
    Viktor Tsvetkov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
  4. mike okon
    mike okon avatar
    40 posts
    Member since:
    Dec 2009

    Posted 10 Apr 2013 Link to this post


    Is there an example of just having a 2 state image (On and Off) for the button? I don't need all the arrows and animation. I want my own images to display the button. I have tried to remove the arrows in the template but only managed to succeed in removing the functionality as well.

  5. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1165 posts

    Posted 12 Apr 2013 Link to this post

    Hi mike,

    In order to achieve your goal you have to edit the default template of the RadExpander control. For more information you can take a look at this article. When you extract it you will be able to find a Path control named "arrow". In your case you will have to replace it with an Image control. Furthermore, you will have to customize the VisualStates that change the control named "arrow". In your case you will have to change the Image.Source property in the different states.

    For your convenience I exacted and edited the default template in the attached project. Please note that I have replaced the Path control with an Ellipse for simplicity.

    I hope this works in your scenario.

    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top