ItemsControl中Canvas内Rectangle宽度绑定异常（始终为0）求助

我来帮你拆解几个最可能导致这个问题的原因，以及对应的解决办法：

1. 先确认绑定路径与数据源的正确性 #

你提供的XAML里ItemsSource="{Binding Source=M..."看起来是截断了，首先要把这块捋顺：

• 确保ItemsSource正确绑定到ViewModel里的ObservableCollection<RectangleOverlay>集合（假设你的集合元素类型是RectangleOverlay）
• Rectangle的Width绑定应该直接写{Binding Width}——因为ItemsControl的每个Item的DataContext默认就是集合里的RectangleOverlay实例，不需要额外指定Source

举个正确的绑定示例：

<ItemsControl ItemsSource="{Binding YourOverlayCollectionName}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Canvas>
                <Rectangle Width="{Binding Width}" Fill="Red" Opacity="0.5"/>
            </Canvas>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

2. 检查RectangleOverlay是否实现了INotifyPropertyChanged #

如果你的RectangleOverlay类没实现这个接口，就算后台修改了Width的值，UI也接收不到更新通知；要是初始值是0，那自然就一直显示0。给你个标准实现参考：

public class RectangleOverlay : INotifyPropertyChanged
{
    private double _width;
    public double Width
    {
        get => _width;
        set
        {
            if (_width != value)
            {
                _width = value;
                OnPropertyChanged(nameof(Width));
            }
        }
    }

    // 别忘了Height属性如果需要绑定也要同样处理
    private double _height;
    public double Height
    {
        get => _height;
        set
        {
            if (_height != value)
            {
                _height = value;
                OnPropertyChanged(nameof(Height));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3. 注意Canvas的布局特性 #

Canvas是绝对布局容器，它不会自动调整或约束子元素的大小。如果你的Rectangle只绑定了Width却没设置Height，或者没有其他视觉上的约束，加上绑定出问题的话就很容易显示为0。另外也要确认ItemsControl的ItemsPanel是否符合需求（默认是StackPanel，要是换成Canvas的话得注意子元素定位，但你是把Canvas放在ItemTemplate里，这块影响不大）。

4. 查看Visual Studio的绑定错误提示 #

Debug模式下打开Visual Studio的输出窗口，里面会显示绑定失败的详细信息——比如“找不到Width属性”“数据源为null”之类的，这些信息能直接帮你定位问题。

最后给你一个完整的可运行示例参考：

ViewModel部分 #

public class MainViewModel : INotifyPropertyChanged
{
    private ObservableCollection<RectangleOverlay> _overlays;
    public ObservableCollection<RectangleOverlay> Overlays
    {
        get => _overlays;
        set
        {
            _overlays = value;
            OnPropertyChanged(nameof(Overlays));
        }
    }

    public MainViewModel()
    {
        // 初始化几个测试数据
        Overlays = new ObservableCollection<RectangleOverlay>
        {
            new RectangleOverlay { Width = 100, Height = 50 },
            new RectangleOverlay { Width = 150, Height = 75 }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML部分 #

<Grid>
    <Label HorizontalAlignment="Center" Content="IMAGE FROM CAMERA" 
           FontFamily="Segoe UI" Foreground="White" Panel.ZIndex="2"/>
    <ItemsControl Panel.ZIndex="3" ItemsSource="{Binding Overlays}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas>
                    <Rectangle Width="{Binding Width}" Height="{Binding Height}" 
                               Fill="Red" Opacity="0.5"/>
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

记得要把View的DataContext设置为ViewModel实例，比如在Window构造函数里：

public MainWindow()
{
    InitializeComponent();
    DataContext = new MainViewModel();
}

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