WPF ChartControl依赖属性与内部ChartStyle的Lines双向绑定问题

核心问题梳理 #

• ChartStyle的Lines属性未实现变更通知，修改后无法向外传递状态
• LineChart与ChartStyle仅做了单向赋值，未监听ChartStyle的属性变更
• 此前尝试的绑定写法存在错误：Binding.Source需指向cs对象本身，原写法绑定到了cs.Lines的取值，无法触发动态更新

第一步：修改ChartStyle.cs的属性通知 #

ChartStyle已继承BindableBase，只需将自动属性改为支持变更通知的写法，确保Lines修改时触发通知事件：

// 原属性：public double Lines { get; set; }
// 修改为（类型统一为int，避免和依赖属性类型不匹配）：
private int _lines;
public int Lines
{
    get => _lines;
    set => SetProperty(ref _lines, value);
}

如果需要保留double类型，可在后续同步时做强制转换。

第二步：改造LineChart.xaml.cs的双向同步逻辑 #

2.1 给依赖属性添加变更回调 #

给LinesProperty增加属性变更回调，当外部修改Lines时自动同步给ChartStyle并重绘：

public static DependencyProperty LinesProperty =
              DependencyProperty.Register("Lines", typeof(int),
              typeof(LineChart),
              // 新增第三个参数：属性变更回调
              new FrameworkPropertyMetadata(12, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault |
                 FrameworkPropertyMetadataOptions.AffectsRender, OnLinesChanged));

// 新增回调方法
private static void OnLinesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    var chart = d as LineChart;
    if (chart?.cs == null) return;
    // 同步当前控件的Lines到ChartStyle
    chart.cs.Lines = (int)e.NewValue;
    // 触发重绘
    chart.RedrawLineChart();
}

2.2 监听ChartStyle的属性变更 #

在构造函数中订阅ChartStyle的属性变更事件，实现反向同步：

public LineChart()
{
    InitializeComponent();
    cs = new ChartStyle();
    cs.ChartCanvas = chartCanvas;
    // 订阅属性变更事件
    cs.PropertyChanged += Cs_PropertyChanged;
}

// 新增事件处理方法
private void Cs_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(ChartStyle.Lines))
    {
        // 同步ChartStyle的Lines到当前控件的依赖属性，自动触发绑定更新
        Lines = cs.Lines;
    }
}

也可直接用绑定替代事件订阅，写法如下（可删除上述事件相关代码）：

public LineChart()
{
    InitializeComponent();
    cs = new ChartStyle();
    cs.ChartCanvas = chartCanvas;

    // 双向绑定cs.Lines到依赖属性Lines
    var binding = new Binding(nameof(ChartStyle.Lines))
    {
        Source = cs,
        Mode = BindingMode.TwoWay
    };
    SetBinding(LinesProperty, binding);
}

2.3 清理原有冗余逻辑 #

原OnRender和SetLineChart方法的同步逻辑已被属性回调覆盖，可删除SetLineChart中的cs.Lines = Lines;赋值语句，避免重复赋值。

第三步：绑定View与ViewModel的同步（可选，解决现有ViewModel逻辑未生效的问题） #

现有LineGridControlViewModel的Lines属性未和控件绑定，需修改LineGridControlView.xaml的绑定：

<!-- 修改myChart的Lines绑定，直接关联ViewModel的Lines属性 -->
<local:LineChart x:Name="myChart" Margin="10" Lines="{Binding Lines, Mode=TwoWay}"/>

<!-- TextBox改为直接绑定ViewModel的Lines，无需指定ElementName -->
<TextBox x:Name="tbLines" Width="50" Height="25" Text="{Binding Lines, UpdateSourceTrigger=PropertyChanged}"/>

修改后全链路同步逻辑：

• 正向：修改TextBox/ViewModel的Lines → LineChart.Lines依赖属性 → ChartStyle.Lines → 图表重绘
• 反向：点击红色矩形修改ChartStyle.Lines → LineChart.Lines依赖属性 → TextBox/ViewModel的Lines自动更新

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