基于依赖属性作为ItemSource的自定义附件UserControl问题求助

嘿，我来帮你搞定这个问题！你遇到的核心问题是绑定时机不对——你在UserControl的构造函数里就调用了GenerateFileItem，但这时候ViewModel的FilesAttachment还没完成绑定，所以ItemSource的计数自然是0。咱们一步步来解决：

你的PrepareData函数有两个小问题：没有初始化FilesAttachment就直接Add（会空引用），而且函数定义了返回值但没返回。修改成这样：

// 属性定义
ObservableCollection<FileAttachmentModel> filesAttachment;
public ObservableCollection<FileAttachmentModel> FilesAttachment {
    get { return filesAttachment; }
    set { filesAttachment = value; OnPropertyChanged("FilesAttachment"); }
}

// 准备示例数据的函数
private ObservableCollection<FileAttachmentModel> PrepareData() {
    // 先初始化集合，避免空引用
    filesAttachment = new ObservableCollection<FileAttachmentModel>();
    filesAttachment.Add(new FileAttachmentModel() { FileName = "TrackA", FilePath = "D:\\trackA.png" });
    filesAttachment.Add(new FileAttachmentModel() { FileName = "TrackB", FilePath = "D:\\trackB.png" });
    filesAttachment.Add(new FileAttachmentModel() { FileName = "TrackC", FilePath = "D:\\trackC.png" });
    return filesAttachment;
}

// 在ViewModel构造函数里调用赋值
public YourViewModelName() {
    FilesAttachment = PrepareData();
}

你原来的XAML里设置了DataContext="{Binding RelativeSource={RelativeSource Self}}"，又在WrapPanel里重复绑定，反而会干扰外部传入的ViewModel绑定。简化后：

<UserControl x:Class="MailSender.Controls.FileAttachment.FileAttachment"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MailSender.Controls.FileAttachment"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Name="fileAttachmentUC" >
    <Grid>
        <WrapPanel x:Name="wrapPanel">
        </WrapPanel>
    </Grid>
</UserControl>

核心问题是构造函数调用GenerateFileItem太早，我们需要等依赖属性绑定完成后再生成UI，还要监听集合的增删改来动态更新WrapPanel：

// 修改依赖属性注册，添加属性变化回调
public static readonly DependencyProperty ItemSourceProperty = 
    DependencyProperty.Register(
        "ItemSource", 
        typeof(ObservableCollection<FileAttachmentModel>), 
        typeof(FileAttachment),
        new UIPropertyMetadata(null, OnItemSourceChanged));

// 包装属性不变
public ObservableCollection<FileAttachmentModel> ItemSource {
    get { return (ObservableCollection<FileAttachmentModel>)GetValue(ItemSourceProperty); }
    set { SetValue(ItemSourceProperty, value); }
}

// 依赖属性绑定完成后的回调
private static void OnItemSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    var control = d as FileAttachment;
    if (control == null) return;

    // 移除旧集合的监听
    if (e.OldValue is ObservableCollection<FileAttachmentModel> oldCollection) {
        oldCollection.CollectionChanged -= control.OnItemSourceCollectionChanged;
    }

    // 处理新集合
    if (e.NewValue is ObservableCollection<FileAttachmentModel> newCollection) {
        newCollection.CollectionChanged += control.OnItemSourceCollectionChanged;
        control.GenerateFileItem(newCollection); // 生成现有项
    } else {
        control.wrapPanel.Children.Clear(); // 空集合则清空UI
    }
}

// 监听集合的增删改事件，动态更新UI
private void OnItemSourceCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) {
    var collection = sender as ObservableCollection<FileAttachmentModel>;
    if (collection == null) return;

    switch (e.Action) {
        case System.Collections.Specialized.NotifyCollectionChangedAction.Add:
            // 新增单个/多个项
            foreach (var item in e.NewItems) {
                if (item is FileAttachmentModel fileItem) {
                    AddSingleFileItem(fileItem);
                }
            }
            break;
        case System.Collections.Specialized.NotifyCollectionChangedAction.Remove:
            // 根据FilePath找到对应的UI元素移除
            foreach (var item in e.OldItems) {
                if (item is FileAttachmentModel fileItem) {
                    var targetPanel = wrapPanel.Children.OfType<StackPanel>()
                        .FirstOrDefault(sp => (sp.Children.OfType<Button>().First()?.Tag as string) == fileItem.FilePath);
                    if (targetPanel != null) wrapPanel.Children.Remove(targetPanel);
                }
            }
            break;
        case System.Collections.Specialized.NotifyCollectionChangedAction.Reset:
            wrapPanel.Children.Clear();
            break;
    }
}

// 抽出生成单个项的逻辑，复用性更强
private void AddSingleFileItem(FileAttachmentModel item) {
    StackPanel sp = new StackPanel() { Orientation = Orientation.Horizontal, VerticalAlignment = VerticalAlignment.Center };
    TextBlock tbFileName = new TextBlock() { Text = item.FileName };
    Button btFilePath = new Button() { Content = "X", Tag = item.FilePath };
    btFilePath.Click += BtFilePath_Click;
    sp.Children.Add(tbFileName);
    sp.Children.Add(btFilePath);
    sp.Style = Application.Current.FindResource("stackFileItem") as Style;
    wrapPanel.Children.Add(sp);
}

// 修改GenerateFileItem，先清空再生成
void GenerateFileItem(ObservableCollection<FileAttachmentModel> lstFileAttachment) {
    wrapPanel.Children.Clear();
    if (lstFileAttachment != null && lstFileAttachment.Count > 0) {
        foreach (var item in lstFileAttachment) {
            AddSingleFileItem(item);
        }
    }
}

// 构造函数里不要再调用GenerateFileItem了！
public FileAttachment() {
    InitializeComponent();
}

其实手动生成UI不是最优解，用ItemsControl配合DataTemplate更符合MVVM，还能自动监听集合变化，不需要自己写CollectionChanged逻辑：

<UserControl x:Class="MailSender.Controls.FileAttachment.FileAttachment"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MailSender.Controls.FileAttachment"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Name="fileAttachmentUC" >
    <Grid>
        <ItemsControl ItemsSource="{Binding ElementName=fileAttachmentUC, Path=ItemSource}">
            <!-- 指定WrapPanel作为布局容器 -->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <!-- 定义每个附件项的样式 -->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Style="{StaticResource stackFileItem}">
                        <TextBlock Text="{Binding FileName}" />
                        <Button Content="X" Tag="{Binding FilePath}" Click="BtFilePath_Click" />
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

这种方式下，后台只需要处理按钮的点击事件即可，UI完全由XAML控制，更简洁易维护。

你的使用方式保持不变就可以了：

<control:FileAttachment DataContext="{StaticResource vmMainWindow}" ItemSource="{Binding FilesAttachment,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>

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