C# WPF XAML status bar alignment

Question

Everything is fine when the text is default on startup before , but when I add song name, status is moving to right and status bar are outside area. after

<StatusBar Margin="0,730,0,0" DockPanel.Dock="Bottom" >
        <WrapPanel >
        <Label x:Name="tytulUtworu" HorizontalAlignment="Left">music: none </Label>
        <Label x:Name="lblstatusPolaczenia" Margin="200,0,0,0" HorizontalAlignment="Center">status: disconnected</Label>
        <ProgressBar Width="100" Height="15" Value="50" Margin="200,0,0,0" HorizontalAlignment="Right" />
        </WrapPanel>
    </StatusBar>

How can I repair this?

Answer 1

Instead of using a WrapPanel , try using a Grid . That way you'll have fixed columns that won't affect the other elements if text is added

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Label x:Name="tytulUtworu" HorizontalAlignment="Left">music: none </Label>
    <Label x:Name="lblstatusPolaczenia" Grid.Column="1" HorizontalAlignment="Center">status: disconnected</Label>
    <ProgressBar Width="100" Height="15" Value="50" Grid.Column="2" HorizontalAlignment="Right" />
</Grid>

You can adjust the Width on each ColumnDefinition to get better sized columns for your use

Answer 2

Firstly, ditch the margins. They are not helping, they just make things less obvious as to how they should be aligned.

From your margin values, I'm guessing that you want the status bar to show the label on the left, another in the center, and the progress bar on the right.

Below shows how to do this with a second dock panel. Dock panel is ideal here as it is consistent in the way it reports its size to child components.

If you want to place this status panel on another DockPanel , there are a few things which must be done before it will render as you need it to.

Firstly, you main dock panel must have content, otherwise the boundary panels will not render in the right place.

Secondly, if you have set LastChildFill=True , you must add your main content as the last item. If you set the main content then add your status bar, even though you have docked it to the bottom, it will still try to fill the panel.

I've updated the code snippet after testing it (my first attempt was typed straight into SO, sorry it didn't work).

        <StatusBar DockPanel.Dock="Bottom"
               Name="statusBar"
               Height="50"
               HorizontalAlignment="Stretch"
               HorizontalContentAlignment="Stretch">
        <DockPanel LastChildFill="True"
                   Width="{Binding ActualWidth, ElementName=statusBar, Mode=OneWay}">
            <ProgressBar DockPanel.Dock="Right"
                         Width="100"
                         Value="50" />
            <Label x:Name="tytulUtworu"
                   DockPanel.Dock="Left"
                   ContentStringFormat="music: {0}"
                   Content="none" />
            <Label x:Name="lblstatusPolaczenia" 
                   HorizontalContentAlignment="Center"
                   Content="disconnected"
                   ContentStringFormat="status: {0}" />
        </DockPanel>
    </StatusBar>