Shrinking the Arrow on the WPF Expander

  • Article

My goal was simple. I needed a smaller arrow in the WPF Expander control to help conserve screen real-estate. Here is the before and after:

Before: image
After: image

The arrow on the right is 80% of the original size.

So how did I accomplish this? It turned out to be far simpler than any of the blog posts I found on the subject. They all suggested using Expression Blend to copy the full template and them modify it. But you can use a RenderTransform to reduce the size:

 <Expander Header="{Binding Name}" FontSize="16">
    <Expander.RenderTransform>
        <ScaleTransform ScaleX=".8" ScaleY=".8" />
    </Expander.RenderTransform>
</Expander>

Notice that I bumped the font size up to 16. When multiplied by .8, this gives a final font size of 12.8, which is a nice size.