Question

I have a TextBlock and a couple Buttons in a StatusBar. The Buttons are effectively right-aligned (e: actually the StatusBarItem containing them is). When the window is shrunk horizontally, and the text wraps, the TextBlock pushes the Buttons off the window to varying degrees.

Why does this happen, and how can I fix the positions of the Buttons?

<Window x:Class="TextWrapping.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <DockPanel>
        <StatusBar DockPanel.Dock="Bottom">
            <StatusBarItem>
                <TextBlock Name="statusText" TextWrapping="Wrap" Text="when this text wraps, it pushes the buttons off the window" />
            </StatusBarItem>
            <StatusBarItem HorizontalAlignment="Right">
                <StackPanel Orientation="Horizontal">
                    <Button>one</Button>
                    <Button>two</Button>
                </StackPanel>
            </StatusBarItem>
        </StatusBar>
        <TextBlock Text="shink this window horizontally" />
    </DockPanel>
</Window>

Answer 1

You can see this blog post for more information, but basically the StatusBar is using a DockPanel to present it’s items. So for the code you have above, the statusText is being docked left, and the buttons are filling the remaining space (but aligned horizontally within that area).

So as you size smaller, the TextBlock will always take as much space as it needs (allowing the buttons to size to zero). When the text is wrappped, the buttons get back a little more space as the TextBlock doesn’t need all the horizontal space.

To fix it you can change your code to:

<DockPanel>
    <StatusBar DockPanel.Dock="Bottom">
        <StatusBarItem DockPanel.Dock="Right">
            <StackPanel Orientation="Horizontal">
                <Button>one</Button>
                <Button>two</Button>
            </StackPanel>
        </StatusBarItem>
        <StatusBarItem>
            <TextBlock Name="statusText" TextWrapping="Wrap" Text="when this text wraps, it pushes the buttons off the window" />
        </StatusBarItem>
    </StatusBar>
    <TextBlock Text="shink this window horizontally" />
</DockPanel>

Or you can use the trick shown the blog post, to replace the DockPanel with a Grid.