Reusing visual tree when moving items between two ItemControls - c#

I have two ObservableCollections in my ViewModel. Both of same generic type.
Window has two ItemsControls each with ItemsSource bound on its own ObservableCollection from ViewModel.
Both use same same ItemTemplate. This ItemTemplate is very complex user control.
It's all done by the book.
In some cases, I move item from one collection to another. UI updates correctly. However, as control is complex, it needs about 1-2sec to render when it is recreated in new ItemsControl. And since this happens on drag and drop operation, it is not user friendly.
What I would like to do is to somehow preserve existing instance of ItemTemplate from source ItemsControl and reuse it in destination. I don't know if it is even possible, I couldn't find anything about it online.
I believe setup is fairly simple, but if needed I'll write some simplified version of code (I can't share the real code).
Thanks for any help.

What I would like to do is to somehow preserve existing instance of ItemTemplate from source ItemsControl and reuse it in destination. I don't know if it is even possible, I couldn't find anything about it online.
I am afraid it is not. When you disconnect an element from the visual tree and then add it back to a different parent element at a later stage, all elements that make up the control will be re-rendered.

Related

What's the difference between a stackpanel with datatemplates or a listview with listitems

I'm creating a WPF program that consumes rest api data. I want to implement lazyloading and infinite scroll on the data and programmatically create and add either custom data templates or listitems very similar to this design
I'm just confused as to which approach to take and what benefits/costs each provides
Easy choices:
Everyone uses MVVM so use MVVM.
Data Templating is a fundamental of wpf and building UI in code is not recommended - so use data templating.
You can dynamically add templates to resources by building xaml as strings. This is the MS recommended way to build any dynamic UI. Those strings can come from flat files, a database directly or a web service and you can build them by manipulating txt files or serialising controls.
A huge plus of this is you have the markup "right there". So when things go pear shaped you can paste into an experimental solution and see the errors light up in the xaml or see what the user is seeing.
If datatype associated templating doesn't suit for some reason then you could write a datatemplateselector and put your logic in there.
I'm not sure how you expect that to scroll exactly but I'd go with a listbox, some datatemplates associated with a type per view. Assuming the items can have different views - you just seem to have that "gilded" button or tag as an option.
Load your data into viewmodels with one per row.
.Add to an Observablecollection which is a public property in a viewmodel.
Bind that to the itemssource of a listbox.
They are then templated into UI.
A listbox has a scroller built in but you could re-template if you wanted to scroll using some other approach.
A StackPanel is a Panel that arranges child elements into a single line that can be oriented either horizontally or vertically.
A ListView is an ItemsControl that you can bind to an IEnumerable of objects and is used to present a collection of items.
What you should do is to create an ItemsControl with an ItemTemplate that corresponds to a scrollable item in the list. There is a basic example available here and you will find a lot more examples online.

Multiple custom controls affects control visibility

Ok, this is going to be a 1000ft long question, but there's a lot to cover so here goes:
I am creating a paged items control, the purpose of which is to display very large collections in a paged format. I've created a repository on GitHub which can be found here. I have removed any styling for simplicity.
Upon starting the application, it looks like this:
This is pretty straightforward really, there's navigation buttons, an items per page selector but that isn't really important. The problem here is when you click the button "Open New Window".
This will open a new MainWindow, but on the first window, the collection disappears, as shown below:
The image above shows the old window in front, as you can see, there is no list of content as there is on the new window.
So, after smashing my head against a wall for a couple of hours, I am in need of assistance. I'll provide an overview of how the project is structured.
AnagramPagedItemsControl
The control being used for displaying the content is a custom control called AnagramPagedItemsControl, it is responsible for handling navigation between pages. I think the key property here is the PagedCollection.
The PagedCollection dependency property holds the collection which is bound to the Models property in the TestItemsViewModel.
TestItemsViewModel
This is the DataContext of the MainWindow, each window instance should create it's own view model. The CreateTestItems() method is responsible for creating the list of test items.
LazyPagedCollection
The purpose of this collection is to encapsulate the logic of a paged observable collection, it only loads pages when they are needed, hence the laziness.
It exposes methods like NextPage which are called in the AnagramPagedItemsControl when the user clicks on the various navigation buttons. The view model can also call navigation on the LazyPagedCollection, this allows the view model to call navigation without having to go through the view to do it.
TL;DR
When I create a new Window, the content of the previous window disappears. The problem is almost certainly with the control however I am stuck as to how to fix the problem.
This is quite a large problem to look at so I'd be very grateful for anyone who can look into it. Again, the source code is here, please feel free to suggest alternatives or pick out anything that I may have overlooked.
Had some time to spare, so:
The problem is the setter for the CollectionView property in the style for AnagramPagedItemsControl in generic.xaml.
This does not instantiate a new ListBox every time the style is applied; it will just create the one ListBox, the first time the style is created, and use that value over, and over again. So in effect, every instance of MainWindow shares the same ListBox.
You can see this by setting the Tag property of PART_CollectionView to (for instance) "1" in SetupBindings(ItemsControl PART_CollectionView). When you open a new window, you'll see that PART_CollectionView.Tag contains the same value you previously assigned.

