UWP中如何将Rectangle宽度设为Grid列宽度的百分比

你的核心需求是让Rectangle的宽度动态跟随所在Grid列的实际宽度，按RankPercentage的比例缩放。之前直接绑定Grid的ActualWidth并通过ConverterParameter传递的方案无效，是因为ConverterParameter是静态值，不会随控件尺寸变化更新，且直接用Grid总宽度还需要手动计算列的比例，维护性差。下面提供两种可靠的实现方式：

方案一：嵌套容器绑定列实际宽度 #

通过在第二列中嵌套一个填满整列的容器，直接绑定该容器的ActualWidth，再结合转换器计算比例：

1. 实现值转换器

public class PercentageToWidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is double containerWidth && parameter is double percentage)
        {
            return containerWidth * (percentage / 100);
        }
        return 0;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

2. 修改XAML结构

<Grid HorizontalAlignment="Stretch">
    <Grid.Resources>
        <local:PercentageToWidthConverter x:Key="PercentageToWidthConverter"/>
    </Grid.Resources>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Rank Percentage" Grid.Column="0" VerticalAlignment="Center"/>
    <!-- 嵌套容器自动填满第二列，绑定它的ActualWidth -->
    <Grid Grid.Column="1" x:Name="ColumnContainer">
        <Rectangle Height="20" 
                   Width="{x:Bind ColumnContainer.ActualWidth, Converter={StaticResource PercentageToWidthConverter}, ConverterParameter={x:Bind CurrentCar.RankPercentage, Mode=OneWay}, Mode=OneWay}"
                   Fill="DeepSkyBlue"/>
    </Grid>
</Grid>

ColumnContainer的ActualWidth就是第二列的实时宽度，转换器会自动用这个值乘以RankPercentage/100，得到符合需求的宽度。

方案二：用ProgressBar简化实现（推荐） #

如果你的矩形只是用来展示比例进度，直接用ProgressBar会更简洁，不需要手动处理尺寸绑定：

<Grid HorizontalAlignment="Stretch">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Rank Percentage" Grid.Column="0" VerticalAlignment="Center"/>
    <ProgressBar Grid.Column="1" Height="20" 
                 Minimum="0" Maximum="100"
                 Value="{x:Bind CurrentCar.RankPercentage, Mode=OneWay}"
                 BorderThickness="0">
        <ProgressBar.Style>
            <Style TargetType="ProgressBar">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ProgressBar">
                            <!-- 背景灰色矩形 -->
                            <Rectangle Fill="#E0E0E0" Height="{TemplateBinding Height}"/>
                            <!-- 进度蓝色矩形，自动按Value比例计算宽度 -->
                            <Rectangle Fill="DeepSkyBlue" 
                                       Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value, Converter={StaticResource PercentageToWidthConverter}, ConverterParameter={Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ProgressBar.Style>
    </ProgressBar>
</Grid>

ProgressBar会自动占满第二列宽度，Value绑定RankPercentage后，内部进度矩形会自动按比例缩放，无需额外容器。

内容的提问来源于stack exchange，提问作者Phil N