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

问题

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

回答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>

回答2:

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

回答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.

回答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>

来源：https://stackoverflow.com/questions/8769970/expander-button-on-the-right-side-how-to-do-it

标签

wpf

xaml

wpf-controls

expander

controltemplates