Expander button on the right side: how to do it?

Question

i want to position the Expander button on the right side of the label. How to do this?

Nylons

Answer 1

You can also set the FlowDirection to RightToLeft, but that may cause other problems. For example it also changes the flow direction for the content of the expander so you may need to set it back.

<Expander FlowDirection="RightToLeft">
     <StackPanel FlowDirection="LeftToRight">
     </StackPanel>
</Expander>

Dowie

Answer 2

You must restyle the control's template. Here's an example: http://patconroy.wordpress.com/2008/12/18/restyling-the-wpf-expander-control/

Mansfield

The linked web page does not show full code for spacing reasons (so it does not work if you just copy-and-paste it), and the link to full source code files that it provides instead is dead. Even the link in its comment is dead. After all, that web page is 13 years old. I need some full example code that works. – Undefined

Answer 3

Another way to approach this is to position the expander where you like, without any header or content in the expander itself. Then bind the visibility of your content-control to the expanders IsExpanded property, using a BooleanToVisibilityConverter.

<StackPanel>
    <StackPanel.Resources>
        <BooleanToVisibilityConverter x:Key="boolToVisibility" />
    </StackPanel.Resources>
    <DockPanel>
        <Expander DockPanel.Dock="Right" x:Name="rightAlignedExpander" />
        <TextBlock Text="Expanders header" VerticalAlignment="Center" />
    </DockPanel>
    <Grid Visibility="{Binding IsExpanded, ElementName=rightAlignedExpander, Converter={StaticResource boolToVisibility}}">
    <TextBlock Text="Expanders content"/>
    </Grid>
</StackPanel>

The downside is that it will not expand when the header is clicked, but that could easily be implemented if necessary.
Personally I think this is more simple and straightforward instead of completely restyling the control's template. It also have the added benefit that it will keep any styles already applied to the expander, for example when using 3rd party themes like DevExpress or Telerik.

Pyriform

Answer 4

You can use tranform commands to flip the Controls

<Expander RenderTransformOrigin="0.5,0.5">
            <Expander.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="1" ScaleX="-1" />
                    <SkewTransform AngleY="0" AngleX="0" />
                    <RotateTransform Angle="0" />
                    <TranslateTransform />
                </TransformGroup>
            </Expander.RenderTransform>

            <Expander.Header>
                <Grid RenderTransformOrigin="0.5,0.5">
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="1" ScaleX="-1" />
                            <SkewTransform AngleY="0" AngleX="0" />
                            <RotateTransform Angle="0" />
                            <TranslateTransform />
                        </TransformGroup>
                    </Grid.RenderTransform>
                    <TextBlock>Text</TextBlock>
                </Grid>
            </Expander.Header>

            <Grid Height="100" RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleY="1" ScaleX="-1" />
                        <SkewTransform AngleY="0" AngleX="0" />
                        <RotateTransform Angle="0" />
                        <TranslateTransform />
                    </TransformGroup>
                </Grid.RenderTransform>
                <TextBlock>Text</TextBlock>
            </Grid>

        </Expander>

Cluj