Displaying multiple FrameworkElement items in WPF

I have custom FrameworkElement (displays 3D model, and allows to control camera), and i need to display multiple items of this type simultaneously (they should be overlapping). Items are stored in list.
For now, i can achieve that by simply placing few ContentControls in Grid, and using my FrameworkElements as Content. And it works well. But, any attempt to achieve that result for custom ammount of elements fails. I've tried to use ItemsControl, but it just doesn't work.
Is there any convenient way to display multiple items from source list, placing them in single position?
Update
Canvas and ItemsControl are simply not working for me. Even if i simply move single element there.
That means,
<ContentControl Content="{Binding DrawableElements[0]}"></ContentControl>
works well, but
<ItemsControl>
<ContentControl Content="{Binding DrawableElements[0]}"></ContentControl>
</ItemsControl>
doesn't work at all, although, it's pretty basic approach. Same goes to Canvas. I don't know, if i'm using it right, but i just can't understand, why simple ItemsControl with single element doesn't want to be displayed.
Update #2
If i have class, which has certain properties, with FrameworkElement among them, my ItemsControl, which uses list of this class instances, will work just fine with any properties EXCEPT FrameworkElement. Now i really can't understand what happening.
Note:
I'm trying to follow MVVM pattern, so there should be no direct impact on UI from code. That's why I've chosen ContentControl in first place. Otherwise i might simply add new FrameworkElements as children to simple Grid.
The problem was, thas ContentControl inside ItemsControl was setting its size params to 0 by default, so, basically, my FrameworkElements were just zero sized. I had to specify Widht and Height manually to make it visible.

How do I access the controls in a WPF DataGrid

In good old (well!!) WinForms days the datagrids row used to the be the actual control and you could then access the DataItem.
In WPF its all flipped and dataGrid.Items is just the source data.
I am probably doing this the wrong way round as im a bit of a WPF newb but how can I iterate through the rows of my gridview grabbing the values from certain labels, textboxes etc?
Yes, you are doing this the wrong way round. What you should be doing is iterating through the items in your data source - it's where all the values are, after all.
It's possible to iterate through the WPF objects, but it's not trivial. And there's a significant problem that you'll run into if you try.
You can use the VisualTreeHelper class to search the visual tree and find the DataGrid's descendant objects. If you play with this long enough, eventually you'll figure out how to find the specific controls you're looking for. But the DataGrid (actually, the VirtualizingStackPanel in its control template) virtualizes its visual children. If an item hasn't appeared on the screen yet, its WPF objects haven't been created yet, and you won't find them in the visual tree. You may not be able to find what you're looking for, not because you don't have a way of finding it, but because it doesn't exist.
If you're using value converters and formatting in your bindings (which is the only reason I can think of that you'd want to look at the WPF objects and not the underlying data items), I'm afraid the answer is: don't do that. Do the value conversion and formatting in your data source, and expose the results as properties that can be bound to directly.
It's certainly possible to use WPF without using the MVVM pattern. But this is the kind of brick wall that you can run into if you don't.
You can use this
public DataGridRow TryFindRow(object item, DataGrid grid)
{
// Does not de-virtualize cells
DataGridRow row = (DataGridRow)(grid as ItemsControl).ItemContainerGenerator.ContainerFromItem(item);
return row;
}
where item represent the data displayed on the row.
Hope this helps.

Is binding an ItemsControl to an ObservableCollection<T> more efficient than a List<T>?

I have a render-heavy item template in an ItemsControl and want to minimize the recreation of child item templates when ItemsSource signals a change. I am wondering if, because ObservableCollection can tell WPF precisely what has changed (as opposed to just the whole list), if it is more efficient in rendering changes to the collection, or if WPF is smart enough to reuse previous item views if it detects the same item is still in the changed list.
Your suspicion is correct. WPF will not reuse previous views. If you replace the ItemsSource of an ItemsControl with a new List, it will create completely new views for each item in the list, even if the same items were in the old list.
You can test this yourself by putting a custom control in the ItemTemplate and adding a breakpoint or debug logging to its constructor. If you replace the ItemsSource with an identical list, you will see your control constructed once for each item in the list. On the other hand, when an item is added to an ObservableCollection you will only see it called once.
Note that the ItemsControl can reuse the container (such as ListBoxItem) if you are using a virtualizing panel and have container recycling enabled. See Link. It still can't reuse the contents of the container, however.
ObservableCollection only informs of addition and removal of objects - so perhaps not as precise as what you were expecting (if an object within the list changes, ObservableCollection will not fire off any notifications).

Categories

Resources