CODEWITHSUNDEEP
.netwpfxamlalignmentprogress-bar
sebingel
sebingel

Reputation: 470

WPF Progressbar won't left align properly

i have the following XAML code to display a set of controls in my window:

<Grid Height="80">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Width="80" />

    <TextBlock Grid.Column="1" Grid.Row="0" Margin="5" FontWeight="Bold" Text="{Binding Titel}"
               Foreground="#B0B0B0" VerticalAlignment="Top" />
    <TextBlock Grid.Column="1" Grid.Row="1" Margin="5,0" Text="{Binding Description}" Foreground="#c9c9c9"
               VerticalAlignment="Top" />
    <ProgressBar Grid.Column="1" Grid.Row="2" Value="50" Margin="5" Height="15" MaxWidth="200" />

</Grid>

Its basically an Image to the left and two TextBlocks and a ProgressBar to the right.

My problem is that the ProgressBar at the end will stretch infinitely wide when my window gets wider. I want my progressbar to stop growing at a certain point. So if the user stretches the window it will stop at a given MaxWidth. So i tried this:

<ProgressBar Grid.Row="2" Value="50" Margin="5" Height="15" MaxWidth="200"/>

But this will center the ProgressBar in the middle of the window if it is stretched more than MaxWidth generating space between the Image on the left and the ProgressBar. I want the Progressbar to stick to the left but HorizontalAlignment="Left" minimizes the ProgressBar to a few pixels:

<ProgressBar Grid.Row="2" Value="50" Margin="5" Height="15" MaxWidth="200" HorizontalAlignment="Left"/>

Does anyone have an idea how to make this work?

Upvotes: 2

Views: 456

Answers (2)

Patryk Spytkowski
Patryk Spytkowski

Reputation: 486

You can also wrap your ProgressBar in a Grid with two columns defined as below:

<Grid Grid.Column="1" Grid.Row="2">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" MaxWidth="200"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ProgressBar Grid.Column="0" Value="50" Margin="5" Height="15"/>
</Grid>

Upvotes: 1

Anton Danylov
Anton Danylov

Reputation: 1491

You may try binding to the width of the other element:

<TextBlock x:Name="title" Grid.Column="1" Grid.Row="0" Margin="5" FontWeight="Bold" Text="{Binding Titel}" Foreground="#B0B0B0" VerticalAlignment="Top" />

<ProgressBar Grid.Column="1" Grid.Row="2" Value="50" Margin="5" Height="15" Width="{Binding Path=ActualWidth, ElementName=title}" MaxWidth="200" HorizontalAlignment="Left"/>

Upvotes: 1

Related Questions