UWP中Binding绑定Width不生效 如何正确更新控件宽度？

两种写法失效的核心原因如下：

• ElementName绑定方案：错误绑定了Width属性。未显式设置固定宽度时，RelativePanel的Width属性默认值为NaN（代表自适应宽度），不存在有效数值；且Width是布局输入属性，不会随控件实际渲染尺寸自动更新，能反映控件真实渲染宽度的是只读属性ActualWidth。
• 自定义属性方案：一是RectWidth没有实现INotifyPropertyChanged接口，值变更后不会向UI发送通知，绑定目标无法感知属性修改；二是DataTemplate内的{x:Bind}默认绑定上下文为当前列表项的数据对象，而非页面类，写在页面后台的Tab_SizeChanged方法不会被正确触发。

优先选第一种无后台代码的方案，稳定性和性能最优。

方案1：利用RelativePanel自带布局属性（推荐） #

不需要手动绑定宽度，直接给Rectangle添加左右对齐到面板的附加属性，布局引擎会自动让Rectangle撑满RelativePanel的全宽，完全避免绑定问题：

<DataTemplate>
    <RelativePanel x:Name="Tab">
        <StackPanel>
            <TextBox Text="{Binding TabName, Mode=TwoWay}"/>
        </StackPanel>
        <Rectangle 
            Fill="{Binding Color}" 
            Height="3" <!-- 按需设置底条高度 -->
            RelativePanel.AlignBottomWithPanel="True"
            RelativePanel.AlignLeftWithPanel="True"
            RelativePanel.AlignRightWithPanel="True"/>
    </RelativePanel>
</DataTemplate>

方案2：修正绑定目标属性为ActualWidth #

如果一定要用宽度绑定的写法，把绑定路径从Width改为ActualWidth，绑定模式设为单向即可（ActualWidth是只读属性，不支持反向绑定）：

<DataTemplate>
    <RelativePanel x:Name="Tab">
        <StackPanel>
            <TextBox Text="{Binding TabName, Mode=TwoWay}"/>
        </StackPanel>
        <Rectangle 
            Fill="{Binding Color}" 
            RelativePanel.AlignBottomWithPanel="True"
            Width="{Binding ElementName=Tab, Path=ActualWidth, Mode=OneWay}"/>
    </RelativePanel>
</DataTemplate>

方案3：修正自定义属性的通知逻辑 #

如果需要走自定义属性更新的路径，按以下要求修改：

1. 列表项的数据模型实现INotifyPropertyChanged接口，RectWidth值变更时触发属性变更通知
2. 把SizeChanged事件的处理逻辑写到数据模型类中，匹配{x:Bind}的默认绑定上下文
   代码示例：

public class TabItem : INotifyPropertyChanged
{
    private double _rectWidth;
    public double RectWidth
    {
        get => _rectWidth;
        set
        {
            _rectWidth = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(RectWidth)));
        }
    }

    public string TabName { get; set; }
    public SolidColorBrush Color { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    public void Tab_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        RectWidth = e.NewSize.Width;
    }
}

对应XAML：

<DataTemplate x:DataType="local:TabItem">
    <RelativePanel x:Name="Tab" SizeChanged="{x:Bind Tab_SizeChanged}">
        <StackPanel>
            <TextBox Text="{x:Bind TabName, Mode=TwoWay}"/>
        </StackPanel>
        <Rectangle 
            Fill="{x:Bind Color}" 
            RelativePanel.AlignBottomWithPanel="True"
            Width="{x:Bind RectWidth, Mode=OneWay}"/>
    </RelativePanel>
</DataTemplate>

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