WPF Controls with MVVM: ItemsControl

How do you put a list of objects on a WPF form dynamically so that if you add or remove an entry, the controls for it are added or removed? In this installment of the WPF Controls mini-series, we are going to look at one possible solution, which is to use the ItemsControl. This is one of those controls that is actually rather easy to use but is, at the same time, also confusing to a lot of people. Let's clear up that confusion.
Full courses: www.iamtimcorey.com/
Source Code: leadmagnets.app/?Resource=WPF...
Patreon: / iamtimcorey
Newsletter signup: signup.iamtimcorey.com/
0:00 - Intro
1:42 - Demo app overview
3:25 - Creating ItemsControl
5:40 - Displaying data: ItemsTemplate
11:52 - Note on data layout
13:41 - Changing layout: ItemsPanelTemplate
17:12 - Changing data set: add and remove buttons
27:42 - Bugs to expect when changing data
30:12 - Summary and concluding remarks
Thanks to Ralfs HBK for the chapter breakdown

[@vvvoid7589]

hi! just wanted to thank you for the vid. i was really struggling with understanding this topic and just couldn't get it from the way the other articles or videos demostrated interactions with the ItemsControl, but your explanations cleared it all up for me in no time. thanks!

[@IAmTimCorey]

I’m glad it was so helpful.

[@mariachaudhry4608]

Your logic level is amazing and your teaching style as well.. wishing you all the best. I am binge watching your WPF videos with ads actually.

[@IAmTimCorey]

Thank you!

[@ganigeybullayev8344]

Thanks Tim Corey teaching method simple and perfectly

[@IAmTimCorey]

You are welcome.

[@mohammedmazin5405]

You save a lot of my time more than you'll ever know. Thank a lot for the same

[@IAmTimCorey]

I’m so glad!

[@joaquinalanalvidrezsoto5054]

Very good explanation, thank you Tim

[@IAmTimCorey]

You are welcome.

[@rafaspimenta]

Many thanks from Brazil!

[@IAmTimCorey]

You are welcome.

[@tomkirbygreen]

So good to know WPF is still A Thing. Thank you for putting this video together.

[@IAmTimCorey]

Oh definitely. WPF is alive and well, just as WinForms is.

[@eddkepner4227]

WinForms can go to sleep already. Love WPF(XAML)!

[@fRozenMovieMaker]

You sir, deserve much more.

[@IAmTimCorey]

I am glad you are enjoying the content.

[@talkathiriify]

Very very Awesome videos. Thank you very much for you effort.

[@IAmTimCorey]

You are most welcome. Thanks for watching.

[@devsealkeen1156]

I made custom desktop icons (in a wpf borderless window), thanks to this tutorial

[@IAmTimCorey]

You are welcome.

[@jennibgmailcom]

Thanks Tim.

[@IAmTimCorey]

You are welcome.

[@n9434178]

Another great video Tim! Perhaps you can point us on your Patreon page to examples of specific WPF controls that you teach about in this WPF series, that have visually attractive designs, just to spark our imagination of what we could create.

[@IAmTimCorey]

I'll give that some thought. Thanks for the suggestion.

[@user-rt9lr4fg5o]

Thank you Tim

[@IAmTimCorey]

You are most welcome. Thanks for watching.

[@user-rt9lr4fg5o]

IAmTimCorey Hi Tim do you have plan to talk about Managed Extensibility Framework

[@bharathyadav3614]

Hi Tim, As always thanks for the content. Keep it going. How about DataGrid next?

[@IAmTimCorey]

That's a pretty good idea. ;-)

[@2005bgva]

Tim thanks for video, it was fantastic, it could be a good idea to add a video with a MVVM frame.

[@IAmTimCorey]

You are welcome.

[@jonestako4721]

thank you sir

[@IAmTimCorey]

You are welcome.

[@36kph]

Thank you :D

[@IAmTimCorey]

You are most welcome. Thanks for watching.

[@nickr8454]

