Tamir Khason – Just code

Justifying of Expander’s header button

From internal discussion list:

From: MS employee
Subject: Expander arrow button placement

Hi,

I have an Expander that expands in the Down direction. How do I make the Expander button be justified to the right, rather than the left which is the default?

From: Another helpful MS employee
Subject: RE: Expander arrow button placement

There is no easy way as I know, you have to restyle the Expander to achieve it.

From: Myself
Subject: RE: Expander arrow button placement

The easiest way to achieve the right justification of Expander header is by using following “double – transformation”. Actually, you are flipping the expander and then flipping back it’s header text. You’ll have to flip it’s content as well.

This way is quick and dirty, however the best way to do it is by creating custom template for header.

<Expander RenderTransformOrigin="0.5,0.5">
       <Expander.Header>
       <TextBlock Margin="30,0,30,0" VerticalAlignment="Top" Text="Test">
       <TextBlock.RenderTransform>
       <TransformGroup>
       <ScaleTransform ScaleX="-1" ScaleY="1"/>
       </TransformGroup>
       </TextBlock.RenderTransform>
       </TextBlock>
       </Expander.Header>
       <Expander.RenderTransform>
       <TransformGroup>
       <ScaleTransform ScaleX="-1" ScaleY="1"/>
       </TransformGroup>
       </Expander.RenderTransform>
      </Expander>

   Have a nice day.

July 12th, 2007 · Comments (2)