DataContext为设计实例时，ItemsControl绑定List<Line>无法显示问题

问题描述 #

在WPF放大镜视图中，需为硬编码坐标轴添加随放大对象状态动态变化的刻度线。当前用List<Line>收集刻度线，运行时列表已正确生成，且硬编码相同坐标的Line可正常显示，但通过ItemsControl绑定列表后刻度线无法显示。ViewModel无无参构造函数，DataContext为设计实例，无法通过后台代码访问ViewModel。

代码片段 #

View（XAML） #

<Window x:Class="MagnifyingGlass.MagnifyingGlassWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    d:DataContext="{d:DesignInstance Type=local:MagnifyingGlassViewModel, IsDesignTimeCreatable=False}">

    <Window.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="DataTemplate" DataType="{x:Type local:MagnifyingGlassViewModel}">
                <Grid>
                    <ItemsControl ItemsSource="{Binding Path=ScaleBars}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Line X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}" Stroke="Black" StrokeThickness="1" Stretch="None"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                    <Line X1="0" X2="1" Stretch="Fill" Stroke="Black" StrokeThickness="1"/> <!-- 硬编码Y轴 -->
                    <Line Y1="0" Y2="1" Stretch="Fill" Stroke="Black" StrokeThickness="1"/> <!-- 硬编码X轴 -->
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <ContentControl Content="{Binding}" ContentTemplate="{StaticResource DataTemplate}"/>
    </Grid>
</Window>

主ViewModel #

namespace MagnifyingGlass
{
    public class MagnifyingGlassViewModel : NotificationObject
    {
        public List<Line> ScaleBars => MagnifyingPlotViewModel.ScaleBars;
        public MagnifyingPlotViewModel MagnifyingPlotViewModel { get; }
        public MagnifyingGlassViewModel(lots of parameters here)
        {
            MagnifyingPlotViewModel = new MagnifyingPlotViewModel(parameters going here);
            Bind(() => ScaleBars, () => MagnifyingPlotViewModel.ScaleBars);
        }
    }
}

提供放大细节的ViewModel #

namespace MagnifyingGlass
{
    public sealed class MagnifyingPlotViewModel : PlotViewModel
    {
        public List<Line> ScaleBars => GetScaleBars();

        public MagnifyingPlotViewModel(parameters…) 
            : base(parameters…)
        {
            _scaleBars = new List<Line>();

            // Bind方法添加INotifyPropertyChanged绑定，依赖属性变化时更新目标属性
            Bind(() => SourceToMagnify, 
                () => Lots, () => Of, () => Other, () => Properties);
            Bind(() => ScaleBars, () => SourceToMagnify);
        }

        public Rect SourceToMagnify
        {
            get
            { 
                return new Rect(new Point(leftOffset, 0), new Point(rightOffset, height));
            }
        }

        private List<Line> GetScaleBars()
        {
            _scaleBars.Clear();

            for (int i = centerX; i >= 0; i -= Delta)
            {
                _scaleBars.Add(new Point(i - (Delta), centerY));
            }

            return _scaleBars;
        }
    }
}

无法显示的核心原因 #

1. ViewModel混入UI控件：直接使用System.Windows.Shapes.Line作为数据模型违反MVVM分离原则，ItemsControl会为每个Line对象再创建Line控件，绑定逻辑混乱，且UI控件不应出现在ViewModel层。
2. 集合无变更通知：List<T>不实现INotifyCollectionChanged，集合内容变化时View无法感知更新。
3. 代码逻辑错误：GetScaleBars方法中向List<Line>添加Point对象，类型不匹配，导致列表无有效Line实例；ScaleBars属性每次访问都调用GetScaleBars，若Bind未正确触发PropertyChanged，View无法感知属性更新。

优化方案（符合MVVM规范） #

1. 定义纯数据模型 #

创建存储刻度线坐标的ViewModel类，避免直接使用UI控件：

public class ScaleBar : NotificationObject
{
    private double _x1;
    public double X1
    {
        get => _x1;
        set => SetProperty(ref _x1, value);
    }

    private double _y1;
    public double Y1
    {
        get => _y1;
        set => SetProperty(ref _y1, value);
    }

    private double _x2;
    public double X2
    {
        get => _x2;
        set => SetProperty(ref _x2, value);
    }

    private double _y2;
    public double Y2
    {
        get => _y2;
        set => SetProperty(ref _y2, value);
    }
}

2. 替换为可观察集合 #

用ObservableCollection<ScaleBar>替代List<Line>，支持集合变更通知：

public sealed class MagnifyingPlotViewModel : PlotViewModel
{
    private ObservableCollection<ScaleBar> _scaleBars;
    public ObservableCollection<ScaleBar> ScaleBars => _scaleBars;

    public MagnifyingPlotViewModel(parameters…) 
        : base(parameters…)
    {
        _scaleBars = new ObservableCollection<ScaleBar>();
        Bind(() => SourceToMagnify, 
            () => Lots, () => Of, () => Other, () => Properties);
        
        // 监听SourceToMagnify变化，自动更新刻度线
        PropertyChanged += (s, e) =>
        {
            if(e.PropertyName == nameof(SourceToMagnify))
            {
                UpdateScaleBars();
            }
        };
    }

    public Rect SourceToMagnify
    {
        get
        { 
            return new Rect(new Point(leftOffset, 0), new Point(rightOffset, height));
        }
    }

    private void UpdateScaleBars()
    {
        _scaleBars.Clear();

        for (int i = centerX; i >= 0; i -= Delta)
        {
            // 示例：创建垂直刻度线，可根据需求调整坐标
            _scaleBars.Add(new ScaleBar
            {
                X1 = i - Delta,
                Y1 = centerY - 5,
                X2 = i - Delta,
                Y2 = centerY + 5,
            });
        }
    }
}

主ViewModel同步修改：

public class MagnifyingGlassViewModel : NotificationObject
{
    public ObservableCollection<ScaleBar> ScaleBars => MagnifyingPlotViewModel.ScaleBars;
    public MagnifyingPlotViewModel MagnifyingPlotViewModel { get; }
    public MagnifyingGlassViewModel(lots of parameters here)
    {
        MagnifyingPlotViewModel = new MagnifyingPlotViewModel(parameters going here);
    }
}

3. 调整View布局与绑定 #

使用Canvas作为ItemsControl的面板，避免Line被布局容器拉伸，保持坐标准确性：

<ItemsControl ItemsSource="{Binding Path=ScaleBars}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Line X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}" 
                  Stroke="Black" StrokeThickness="1" Stretch="None"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

关键说明 #

• MVVM分离：ViewModel仅处理数据与逻辑，不包含UI控件，降低耦合度。
• 变更通知：ObservableCollection<T>自动触发集合变更通知，View实时更新。
• 布局容器：Canvas确保Line按原始坐标渲染，避免布局干扰。

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