添加到可观察集合时更新UI [英] Update UI when adding to observable collection

问题描述

iv'e有2个项目控件绑定到2个可观察的集合

iv'e got 2 itemscontrols bound to 2 observable collections

我的ItemsControls:

    <ItemsControl Grid.Column="4"  Name="Pipe19"  ItemsSource="{Binding Path=Pipes[19].Checkers}" Style="{StaticResource ItemsControlStyle}" ItemsPanel="{StaticResource TopPipePanelTemplate}" />
    <ItemsControl Grid.Column="5"  Name="Pipe18"  ItemsSource="{Binding Path=Pipes[18].Checkers}" Style="{StaticResource ItemsControlStyle}" ItemsPanel="{StaticResource TopPipePanelTemplate}" />

通过样式的定义:

   <Style TargetType="{x:Type ItemsControl}" x:Key="ItemsControlStyle">
        <Setter Property="ItemTemplate" Value="{StaticResource PipeDataItem}"></Setter>
        <Setter Property="AllowDrop" Value="True"></Setter>
        <EventSetter Event="PreviewMouseLeftButtonDown" Handler="ItemsControl_MouseLeftButtonDown"></EventSetter>
         <EventSetter Event="Drop" Handler="ItemsControl_Drop"></EventSetter>
   </Style> 

都被认为是放置目标，它们包含椭圆项，我需要将它们从一个拖到另一个.问题在于操作的添加"部分无法呈现到用户界面.

both are considered drop targets , they contain ellipse items which i need to drag from one to the other . the problem is the Add part of the operation doesn't get rendered to the UI .

可视助手:

从右到左以椭圆形拖放时:

when drag drop as ellipse from the right one to the left :

这是捕获椭圆并保存源代码控制的代码

    private void ItemsControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        ItemsControl control = (ItemsControl)sender;
        UIElement element = control.InputHitTest(e.GetPosition(control)) as UIElement;

        if (element != null)
        {
            Ellipse ellipse = element as Ellipse;
            DragSource = control;
            DragDrop.DoDragDrop(ellipse, ellipse, DragDropEffects.Copy);
        }
    }

这是将椭圆放到目标上的代码:

    private void ItemsControl_Drop(object sender, DragEventArgs e)
    {
        ItemsControl target = (ItemsControl)sender;
        Ellipse ellipse = (Ellipse)e.Data.GetData(typeof(Ellipse));
        ((ObservableCollection<Checker>)DragSource.ItemsSource).Remove(ellipse.DataContext as Checker); 
        ((ObservableCollection<Checker>)target.ItemsSource).Add(ellipse.DataContext as Checker); 
    } 

Checkers集合的描述如下:(请注意，它们是itemscontrols ItemsSource:

the Checkers collections are described as follows : (Take notice that they are the itemscontrols ItemsSource :

public class Pipe  
{    
    private ObservableCollection<Checker> checkers;
    public ObservableCollection<Checker> Checkers
    {
        get 
        {
            if (checkers == null)
                checkers = new ObservableCollection<Checker>();
            return checkers; 
        }            
    }        
}

ItemsControl_Drop事件后的结果是，只有remove会更新UI，而目标上的add不会添加(我希望新项目会出现在左侧，我在itemsource上称为Add:

after the ItemsControl_Drop event the result is that only the remove updated the UI but the add on the target add not (i would expect that a new item would appear on the left one which i called Add on it's itemsource :

另一个视觉辅助工具:

有什么想法吗?

推荐答案

我想我知道发生了什么事.我打赌Pipes []不是ObservableCollection.尝试使用Pipe1和Pipe2.从Pipe1删除并添加到Pipe2.

I think I know what is going on. I bet Pipes[] is not an ObservableCollection. Try it with Pipe1 and Pipe2. Remove from Pipe1 and add to Pipe2.

这篇关于添加到可观察集合时更新UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！