Thank you that makes a lot of sense. I'm looking for a way to logically display a different control based on a type or something. For instance I have a TextBlock I'm using for a label and then a TextBox in the second column. Depending on which type of TextBlock I'm displaying for the row I might want to display a DatePicker instead of a TextBox. Is this possible?

[@user-zy7of1mb5b]

пушка прям! ) спасибо

[@IAmTimCorey]

You are welcome.

[@richardkerr2009]

Tim, firstly thanks for your tutorials, they give real world examples with perfect explanation. Just a quick question on the code in the ViewModel, I notice that you are instantiating a new DataAccess class within each method. Is there any performance benefit of this over instantiating in the constructor of the ViewModel and using within each method?

[@IAmTimCorey]

That is a habit from more complex projects, where the data access class holds information. You could instantiate it once and use it over and over. It would mean that the instance lived a longer life but it would also mean less instantiations.

[@RalfsBalodis]

0:00 - Intro 1:42 - Demo app overview 3:25 - Creating ItemsControl 5:40 - Displaying data: ItemsTemplate 11:52 - Note on data layout 13:41 - Changing layout: ItemsPanelTemplate 17:12 - Changing data set: add and remove buttons 27:42 - Bugs to expect when changing data 30:12 - Summary and concluding remarks

[@IAmTimCorey]

Thank you!

[@nalux]

Actually did an if (People.Count > 1) People.Remove(randomPerson). Before I even got that far into the video, cause I ran it (non debug) and instantly thought. Ah! Index out of range :D

[@IAmTimCorey]

Nice. Always good to remember to think about the edge cases, not just the "standard" ones.

[@anthonyparcker7775]

Hi @IAmTimCorey quick question , is it possible to make an asynchronous call that returns data and then bind the colletion to ItemsControl , how can this be achived inside the constructor of a viewModel. thanks

[@anthonyparcker7775]

Hi @Tim quick question , is it possible to make an asynchronous call that returns data and then bind the colletion to ItemsControl , how can this be achived inside the constructor a viewModel. thanks

[@mdrahbarahmedkhan]

Hi Tim, I need help. Actually I have an Item Control and when I populate the same with data it comes around 50-80 item in the Grid Each Item Control has button. On click of that button I wanted to open popup but that pop-up should be inside the item control area. Could you please help me

[@eddkepner4227]

Please do an in-depth video of XAML(WPF) with a focus on style.

[@IAmTimCorey]

I am working on it.

[@maximalcrazy1472]

Please a video about ResourceDictionary in MVVM and how to use it. This will be great for dynamic content to display ViewModels+Views like a Listview.

[@IAmTimCorey]

Topic suggestion noted and have added to my list, thanks.

[@anaibrahim4361]

you deserve the subscribe event htat i was annoyed from your smile good chanel keep up the good work

[@IAmTimCorey]

I am glad you are enjoying my content.

[@solvedplus858]

great tutorial, but how can Selector.IsSelected can be used in this example? many thanks in advance

[@jinyongyoo5422]

Thank you very much for your Items.Control Video. I was trying to use like this video. I am going to bind one customized view into ItemsControl. I mean I hope to use intead of xxxxXXX But I am always getting No parameterless constructor is defined in ViewModel. How can I resolve this problem?

[@johnedwards1968]

Is ListView the better alternative when you want item selection, or would you recommend Listbox?

[@IAmTimCorey]

ListView is basically an upgraded ListBox (multi-column, etc.) Which one you use depends on your situation: stackoverflow.com/questions/227231/listbox-vs-listview-how-to-choose-for-data-binding

[@henrypuspurs]

Exactly what I was looking for. Unfortunately there isnt a stable release for .NET Core even now, will there be an updated version, maybe theres another package to use now? Or better built in tools?

[@IAmTimCorey]

I use the alpha version for .NET Core (it seems stable) but I can understand not wanting to do that. I will be addressing other MVVM options soon.

[@shawnmofid7131]

Tim, Thank you for the content. Do we have to initialize People inside ShellViewModel() below: public class ShellViewModel { public BindableCollection People { get; set; } public ShellViewModel() { DataAccess da = new DataAccess(); People = new BindableCollection(da.GetPeople()); } }

