WPF ToolBar Separator shrinks to nothing when inside a StackPanel

Question

Given the very simple wpf app

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="800">
    <Grid>
        <ToolBar Height="50" >
            <MenuItem Header="Test1" />
            <MenuItem Header="Test2" />

            <StackPanel Orientation="Horizontal">
                <Separator />
                <MenuItem Header="Test3" />
                <MenuItem Header="Test4" />
                <MenuItem Header="Test5" />
            </StackPanel>
        </ToolBar>
    </Grid>
</Window>

The Separator element shrinks to nothing. If I put the Separator just before the StackPanel begins, it will show up. Why does this happen? Is there a style setting that can be applied somewhere to avoid this?

Answer 1

The StackPanel is changing the orientation of the Separator somehow. Note that if you explicitly tell the Separator to be 20 units wide, the Separator will be a horizontal line instead of a vertical line. That's part of what's going on.

If you apply a LayoutTransform to the Separator, it undoes whatever the StackPanel is doing.

<Separator>
    <Separator.LayoutTransform>
        <RotateTransform
            Angle="90" />
    </Separator.LayoutTransform>
</Separator>

I don't understand the need for a StackPanel, though.

Answer 2

ToolBars are funny about what you put inside. They get funny when all the elements aren't direct children of the ToolBar. The grouping elements are ToolBarTray (group of toolbars), ToolBar, and ToolBarPanel (logical, for collapsing overflow). This is what WPF wants to see:

<Grid>
 <ToolBarTray>
        <ToolBar Height="Auto">
   <ToolBarPanel Orientation="Horizontal" ToolBar.OverflowMode="AsNeeded"/>
            <MenuItem Header="Test1" />
   <Separator/>
            <MenuItem Header="Test2" />
  </ToolBar>
  <ToolBar Height="Auto">
   <ToolBarPanel ToolBar.OverflowMode="Never"/>
            <MenuItem Header="Test3" />
            <MenuItem Header="Test4" />
   <Separator/>
            <MenuItem Header="Test5" />
   <ToolBarPanel ToolBar.OverflowMode="AsNeeded"/>
            <MenuItem Header="Test6" />
            <MenuItem Header="Test7" />
  </ToolBar>
    </ToolBarTray>
</Grid>

Answer 3

Separators default to Horizontal orientation.

Separators placed directly inside a ToolBar have their styles changed, because Toolbar overrides the default styles of its items. Separators placed elsewhere get the default style of a separator. So you will need to style the separator yourself if you vwant to keep it inside the StackPanel.

This CodeProject discussion includes sample code for accomplishing this.

Reference: WPF Unleashed by Adam Nathan, page 117.