样式扩展器扩展到左侧

Question

我有一个风格的扩展器（切换按钮基本上旋转），当扩展器向上移动时，这是很好的。

但是我现在希望它在水平方向上移动，但我无法弄清楚我需要添加/更改的内容。

我尝试的主要内容是扩展器上明显的ExpandDirection =“Left”属性，但没有效果

这是我的XAML：

      <UserControl.Resources>
            <!--Import the value converter-->
            <helpers:MultiplyConverter x:Key="MultiplyConverter" />

            <!--The control template for a toggle button (this will be used for the expander button)-->
            <ControlTemplate x:Key="AnimatedExpanderButtonTemp" TargetType="{x:Type ToggleButton}">
                <Border x:Name="ExpanderButtonBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}" >

                    <Grid>
                        <Rectangle Fill="Transparent"
                                   Grid.ColumnSpan="2"/>

                        <Ellipse Name="Circle"
                                 Grid.Column="0"
                                 Stroke="DarkGray"
                                 Width="20"
                                 Height="20"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"/>

                        <Path x:Name="Arrow"
                              Grid.Column="0"
                              Data="M 1,1.5 L 4.5,5 8,1.5"
                              Stroke="#FF666666"
                              StrokeThickness="2"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              RenderTransformOrigin="0.5,0.5">

                            <Path.RenderTransform>
                                <RotateTransform Angle="90"/>
                            </Path.RenderTransform>

                        </Path>
                    </Grid>
                </Border>
                <!--The triggers for the toggle button (will animate the rotation from pointing down to up and vice versa-->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked"
                             Value="True">

                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Arrow"
                                                     Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
                                                     To="270"
                                                     Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>

                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Arrow"
                                                     Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"
                                                     To="90"
                                                     Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>

                    <!-- MouseOver, Pressed behaviours-->
                    <Trigger Property="IsMouseOver"
                             Value="true">

                        <Setter Property="Stroke"
                                Value="#FF3C7FB1"
                                TargetName="Circle"/>

                        <Setter Property="Stroke"
                                Value="#222"
                                TargetName="Arrow"/>
                    </Trigger>

                    <Trigger Property="IsPressed"
                             Value="true">

                        <Setter Property="Stroke"
                                Value="#FF526C7B"
                                TargetName="Circle"/>

                        <Setter Property="StrokeThickness"
                                Value="1.5"
                                TargetName="Circle"/>

                        <Setter Property="Stroke"
                                Value="#FF003366"
                                TargetName="Arrow"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

            <!--A style for the expander-->
            <ControlTemplate x:Key="RevealExpanderTemp" TargetType="{x:Type Expander}">

                <DockPanel>
                    <ToggleButton x:Name="ExpanderButton" 
                                  DockPanel.Dock="Left"
                                  Template="{StaticResource AnimatedExpanderButtonTemp}"
                                  Content="{TemplateBinding Header}"
                                  IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
                                  OverridesDefaultStyle="True"
                                  Padding="1.5,0">
                    </ToggleButton>

                    <ScrollViewer x:Name="ExpanderContentScrollView" DockPanel.Dock="Bottom"
                                  HorizontalScrollBarVisibility="Hidden"
                                  VerticalScrollBarVisibility="Hidden"
                                  HorizontalContentAlignment="Stretch"
                                  VerticalContentAlignment="Bottom"
                                  >

                        <ScrollViewer.Tag>
                            <sys:Double>0.0</sys:Double>
                        </ScrollViewer.Tag>

                        <ScrollViewer.Height>
                            <MultiBinding Converter="{StaticResource MultiplyConverter}">
                                <Binding Path="ActualHeight" ElementName="ExpanderContent"/>
                                <Binding Path="Tag" RelativeSource="{RelativeSource Self}" />
                            </MultiBinding>
                        </ScrollViewer.Height>

                        <ContentPresenter x:Name="ExpanderContent" ContentSource="Content"/>
                    </ScrollViewer>
                </DockPanel>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
                                                     Storyboard.TargetProperty="Tag"                                                 
                                                     To="1"
                                                     Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="ExpanderContentScrollView"
                                                     Storyboard.TargetProperty="Tag"                                                 
                                                     To="0"
                                                     Duration="0:0:0.4"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>


        </UserControl.Resources>

  <!--The expandr which encapsulates the settings for the given image-->
    <Expander Name="expanderImageSettings"
                  Margin="5" 
                  HorizontalAlignment="Stretch" 
                  Grid.Row="1" 
              ExpandDirection="Left"
                  Template="{StaticResource RevealExpanderTemp}"
                  OverridesDefaultStyle="True"
                  VerticalAlignment="Top">
        <!--The main grid for all controls-->
        <Grid Name="grdMain">

            <ContentPresenter Name="FeatureContentPresenter" Grid.Row="1"/>
        </Grid>
    </Expander>

非常感谢任何帮助