如何将UI元素宽度绑定为另一元素宽度的百分比？

当然有可行的实现方式！在WPF中要让一个UI元素的宽度动态绑定为另一个元素宽度的百分比，最常用也最靠谱的方案就是自定义值转换器（IValueConverter），我给你两种具体的实现思路，都能完美满足你的需求：

这是最直接的方案，核心是写一个转换器，把目标元素的实际宽度乘以你想要的百分比：

第一步：实现值转换器类 #

先在你的项目里创建一个继承IValueConverter的转换器，负责把输入的宽度值按比例转换：

using System;
using System.Globalization;
using System.Windows.Data;

namespace YourNamespace
{
    public class PercentageWidthConverter : IValueConverter
    {
        // 正向转换：把父元素宽度转成目标百分比宽度
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            // 校验输入值和参数的有效性
            if (value is double parentActualWidth 
                && parameter is string percentageString 
                && double.TryParse(percentageString, out double percentage))
            {
                // 返回计算后的宽度（比如100px * 0.6 = 60px）
                return parentActualWidth * percentage;
            }
            // 如果参数无效，返回DoNothing避免绑定错误
            return Binding.DoNothing;
        }

        // 反向转换这里用不到，直接抛异常即可
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException("反向转换不需要实现");
        }
    }
}

第二步：在XAML中使用转换器 #

先在XAML的资源里声明这个转换器，然后给TextBlock绑定DataGrid的ActualWidth属性：

<!-- 先声明转换器资源，注意替换成你的命名空间 -->
<Window.Resources>
    <local:PercentageWidthConverter x:Key="PercentageWidthConverter"/>
</Window.Resources>

<!-- 你的DataGrid和TextBlock -->
<DataGrid x:Name="TargetDataGrid" Width="Auto" ...>
    <!-- DataGrid内容 -->
</DataGrid>

<TextBlock 
    Width="{Binding ElementName=TargetDataGrid, Path=ActualWidth, 
            Converter={StaticResource PercentageWidthConverter}, 
            ConverterParameter=0.6}"
    Text="我是宽度为DataGrid60%的文本块"
    .../>

这里的ActualWidth是元素实际渲染后的宽度，当DataGrid的宽度动态变化时（比如窗口拉伸、内容变化），这个值会自动更新，转换器也会实时计算出TextBlock的新宽度。

如果你的场景需要同时绑定多个参数（比如同时参考两个元素的宽度），可以用MultiBinding配合转换器，比如：

自定义多值转换器 #

public class MultiPercentageConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        // 第一个值是DataGrid的ActualWidth，第二个是百分比（也可以放ConverterParameter里）
        if (values.Length >= 2 && values[0] is double width && values[1] is double percentage)
        {
            return width * percentage;
        }
        return Binding.DoNothing;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

XAML用法 #

<Window.Resources>
    <local:MultiPercentageConverter x:Key="MultiPercentageConverter"/>
</Window.Resources>

<TextBlock>
    <TextBlock.Width>
        <MultiBinding Converter="{StaticResource MultiPercentageConverter}">
            <Binding ElementName="TargetDataGrid" Path="ActualWidth"/>
            <Binding Source="0.6"/> <!-- 直接绑定百分比值 -->
        </MultiBinding>
    </TextBlock.Width>
</TextBlock>

额外注意点 #

• 一定要用ActualWidth而不是Width，因为Width是设置的期望宽度，而ActualWidth是元素实际显示的宽度，动态变化时更准确。
• 如果DataGrid的宽度设置为Star（比如在Grid布局里），ActualWidth也会正确跟随布局变化。

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