Expander vertical alignment

Hi I want to make this expander align veritically rather than horizontaly with the arrow facing vertically aswell atm it looks like this:

Open:

enter image description here

Closed:

enter image description here

    <StackPanel>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander">
                <EventTrigger.Actions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="0" To="1" Duration="0:0:0.25" Storyboard.TargetName="listBox" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
        </StackPanel.Triggers>
        <Expander x:Name="expander" Header="Expander" Expanded="expander_Expanded">
            <ListBox x:Name="listBox">
                <ListBoxItem Content="ListBoxItem" />
                <ListBoxItem Content="ListBoxItem" />
                <ListBoxItem Content="ListBoxItem" />
                <ListBox.LayoutTransform>
                    <ScaleTransform ScaleX="1" ScaleY="0"/>
                </ListBox.LayoutTransform>
            </ListBox>
        </Expander>
    </StackPanel>

Solution

Change the ExpandDirection.