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?

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

Solution 2

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.

Solution 3

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>

Comments

[Ankur]

i am binding the visibility of the stackpanel to disable groups of functionality

[Ankur]

Aren't the ToolBarPanels supposed to contain the MenuItems and Separator? When you do that, the Separator still gets its Orientation flipped. If the ToolBarPanels aren't supposed to contain the MenuItems, binding the visibility of the ToolBarPanel won't show/hide the MenuItems along with it.

[stone]

Actually the StackPanel is NOT changing the orientation of the separator; the separator defaults to horizontal orientation. It's the ToolBar that changes the orientation to vertical for you; but you don't get this benefit if the separator is not a direct child of the ToolBar. See my answer below.