Two expanders beside each other wont expand the latter

For some reason when I set two expanders beside one another, the first expander seems to be behind the second one and wont expand out the expander set beside it? Is there a way I can fix this in the code below?

<Grid>
     <StackPanel Orientation="Horizontal" Margin="0,0,195,0">
         <StackPanel.Triggers>
             <EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander"> 
                 <EventTrigger.Actions>
                     <BeginStoryboard>
                         <Storyboard>
                             <DoubleAnimation From="0" To="1.2" Duration="0:0:0.35" Storyboard.TargetName="listBox" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>                                
                         </Storyboard>
                     </BeginStoryboard>
                 </EventTrigger.Actions>
             </EventTrigger>
         </StackPanel.Triggers>
         <Expander x:Name="expander" Expanded="expander_Expanded" ExpandDirection="Right" Width="29">
                 <ListBox x:Name="listBox">
                 <ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
                 <ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
                 <ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
                 <ListBox.LayoutTransform>
                     <ScaleTransform ScaleX="0" ScaleY="1"/>
                 </ListBox.LayoutTransform>
             </ListBox>
         </Expander>
 
     <StackPanel Orientation="Horizontal" Margin="0,0,342,0" Width="318">
             <StackPanel.Triggers>
                 <EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander1">
                     <EventTrigger.Actions>
                         <BeginStoryboard>
                             <Storyboard>
                                 <DoubleAnimation From="0" To="1.2" Duration="0:0:0.35" Storyboard.TargetName="listBox1" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>
                             </Storyboard>
                         </BeginStoryboard>
                     </EventTrigger.Actions>
                 </EventTrigger>
             </StackPanel.Triggers>
             <Expander ExpandDirection="Right" Name="expander1" Width="29">
             <ListBox Name="listBox1">
                 <ListBox.LayoutTransform>
                     <ScaleTransform ScaleX="0" ScaleY="1" />
                 </ListBox.LayoutTransform>
                 <ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
                 <ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
                 <ListBoxItem Content="ListBoxItem" VerticalAlignment="Top" />
             </ListBox>
         </Expander>
     </StackPanel>
     </StackPanel>
 </Grid>
 

---