Move objects around multiple ObservableCollection

Question

I have three Items Control, detailed bellow, currently I have three accompanying Observable collections, one for each control. I want to be able to move one of the objects from one of the group boxes and for it to appear in another. Currently, I am removing it from the original observable collection and then adding it to the new one. This however has lead to threading issues, where the UI doesn't always update the move. Is there any better way of moving around the objects between observable collections. Such as having only one, but changing which are rendered in which control? Any help is appreciated.

XAML:

<GroupBox x:Name="OnTimeGroup">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel>
            <ItemsControl x:Name="OnTimeCards">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <UserControl:OnTimeCard Visibility="Visible" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </ScrollViewer>
</GroupBox>
<GroupBox x:Name="LateGroup">
    <StackPanel>
        <ItemsControl x:Name="LateCards">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <UserControl:LateActionNeededCard Ignore="LateCardIgnoreClicked" Publish="LateCardPublishClicked" Visibility="Visible" />
                    </materialDesign:TransitioningContent>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </ScrollViewer>
</GroupBox>
<GroupBox x:Name="PublishedGroup">
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel>
            <ItemsControl x:Name="PublishedCards">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <UserControl:PublishedCard Update="PublishedCardUpdateClicked" Visibility="{Binding IsVisible}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>
        </ScrollViewer>
    </GroupBox>

C#

private ObservableCollection<LiveTime> OnTimeCardsCollection = new ObservableCollection<LiveTime>();
private ObservableCollection<LiveTime> LateCardsCollection = new ObservableCollection<LiveTime>();
private ObservableCollection<LiveTime> PublishedCardsCollection = new ObservableCollection<LiveTime>();

Pseudo Code of Current Code

When the user clicks a button on the object, remove it from the current observable collection. Then create a brand new object in the adjoining observable collection.

If you are having threading issues, then perhaps you should be doing the move on the UI thread? I have also seen problems where if you don't clear the 'currently selected' of the collection you are removing from, then it crashes. — Neil, Aug 22 '18 at 16:25
The problem with my old solution is it worked if you were only moving a couple of objects, if you were however moving 5+ in a close time period the program wouldn't update the GUI to reflect that. It would never crash, just not reflect the change. — J34245, Aug 22 '18 at 17:03
So, pause the `OnPropertyChanged` mechanism until all changes have been made, and then release it afterwards. Then there is only 1 'change' instead of 5. — Neil, Aug 22 '18 at 17:05
I didn't know that was a thing, thank you. I will look into this and provide an update. — J34245, Aug 22 '18 at 17:10

score 0 · Answer 1 · answered Aug 23 '18 at 06:08

You have two different questions here:

Changing observable collections and the UI reacting to it: Observable Collections are made for this, and you shouldn't have a problem removing/adding. Of course, the exceptions are when the work is not done on the UI thread or if the synchronization is not done properly. I'd recommend enabling collection synchronization instead of marshalling every call to the UI thread. Refer to this post about collection synchronization
Having one collection for all three items control, but show different things: Yes. You could do this with a CollectionView by applying the appropriate filter. Here is an article that talks about CollectionViewSource

Move objects around multiple ObservableCollection

1 Answers1