How to use a Tab Control and Tab Items with MVVM in C#

today I'm going to show you how easy it is to work with tab controls and tabs in WPF using the model view viewmodel pattern so we have two goals one is we have a basic application where if I click my new tab button I want to be able to add tabs to the tab control - I want to be able to close tabs using a button within the tab header such as an X icon or something of sorts and three I want to be able to work with various types of tab content so we're going to solve all that now real briefly this is our basic view model behind this window we just have our new tab command and a method which we'll fill in with some logic here in a moment so the first thing we need to do is define a Tabak abstraction that we want to work with and we're going to start with an interface or I call that I tab and we need the basic things that are required to work with a tab the first one being a name which will get displayed in the tab header the second one being the command that will actually close the tab and lastly the event that the close command will actually raise like so next we want to reuse code because we're going to have various types of tab content so we're going to create an abstract class and our close command is pretty straightforward it's just going to raise the close requested event and I've included action command in the project this will be similar to a delegate command pretty straightforward so now that we have our basic scaffolding or our abstraction of a tab we need to expose the tab content for our tab control and we're going to do that through a tabs property so this will be a generic collection of I tab and this will actually underneath be a observable collection so WPF can listen to the collection property changing notifications okay so now that we have that in place we can go back to our tabs control and set the item source to our tabs property and then we need to tell the tab control how to display these tabs so the first thing is we're going to create the template for the actual items which represent the tab headers and this will be the item template and here we're going to use a data template and this data template will have a text block and a link that when clicked will basically close the tab and this will be again our I tab interface and we're going to have just a simple text blog and we'll bind this to our name property on our tab and then for our hyperlink this will just execute the close command and we'll use an X in place of a some sort of graphic so that's going to tell us how to display the tab headers now we need to tell the tab control how to display the actual content so to do this again we're going to use data templates but we're going to include them as resources and this will avoid having to write a c-sharp class that derives from a template selector essentially or we can do all this in zamel so we're just going to create data template we're going to do today to type now we've not created this yet but we're going to make a very basic example we're going to use a date tab and we'll create that here in a moment and we'll have a date tab view which will also create a moment so let's start with our date tab and we'll just do this up here for now which will be very straightforward this will inherit our tab class and very simple we're going to set the name of our tab to the current date and time like so now we need the view which will be a WPF user control and we're just going to call this date tab view and very similar we're going to take a text block and we're just going to go ahead and display the name of the tab here as well so nothing fancy now we can wire these up in our zamel and our main window and we'll have all that in place now so far all we've done is wrote enough code where if we were to have a tab in the tabs collection and let's go and add our date tab the application will be able to display that so here we have in our tab header our name if I were to click on that we have our content and I can click this button and it would invoke the close command event now I've not done anything to listen in on that yet to be able to close the tab so we're going to do that next so the first thing that we need to do is actually create a event handler for when the underlying collection changes so we're going to move this to a class level number and then we're going to subscribe to the collection changed event and then of course set our tabs property to that value now in here as tabs are added or removed we need to basically subscribe and unsubscribe to the clothes requested event so the way we're going to do that is basically say if the action is that the tab is added and typically it'll be one item we're going to subscribe to clothes request an event like so and in the case that it's removed from the collection we're going to do the same thing except this will be an old item and we're going to unsubscribe from the event and we're going to create these like so and we'll go ahead and move this up right there and then here when the tab is requesting that it should be closed we're going to remove it from the tab collection and this will be the cinder essentially pretty straightforward and once that item is removed from the collection through WPS binding it will automatically remove it from the items source so if we were to run this again and actually we need to wire this button up real quick let's go ahead and do that so we're going to say tabs add new date tab just as an example so there's our tab I can click on it and I can click the close event and it removes the tab and of course if I needed to work with different kinds of tabs I can come in here and create another tab class and do the same thing I can add whatever properties and things I need and then create another view that would display that particular kind of tab and then I would add that as a resource to tab control so then it would know how to take a time tab view model and display as a time tabview so you'll have multiple data templates in here for the different kinds of tabs you want to display so that's it that's how you work with tab controls and tabs in WPF and mvvm I've also included in the project a example unit test of course on how you might write unit tests for tab functionality in this case I did one for removing the tab thanks for watching if you enjoyed the video definitely give a thumbs up below

Channel: David Anderson

Views: 75,412

Keywords: tab control wpf, tab control wpf mvvm, tab control mvvm c#, tab control wpf mvvm c#, close tab control mvvm, tab item wpf, tab item wpf mvvm, tab items wpf, tab items wpf mvvm, tab control, tab item, wpf mvvm tab control, wpf mvvm tab item, wpf mvvm tab items, wpf mvvm, wpf mvvm c#, mvvm wpf, c# wpf, wpf c#, tab content, tab content wpf, tab content wpf mvvm, close tab wpf mvvm, tabs wpf, wpf tabs, c#, wpf, xaml, programming, tabcontrol, .net, content controls

Id: rFhmTccRUpQ

Length: 10min 9sec (609 seconds)

Published: Sat Jan 21 2017