[@IAmTimCorey]

No, because we are immediately assigning a list to it in the constructor. Therefore, we don't need to initialize it. We only need to initialize it if we are going to add to the list. You have to have a list before you add to it.

[@jeremyflowers8908]

Was missing path=People missing off binding before you swapped to x:Name on ItemsControl? (or is that optional?) (Also done on Textblock/Textbox later)

[@IAmTimCorey]

I am not sure what you are asking. The x:Name=People binds the people list to the ItemsControl.

[@MatthiasLeemann]

Hi Tim I would like to create a data template within a list box. There should be a button on each item. How can I get the click event from the button? I'm using the Caliburn micro. Thanks!

[@IAmTimCorey]

Probably the easiest thing to do is add a manual binding to the buttons and point them at the same method (unless there is a method in each row's model).

[@bassamsami7319]

great stuff for learning and glade to see your respond to the video after more then 1 year of publishing it , my question is why i choose to implement my application using wpf .net over web application using laravel for example??

[@IAmTimCorey]

There are a lot of decisions that go into desktop vs the web. A desktop app just runs on the client machine (or at least it can do that - you can have back-end support APIs like I do in the TimCo Retail Manager series). A web app needs to have a dedicated server to run. A desktop app has the full power of the desktop, from accessing system resources to operating at the speed of the computer it is running on. A web app runs mostly on a web server, which means one server is responsible for doing the processing for every client. It is not infinitely scalable. A web app needs a domain name, SSL certificate, and a configured web server. A desktop app just needs to be installed (or, in the case of single EXE apps, it just needs to be on the machine). The bottom line is that you need to make the choice based upon your specific environment. There is no "right" way that applies to every situation. Sometimes desktop apps are the better choice. Sometimes web apps are a better solution. It isn't about which tech is better, it is about what the needs of the situation are. As for Laravel specifically, that's a different language. If you are already using C# and know it, you could do a desktop app in WPF or a web app in ASP.NET Core. Either way, your application will use C#. Even better, you can reuse most of the code between the two solutions and have two options.

[@bassamsami7319]

@@IAmTimCorey thank you sir for your time and efforts it was informing , what is the server (database) you recommend for single old pc use , using wpf aplication ?

[@Timo-F93]

If I want to display Details if I click on some Person, how this will work?

[@nullentrophy]

Is vanilla WPF MVVM used widely or its frameworks like Caliburn.Micro? And do you have courses on vanilla WPF with MVVM?

[@IAmTimCorey]

Typically people use a tool. Otherwise, it is like reinventing the wheel every time. Which tool varies, depending on preference.

[@KTMFerr]

Hi Tim, What if you button automatic generated under the ItemsControl. How could use CaliburnMicro to access each button click event?

[@IAmTimCorey]

You would apply a manual binding on the event.

[@KTMFerr]

@@IAmTimCorey thanks you the best. I end find it on the docs and did apply to the trigger event 👍👍

[@waynemv]

All my questions have to do with using ItemsControl or a similar control for smooth, efficient, fully-inline user input of list data. That is, I want to know how to design and code efficient (like a spreadsheet) means of getting user input of list data. In the examples I have in mind the data is mostly numeric, but may also involve selecting of options from drop-down lists. I would very much prefer to require a bare minimum of keystrokes from the user, and not require the user touch the mouse unless they want to. The user should be able to displayed data, and add new data to a blank line at the bottom of the list. So, first I'd like advice on how to select the best control to use in the view? I'm considering both ItemsControl and DataGrid. (I've had great difficulty getting DataGrid to work, and have heard it tends to be buggy.) With either control, what is needed within the viewmodel to support it? In particular, how to pick the correct collection type to use, such as Array, List, ObservableCollection or something else? (I saw you used BindableCollection. What namespace is that in? I don't find it in Microsoft's documentation.) Then, how to setup two-way databinding correctly? Then how to know immediately when a field is updated by the user, and identify which ItemsControl it belongs to, which collection that is control bound to, and the index of the edited item within that collection? Should one use events, one-way-to-source binding to the item controls "SelectedItem" property, PropertyChanged notifications on the item's individual properties, or use PropertyChanged or some other event on the whole collection, or use some other trigger? And will this proposed solution work, without duplicating code, if multiple editable lists on the same page display different collections, some of the same type and some of different types? Additionally I'd also like advice on how to generally make the user experience more fluid. It would be nice to learn how to make TextBoxes within the items control select the text immediately upon gaining focus. And how to deal with ComboBoxes inside an items control. (I had trouble getting them to databind correctly, since the datacontext for items in the itemscontrol is not my main viewmodel. I ended up creating a hidden combobox outside the itemscontrol, and then had all the comboboxes inside the items control get their items list indirectly via it rather than directly from the viewmodel. It seems elegant enough.) Furthermore, ComboBoxes sometimes do weird things with the keyboard focus, consuming more keystrokes than out to be necessary, if the user just wants to tab past them. Anyway, if would be nice to know how to make binding update and keyboard focus move to next field immediately upon Tab, Enter, or Cursor Right being pressed within any control inside the items control, whether the child control is a checkbox, textbox, comboBox, etc. On top of that, how to add context menus to the individual list items? Such as for deleting items, moving them up or down the list (for some lists, the order of the items matters), inserting a new item in the middle of the list, merging two items into one, or whatever makes sense for the user case. On top of all that, I am also interested in learning how to best support data validation, and undo-redo functionality. I started out trying to use a DataGrid, but it was just too complicated, bloated, and potentially buggy. I thought using a simpler control like ItemsControl might be easier, since I can add the functionality I want rather than struggling to disable bloat and conflicting default behaviors I don't want. But it still seems really awkward to get working right for gathering user input. I am looking for any advice on how to do all this easier or better, with a solution that is easily maintainable and reusable. Is it easy to get the functionality I want using just standard .Net controls and no third party frameworks? Or should I look into a particular inexpensive ready-made solution? So many web pages and KZbin videos show how to use these controls for the simple display of list data. But I haven't yet found any good detailed, practical, satisfying advice on how to wire them up for getting user input. I hope you are planning to cover these more advanced topics later in your series.

[@IAmTimCorey]

Well, to be honest the DataGrid is very similar to the ItemsControl and should work just as well. I do have a video on the DataGrid coming soon. It sounds like the DataGrid is what you want. As far as the other things, a lot of these have already been demonstrated in the WPF videos (cascading dropdowns, which list to use, etc.) and I think more will be covered in future WPF controls videos (coming soon).

[@FuzzyDPozzy]

I would have wanted to see the stackpanel with a scrollviewer when items are added more than the window itself to be able to scroll through them.

[@IAmTimCorey]

Thanks for the suggestion.

[@draskomi]

What is a way to bind list of usercontrols to Canvas children?

[@IAmTimCorey]

I can add that as a suggestion to the suggestion list.

[@zerosandones7547]

We don't need to bind this button @22:01 to a command? x:Name is only needed? I am new to WPF and have been using commands ALL THE TIME.

[@IAmTimCorey]

That's the benefit of Caliburn Micro - it does binding based upon convention.

[@BGFutureBG]

How would you actually set a ScrollViewer up in this case? Or have any sort of vertical scroll on the WrapPanel? As soon as I'm adding a ScrollViewer with VerticalScrollBarVisibility="Auto" to this, all the items disappear completely for me and no scrollbars show.

[@IAmTimCorey]

I don't know that you can do a WrapPanel or not (I forget which one won't work with ScrollViewer) but if you wrap it with a ScrollViewer (you might need to change to a StackPanel), it should work. Just make sure you set your ScrollViewer to be in the right row and column.

[@BGFutureBG]

Thanks for the quick reply! I've actually found a solution already. Apparently it doesn't work to just wrap the whole ItemsControl under a ScrollViewer (as explained by many answers to this question), however, specifying a ControlTemplate as ItemsControl.Template like: does work! I guess this is due to how the ItemsControl internally creates the content / presentation. Thanks again for the reply :)

