Why won't the WPF progressbar stretch to fit?

wpf alignment stackpanel
John NoCookies picture John NoCookies · Nov 18, 2012 · Viewed 8.5k times · Source

This is my original code:

<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
        <ProgressBar Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
        <TextBlock Text="asdf" Height="23"  Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</StackPanel>

The progressbar was very small, maybe 2 or 3 pixels wide, then there was the text block and empty space after. So I tried explicitly docking the elements to sides:

<DockPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
            <ProgressBar DockPanel.Dock="Left" Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" />
            <TextBlock DockPanel.Dock="Right" Text="asdf" Height="23"  Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</DockPanel>

No avail. I also tried modifying each solution by setting HorizontalAlignment="Stretch" on the progress bar, but there's no change. How do i stretch it to fill all the space there is after the text block has been rendered?

Answer

Adi Lester picture Adi Lester · Nov 18, 2012

Remove DockPanel.Dock="Left" from the ProgressBar and switch the order of the controls:

<DockPanel>
    <TextBlock DockPanel.Dock="Right" Height="23"  VerticalAlignment="Top" HorizontalAlignment="Right"/>
    <ProgressBar Height="23" VerticalAlignment="Top" />
</DockPanel>

By default, DockPanel has its property LastChildFill set to true, which will make the ProgressBar take the available space.

Related questions

Align items in a stack panel?

I was wondering if I can have 2 controls in a horizontal-oriented StackPanel so that the right item should be docked to the right side of the StackPanel. I tried the following but it didn't work: <StackPanel Orientation="Horizontal"> &…

Read More
Aligning controls on both left and right side in a stack panel in WPF

I have the following code: <DockPanel> <StackPanel DockPanel.Dock="Top" Orientation="Horizontal"> <RadioButton Content="_Programs" IsChecked="{Binding Path=ProgramBanksSelected}" IsEnabled="{Binding Path=ProgramsEnabled}" Margin="8" /> <StackPanel> <Label Content="Master" Height="28" Name="MasterFileStatus" …

Read More
WPF StackPanel content vertical alignment

Is there a way in XAML to say that I want to center-align vertically all components inside a horizontal-oriented StackPanel? I achieve the desired result with the below XAML: <StackPanel Orientation="Horizontal"> <TextBlock VerticalAlignment="Center"/> <…

Read More