Set Width property of an element as percentage of another element's width

Question

I have a Grid like this:

<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="2*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Rank Percentage" Grid.Column="0" />
    <Rectangle Height="20" Grid.Column="1" Width="{x:Bind CurrentCar.RankPercentage, Mode=OneWay}"
</Grid>

I want the width of the rectangle to be proportional to the width of the column. The width of the Grid is not known during compile time (it depends on how user resizes the window of the app). For example: If Grid has Width 450, CurrentCar.RankPercentage = 80, Rectangle should have Width = 450 * (2/3) * (80/100)

I have tried to use a Converter with ConverterParameter = ActualWidth of the Grid, but it's not working.

Answer 1

You can use the Grid's SizeChangedevent this:

private void TheGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    double rectangleWidth = TheGrid.ActualWidth;
    rectangleWidth *= (2.0 / 3.0);
    rectangleWidth *= (CurrentCar.RankPercentage / 100.0);
    TheRectangle.Width = rectangleWidth;
}

But I think you should take a look at the ProgressBar control.