WPF 自定义PartialProgressBar中ItemsControl添加元素无更新如何修复

问题根因 #

1. MainWindow中的Ranges是私有字段，WPF绑定仅支持公共属性，无法识别私有字段
2. PartialProgressBar的Ranges依赖属性类型为List<HttpRange>，和绑定源的ObservableCollection<HttpRange>类型不匹配，导致绑定直接失效
3. ItemsControl的ItemsPanel模板配置语法错误，未用<ItemsControl.ItemsPanel>节点包裹，自定义的水平StackPanel未生效

修复步骤 #

1. 修正MainWindow的Ranges定义 #

将Ranges改为公共属性，调整初始化顺序，确保绑定时属性已存在：

public partial class MainWindow : Window
{
    // 改为公共属性
    public ObservableCollection<HttpRange> Ranges { get; set; }
    public MainWindow()
    {
        InitializeComponent();
        // 先初始化属性再设置DataContext
        Ranges = new ObservableCollection<HttpRange>();
        DataContext = this;
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        var range1 = new HttpRange(start: 0, end: 50, saveDir: "path", fileId: "1");
        var range2 = new HttpRange(start: 50, end: 100, saveDir: "path", fileId: "1");
        Ranges.Add(range1);
        Ranges.Add(range2);
    }
}

2. 修正PartialProgressBar的Ranges依赖属性类型 #

改为兼容所有集合类型的IEnumerable<HttpRange>，ItemsControl会自动识别ObservableCollection的集合变更通知：

public partial class PartialProgressBar : UserControl
{
    public PartialProgressBar()
    {
        InitializeComponent();
    }

    public long ContentSize
    {
        get { return (long)GetValue(ContentSizeProperty); }
        set { SetValue(ContentSizeProperty, value); }
    }

    public static readonly DependencyProperty ContentSizeProperty = 
        DependencyProperty.Register("ContentSize", typeof(long), typeof(PartialProgressBar), new PropertyMetadata(1L));

    // 类型改为IEnumerable<HttpRange>
    public IEnumerable<HttpRange> Ranges
    {
        get { return (IEnumerable<HttpRange>)GetValue(RangesProperty); }
        set
        {
            SetValue(RangesProperty, value);
        }
    }

    public static readonly DependencyProperty RangesProperty = 
        DependencyProperty.Register("Ranges", typeof(IEnumerable<HttpRange>), typeof(PartialProgressBar), new PropertyMetadata(null));
}

3. 修正PartialProgressBar的ItemsControl布局语法 #

补全ItemsControl.ItemsPanel节点包裹：

<ItemsControl x:Name="list"  ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=Ranges}">
    <!-- 补全ItemsPanel属性节点 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="a" Foreground="Red"/> <!-- 加颜色方便测试显示效果 -->
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

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