右侧扩展按钮：怎么做？答案

【问题标题】：Expander button on the right side: how to do it?右侧扩展按钮：怎么做？
【发布时间】：2012-02-04 21:34:15
【问题描述】：

我想将 Expander 按钮放置在标签的右侧。如何做到这一点？

【问题讨论】：

标签： wpf xaml wpf-controls expander controltemplates

【解决方案1】：

您也可以将FlowDirection 设置为RightToLeft，但这可能会导致其他问题。例如，它还会更改扩展器内容的流向，因此您可能需要将其重新设置。

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

【讨论】：

【解决方案2】：

您必须重新设置控件模板的样式。这是一个例子：http://patconroy.wordpress.com/2008/12/18/restyling-the-wpf-expander-control/

【讨论】：

链接的网页由于间距的原因没有显示完整的代码（所以如果你只是复制和粘贴它就不起作用），它提供的完整源代码文件的链接是死的。甚至其评论中的链接也已失效。毕竟，该网页已有 13 年历史。我需要一些完整的示例代码。

【解决方案3】：

解决此问题的另一种方法是将扩展器放置在您喜欢的位置，而扩展器本身中没有任何标题或内容。然后使用BooleanToVisibilityConverter 将内容控件的可见性绑定到扩展器IsExpanded 属性。

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

缺点是当点击标题时它不会展开，但如果需要的话可以很容易地实现。
我个人认为这更简单直接，而不是完全重新设置控件的模板。它还有一个额外的好处，那就是它可以保留已经应用到扩展器的任何样式，例如在使用 DevExpress 或 Telerik 等 3rd 方主题时。

【讨论】：

【解决方案4】：

您可以使用转换命令来翻转控件

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

【讨论】：