将模型中的一组数据对象绑定到视图中的一组控件 (WPF)

Question

我在这里提出的另一个 WPF 问题。

目前，我需要将模型中的数据对象 ObservableCollection 绑定到视图中的一组 UserControl。数据对象的数量经常变化，我需要随着集合的变化动态创建这些用户控件。当前的代码如下所示：

private void viewModel_PropertyChanged( object sender, PropertyChangedEventArgs e )
{
    if( e.PropertyName.Equals( "SomeCollection" ) )
    {
        UpdateUI();
    }
}

private void UpdateUI()
{
    foreach( MyUserControl elem in _uiElements )
    {       
        elem.MouseLeftButtonDown -= elem_MouseLeftButtonDown;
        // more event handler unhooking
        _MyCanvas.Children.Remove( elem );
    }

    _uiElements.Clear();

    foreach( DataObj dataObj in ViewModel.DataObjects )
    {
        MyUserControl newElem = new MyUserControl();
        _uiElements.Add( newElem );

        fpv.MouseLeftButtonDown += fpv_MouseLeftButtonDown;
        // more event handler hookups
        newElem.DataObject = dataObj;       

        _MyCanvas.Children.Add( newElem );
        Point dest = dataObj.ScreenPoint;
        Canvas.SetLeft( newElem, dest.X );
        Canvas.SetTop( newElem, dest.Y );
    }
}        

因此，如您所见，我（在代码中）响应更改的属性并动态创建一组新的 UserControl。当相应的数据对象被“移动”（它包含 Point 属性）、添加、创建或设置整个集合时，将调用此代码。问题是这可能需要一秒或更长时间（最坏的情况下有 100 多个元素），这是不可接受的。控件本身很简单；只有一个网格和一个形状（椭圆）。

太长了；

---

所以想问问大家有没有遇到过类似的情况。动态创建控件以响应集合中的更改，并从 UI 中添加/删除它们，类似于 ItemsSource 属性在 ComboBox、ListBox、DataGrid 等中的工作方式。问题是这些控件需要允许鼠标拖动以及在画布中的任意位置布置区域。感谢任何帮助，提前致谢。

Answer 1

为什么不将虚拟化 ItemsControl 与 ItemTemplateSelector 一起使用？如果控件很简单，则应该可以使用数据模板，因此无需创建用户控件。由于项目控件是虚拟化的，因此只会渲染可见项目，因此速度应该更快。

Answer 2

这正是 ItemsControl 的用途，但是当您需要使用 Canvas 并从数据中提取位置时，布局会出现一些问题。它并不复杂，但需要几个不同的部分才能正常工作。下面是一个快速示例，假设您的 ViewModel 是 DataContext：

<ItemsControl ItemsSource="{Binding DataObjects}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Left" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content.ScreenPoint.X}" />
            <Setter Property="Canvas.Top" Value="{Binding RelativeSource={RelativeSource Self}, Path=Content.ScreenPoint.Y}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- your UserControl goes here -->
            <Ellipse Fill="Red" Width="20" Height="20" ToolTip="{Binding ScreenPoint}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

您还需要确保您的 DataObjects 属性是 ObservableCollection，然后您将能够添加和删除对象，并在 UI 中自动更新所需要的项目。已更改，有助于解决刷新性能问题。