[@Nick-bu5lu]

@@BGFutureBG I wanted to implement a ScrollViewer as well and what I did is wrap the whole tag around the ScrollViewer and it worked

[@mrt7948]

Sir, in tournament traker example you showed us how to use delegate to communicate with another form. please how an example in MVVM wpf also.

[@IAmTimCorey]

Thanks for the suggestion. Please add it to the list on the suggestion site so others can vote on it as well: suggestions.iamtimcorey.com/

[@christinamiles]

i was playing with the code and seeing what I could do. I wanted to put the border around it like we have in other in the past, no issues with row definitions, but when I added column definitions, I know why it didn't work, but how would I fix that? I'm didn't want to set the column width because that would defeat the purpose but is that what would have to be done in this case?

[@IAmTimCorey]

I'm not sure what you are trying to accomplish here. Are you trying to put a fixed width border around your grid? If so, you can use margin for that unless you want to be able to style that border separately. Then, you add a fixed height row at the beginning and end and a fixed width column at the beginning and end.

[@christinamiles]

@@IAmTimCorey ​ yes, a fixed-width border, kinda like we did with row and column definitions previously. I wanted to see if I could add elements we had been shown to see what I could add and do with the program. I added the fixed row height, but when I added the fixed column width because the width was auto it didn't wrap as I meant it to. i will just try to add a margin and see how that works. thank you

[@shawnmofid7131]

Is there any WPF or MVVM rule or access control which would prevent us from putting the DataAccess.cs file in the Models, or ViewModel folder? I am trying to understand what kind of code goes where in a WPF / MVVM project and why. I think the View folder content needs access to the Models and ViewModel, I want to validate my assumption and find out if there are other reasons and learn how WPF project is set up and works. Thanks.

[@IAmTimCorey]

I've never tried but I don't think it would be a problem because it doesn't end in "Model" or "ViewModel". However, it is definitely not best practice to do so. There isn't a need to put it in that folder for it to have access to it. I put my data access in a class library and while I don't typically give direct access to the UI, it would work if I tried.

[@shawnmofid7131]

@@IAmTimCorey Thanks. I say it because I downloaded another WPF project and when I asked questions about why my modifications did no work, I was told to learn about WPF. I assumed there may be some access control that governs what content type goes where. I'll read more about it.

[@VinuP2023]

Thank you So much for your efforts Sir. Can you please do a video on MEF. This is going to help many.

[@IAmTimCorey]

It is on the list.

[@fayazkolar]

Please upload video on MEF as soon as possible.

[@sonukumarvaishnev7245]

Vinay Palaksha qwrtyiopgsfhklxbXm 🏈🏐🏈🏸🏐🚉🛰🛫✈️✈️🛫🛫🛫🛫✈️🚉🛰🛫🛰🍭🍭🈂️🛂🛃♿️vzzcqeygb the afternoon

[@iwiggamob1808]

how can i acces a specific object when clicking on thid datatemplate item?

[@zerosandones7547]

what does "shell" mean here @1:52?

[@RobertCastilloC]

Do we use a listbox in this tutorial what minute ?

[@zerosandones7547]

no

[@hamarasansarharsh]

If possible can you make video for custom control in wpf like custom textbox with some validation so that when we want to use that textbox we no need to write code for validation in our viewmodel?

[@IAmTimCorey]

I will add it to the list. Thanks for the suggestion.

[@hamarasansarharsh]

@@IAmTimCorey thanks

[@denisalibabic6219]

How can I do the same with usercontrol? I have 1 usercontrol, and I want to re-use it. Lets say i have some textboxes with numerical values which are all for level 1. Now I want to add levels dynamically,, but save data from textboxes for each level ? Example, I have 1 usercontrol and 10 levels. I want to use the same usercontrol for all levels, but save data for each level...

[@IAmTimCorey]

A UserControl is just like any other control on the form. You can add it dynamically and capture the value of each one like you would with a set of "common" controls.

[@denisalibabic6219]

@@IAmTimCorey Thanks Tim, can you recomend one of your video tutorials or a sample wpf app to see this in action?

[@mhndak]

hello sir, can you help me plz? I added a button inside itemcontrol and when I click it won't work, but when I put the button outside the itemcontrol tag it will work idk what's the problem

[@IAmTimCorey]

My guess is that you need to manually bind to the button, since that button is repeated. Unless you have the button code inside of the model inside of the list you are displaying for your itemcontrol.

[@hamarasansarharsh]

You can bind command to button i think if you are not using relativesource in binding then that command will not trigger

[@Brooxxxyyyy]

The one thing I don't understand is how it is possible to execute a function in the ViewModel when the button has no click event in the View. e.g. the AddPerson() method and the Add new Person button. Can anyone explain this to me? 😅

[@IAmTimCorey]

If you go back and watch my WPF with MVVM video, I talk through the MVVM pattern and Caliburn Micro specifically. It wires up the button to the method using naming conventions. Since the button is named AddPerson, it will call the AddPerson method in the viewmodel.

[@Sioox]

How did your code know you want to generate 10?

[@IAmTimCorey]

At 2:11, you will see that the GetPeople method has a default of 10.

[@Sioox]

@@IAmTimCorey thanks

[@jeengl1881]

Wouldn't it be perfect if you had a discord server where we could suggest and ask stuff?

[@IAmTimCorey]

It would be nice but I simply don't have the time right now.

[@eyoakak]

sir could you please help me on this, what is the button was in place of the textblock and i when i click on a specific button it opens something, and when i click on the another button it opens another environment. i tried it but it is not working, i would be happy if you could give at least a clue of what i am supposed to do. Thank You

[@IAmTimCorey]

I'm sorry, I don't understand what you are asking. Maybe watch the TimCo Retail Manager series. I use WPF for the front-end there and I do more tasks that might address what you are asking about.

[@eyoakak]

@@IAmTimCoreyall I want sir, is a responsive window that I can place buttons on, so that when the window is maximized or resized the buttons will automatically be align and not scattered. Also each buttons should take the user to different environments.

[@davesimon9192]

@@eyoakak Place all the controls in a ViewBox WPF control. The view box is made exactly for your need. It resizes everything as the window resizes.

[@eyoakak]

@@davesimon9192 Thank you, i will try that

[@MdImran-qb3bm]

Great video... sir, can u also explain how to validate the textbox value inside item control

[@IAmTimCorey]

I will add it to the list. Thanks for the suggestion.

[@MdImran-qb3bm]

@@IAmTimCorey Sir, thanks for your prompt reply. Sir i am working on one project if u can upload is asap. I really appreciate it.

[@arslanaslam8288]

i want to add button inside itemcontrol and when i click on that button its show me the data of that itemcontrol template how can i do this??? Thanx in Advance

[@arslanaslam8288]

In button click event

[@IAmTimCorey]

This is something that you will need to work out. Break the problem into steps and then take it one step at a time.

[@abdalghanikattan8026]

How to disable the button

[@abc00gh]

How can I pass a person to RemovePerson if I want to delete a Specified person?

[@IAmTimCorey]

You would need to capture the selected person and then just delete that person.

[@abc00gh]

@@IAmTimCorey Thanks Tim for the prompt answer. But how to capture it?

[@RRaiho]

​@@abc00gh He explains here 22:41 why ItemsControl is not what you need. (Look into DataGrid)

[@boost5207]

is it possible, to make this video with getting data from a database? this is all very confusing. Like, lets say i have a database of a person with various information about him, what now?

[@IAmTimCorey]

Those are two separate actions. I purposefully separated them because the UI should not know about the database and the database should not know about the UI. When it comes to these controls in WPF, you should just be dealing with lists of your model (class with properties that hold your data).

[@boost5207]

@@IAmTimCorey thanks for a such fast reply. I've come to understand, i am trying to do something i have no knowledge or experience of. Ill keep reading and learning, how everything should be done, more. Thank you for clarification.