WPF TabControl Events
-
Collin, I've been mulling over your post. It has brought more questions to mind. (Sorry. :-O) Let me preface what follows with: If I ask something really obvious or stupid, please forgive me. I have been programming for quite a few years, but I am a WPF neophyte. Ditto, if I use the wrong terminology for something. I'm not a GUI programmer ( :doh: ), but I am the only PC programmer in our group, and have been forced to jump into this with both feet. I don't really mind as I like to learn new things, but the WPF / MVVM learning curve has been frustrating for me. :sigh:
Collin Jasnoch wrote:
If you had a MainViewModel then the TabControl could have its ItemSource bound to a collection of your viewmodels (the data contexts of the Tabs).
The Tab Control can also maintain binding of "SelectedItem". When it changes you could then run any logic you wanted to (prompt user to save etc.)That sounds very sensible to me. Obviously (?) my ViewModels are not exactly the same. I guess I should find what is common among them and turn that into a base class (yeah, I should have done that from the outset) that they are all derived from, so that I can create an ObservableCollection of the base class objects? Since the ItemSource is bound to the ObservableCollection, this would take care of setting the DataContext for each TabItem?
Collin Jasnoch wrote:
If you choose this path, rather than having the View instantiate the VM*, the MainVM does the work. Then you just need to tell the renderer how to render the object using DataTemplates.
Right now, each TabItem in my TabControl is populated with a separate (but very similar) UserControl that consists of a 3 column Grid with a ListBox in column 0, a GridSplitter in column 1, and another Grid in Column 2. The second Grid in column 2 is a 3 row Grid with the first row containing a TextBlock that is basically a header, the 2nd row containing various TextBlocks and TextBoxes for displaying/entering data, and the last row holding several Buttons. Clicking on an item in the ListBox on the left brings up the corresponding data in the fields on the right. How would I turn this into a DataTemplate? What about the buttons?
Collin Jasnoch wrote:
I prefer this method (VM before View*) as it seems cleaner to me (no code behind)
Dumb question: isn't a certain amount of code behind unavoidable?
Tom Delany wrote:
That sounds very sensible to me. Obviously (?) my ViewModels are not exactly the same. I guess I should find what is common among them and turn that into a base class
While you should always be trying to find commonalities etc (re-factoring) don't worry about it to much. Remember you can always do this...
public interface ITabItem
{
//Don't need anything, but here is where you can put your new event
}Then just have all your VMs with in the collection use it. Then your collection is just
ObservableCollection<ITabItem>Tom Delany wrote:
Since the ItemSource is bound to the ObservableCollection, this would take care of setting the DataContext for each TabItem?
Not exactly. When doing VM first, you really don't bind the data context object to the view's data context property. Instead you use DataTemplates. There are a couple (er many) ways to acheive this. The simplest to understand IMO is to define the DataTemplate to target that type of object, and pop in the view.
*No VS right now, but I am pretty sure this is right. Place this DataTemplate in a resource dictionary and reference the dictionary in the UserControl that has the TabControl. It will then render the "OneOfYourViewModel" object as a "TheCorrespondingView" user control. Another way is to define the DataTemplate with a key and then reference it for your "ItemTemplate". This is why it is VM first. The VM is actually built first, and then when the UI wants to render it checks its datatemplate. If one is not set it will do what it knows how to, ToString and you will end up with the object name. The way you have explained is another methodology where the UserControls are constructed then they each (or some injection using a pattern) construct their datacontext.
Tom Delany wrote:
How would I turn this into a DataTemplate? What about the buttons?
I hope it is clear about the user control. Just pop it into a DataTemplate and you are good to go. As for Buttons, they have a property 'Command' that is a DP which you can bind an ICommand object to (i.e. your RelayCommand in your VMs). For the most part you can avoid using 'events' they w
-
Tom Delany wrote:
That sounds very sensible to me. Obviously (?) my ViewModels are not exactly the same. I guess I should find what is common among them and turn that into a base class
While you should always be trying to find commonalities etc (re-factoring) don't worry about it to much. Remember you can always do this...
public interface ITabItem
{
//Don't need anything, but here is where you can put your new event
}Then just have all your VMs with in the collection use it. Then your collection is just
ObservableCollection<ITabItem>Tom Delany wrote:
Since the ItemSource is bound to the ObservableCollection, this would take care of setting the DataContext for each TabItem?
Not exactly. When doing VM first, you really don't bind the data context object to the view's data context property. Instead you use DataTemplates. There are a couple (er many) ways to acheive this. The simplest to understand IMO is to define the DataTemplate to target that type of object, and pop in the view.
*No VS right now, but I am pretty sure this is right. Place this DataTemplate in a resource dictionary and reference the dictionary in the UserControl that has the TabControl. It will then render the "OneOfYourViewModel" object as a "TheCorrespondingView" user control. Another way is to define the DataTemplate with a key and then reference it for your "ItemTemplate". This is why it is VM first. The VM is actually built first, and then when the UI wants to render it checks its datatemplate. If one is not set it will do what it knows how to, ToString and you will end up with the object name. The way you have explained is another methodology where the UserControls are constructed then they each (or some injection using a pattern) construct their datacontext.
Tom Delany wrote:
How would I turn this into a DataTemplate? What about the buttons?
I hope it is clear about the user control. Just pop it into a DataTemplate and you are good to go. As for Buttons, they have a property 'Command' that is a DP which you can bind an ICommand object to (i.e. your RelayCommand in your VMs). For the most part you can avoid using 'events' they w
Thanks Collin. Clear as mud. ;) Actually, I think I understand what you mean. A couple of things I feel a little fuzzy about, but I think I have enough info. to sort it out. If I run up against something I can't figure out, hopefully you won't mind if I bug you again. :-O
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
-
Tom Delany wrote:
That sounds very sensible to me. Obviously (?) my ViewModels are not exactly the same. I guess I should find what is common among them and turn that into a base class
While you should always be trying to find commonalities etc (re-factoring) don't worry about it to much. Remember you can always do this...
public interface ITabItem
{
//Don't need anything, but here is where you can put your new event
}Then just have all your VMs with in the collection use it. Then your collection is just
ObservableCollection<ITabItem>Tom Delany wrote:
Since the ItemSource is bound to the ObservableCollection, this would take care of setting the DataContext for each TabItem?
Not exactly. When doing VM first, you really don't bind the data context object to the view's data context property. Instead you use DataTemplates. There are a couple (er many) ways to acheive this. The simplest to understand IMO is to define the DataTemplate to target that type of object, and pop in the view.
*No VS right now, but I am pretty sure this is right. Place this DataTemplate in a resource dictionary and reference the dictionary in the UserControl that has the TabControl. It will then render the "OneOfYourViewModel" object as a "TheCorrespondingView" user control. Another way is to define the DataTemplate with a key and then reference it for your "ItemTemplate". This is why it is VM first. The VM is actually built first, and then when the UI wants to render it checks its datatemplate. If one is not set it will do what it knows how to, ToString and you will end up with the object name. The way you have explained is another methodology where the UserControls are constructed then they each (or some injection using a pattern) construct their datacontext.
Tom Delany wrote:
How would I turn this into a DataTemplate? What about the buttons?
I hope it is clear about the user control. Just pop it into a DataTemplate and you are good to go. As for Buttons, they have a property 'Command' that is a DP which you can bind an ICommand object to (i.e. your RelayCommand in your VMs). For the most part you can avoid using 'events' they w
Collin Jasnoch wrote:
Place this DataTemplate in a resource dictionary and reference the dictionary in the UserControl that has the TabControl. It will then render the "OneOfYourViewModel" object as a "TheCorrespondingView" user control.
Create a ResourceDictionary under Application.Resources or in the MainWindows under Window.Resources, or does it really matter as long as it's closer to the root than where it is used?
Collin Jasnoch wrote:
reference the dictionary in the UserControl that has the TabControl.
Will you show me a XAML example of what you mean?
Collin Jasnoch wrote:
Another way is to define the DataTemplate with a key and then reference it for your "ItemTemplate".
I thought I had figured this way out, but then I stumbled because I have multiple DataTemplates and I was not sure if I still created a ResourceDictionary and gave it a key, and then bound that to the "ItemTemplate" of the TabControl, or if I had to assign a key to each template and somehow bind each one to ... something :confused:? Sorry. I'm a moron... :sigh:
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
-
Collin Jasnoch wrote:
Place this DataTemplate in a resource dictionary and reference the dictionary in the UserControl that has the TabControl. It will then render the "OneOfYourViewModel" object as a "TheCorrespondingView" user control.
Create a ResourceDictionary under Application.Resources or in the MainWindows under Window.Resources, or does it really matter as long as it's closer to the root than where it is used?
Collin Jasnoch wrote:
reference the dictionary in the UserControl that has the TabControl.
Will you show me a XAML example of what you mean?
Collin Jasnoch wrote:
Another way is to define the DataTemplate with a key and then reference it for your "ItemTemplate".
I thought I had figured this way out, but then I stumbled because I have multiple DataTemplates and I was not sure if I still created a ResourceDictionary and gave it a key, and then bound that to the "ItemTemplate" of the TabControl, or if I had to assign a key to each template and somehow bind each one to ... something :confused:? Sorry. I'm a moron... :sigh:
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
Tom Delany wrote:
Create a ResourceDictionary under Application.Resources
Typically, you create an external ResourceDictionary file and then reference it in your App.Xaml (in the ResourceDictionary section). This would look something like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="AppResources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
-
Tom Delany wrote:
Create a ResourceDictionary under Application.Resources
Typically, you create an external ResourceDictionary file and then reference it in your App.Xaml (in the ResourceDictionary section). This would look something like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="AppResources.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
Thanks Pete. I'm still struggling with how to make the TabControl use the templates the way he suggested above. I created the ITabItem interface, and the ObservableCollection of ITabItems as he suggested. I bound the TabControl ItemSource to the ITabItem ObservableCollection (which is the collection of ViewModels). I figured out how to create a DataTemplate for each ViewModel as per Collin's suggestion. I think I could figure out how to bind one specific DataTemplate to the TabControl ItemTemplate, but I have multiple DataTemplates... Obviously I can't bind the Dictionary to the ItemTemplate. :sigh: :confused: Problem is, I can't even seem to come up with the right combination of words to Google for...
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
-
Thanks Pete. I'm still struggling with how to make the TabControl use the templates the way he suggested above. I created the ITabItem interface, and the ObservableCollection of ITabItems as he suggested. I bound the TabControl ItemSource to the ITabItem ObservableCollection (which is the collection of ViewModels). I figured out how to create a DataTemplate for each ViewModel as per Collin's suggestion. I think I could figure out how to bind one specific DataTemplate to the TabControl ItemTemplate, but I have multiple DataTemplates... Obviously I can't bind the Dictionary to the ItemTemplate. :sigh: :confused: Problem is, I can't even seem to come up with the right combination of words to Google for...
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
If you take a look at my article here[^], you should be able to see how I hooked up the DataTemplate elements to the TreeView for different ViewModels. Hopefully that should help.
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
-
If you take a look at my article here[^], you should be able to see how I hooked up the DataTemplate elements to the TreeView for different ViewModels. Hopefully that should help.
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
Thanks Pete. I'll take a look at it. Sorry about the stupid questions. After rereading the MSDN documentation about DataTemplates, and your suggestion about the ResourceDictionary (and removing the x:Key elements from my data templates :doh:) I got it to actually sort of work. The DataTemplate documentation finally keyed me in on the fact that the way Collin was suggesting I do the templates using "DataType" would cause the DataTemplate to be "magically" applied for that type. That was what I was not seeing in my mind... Now if I can just figure out how to make the tabs look like tabs again with headers at the top... :sigh: Always something with WPF...
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
-
Thanks Pete. I'll take a look at it. Sorry about the stupid questions. After rereading the MSDN documentation about DataTemplates, and your suggestion about the ResourceDictionary (and removing the x:Key elements from my data templates :doh:) I got it to actually sort of work. The DataTemplate documentation finally keyed me in on the fact that the way Collin was suggesting I do the templates using "DataType" would cause the DataTemplate to be "magically" applied for that type. That was what I was not seeing in my mind... Now if I can just figure out how to make the tabs look like tabs again with headers at the top... :sigh: Always something with WPF...
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
Tom - they aren't stupid questions, they are just questions about doing something differently. You have to remember that declarative programming is a lot different to the world of traditional coding; getting your head around it isn't easy, and a lot of very smart people have spent a lot of time figuring how to get this all to hang together. I've read articles by these smart people. :-D
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
-
Tom - they aren't stupid questions, they are just questions about doing something differently. You have to remember that declarative programming is a lot different to the world of traditional coding; getting your head around it isn't easy, and a lot of very smart people have spent a lot of time figuring how to get this all to hang together. I've read articles by these smart people. :-D
Forgive your enemies - it messes with their heads
"Mind bleach! Send me mind bleach!" - Nagy Vilmos
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
I've been reading articles lately until my head hurts. They just don't seem to soak in. I feel like you and those other smart people are in a class way above me...
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
-
Thanks Collin. Clear as mud. ;) Actually, I think I understand what you mean. A couple of things I feel a little fuzzy about, but I think I have enough info. to sort it out. If I run up against something I can't figure out, hopefully you won't mind if I bug you again. :-O
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
Hope you got everything straightend out. I was out of the office yesturday so not hitting up CP much. Nothing 'silly' or 'dumb' about your questions. The only true 'dumb' question here on CP is when someone makes no effeort and asks "plz will u gimme codez" Otherwise you will find a lot of support. In fact the CP community is what got me up and running and for that I come back often and return the favor (and still get to be set straight :) ) WPF/Silverlight does have a strong learning curve so don't feel like you are alone. Most of the people answering the questions also struggled with it, but are just a couple years ahead of the game. Take bennefit from it and ask so you do not make the same mistakes the early birds did :-D
Computers have been intelligent for a long time now. It just so happens that the program writers are about as effective as a room full of monkeys trying to crank out a copy of Hamlet.
-
Hope you got everything straightend out. I was out of the office yesturday so not hitting up CP much. Nothing 'silly' or 'dumb' about your questions. The only true 'dumb' question here on CP is when someone makes no effeort and asks "plz will u gimme codez" Otherwise you will find a lot of support. In fact the CP community is what got me up and running and for that I come back often and return the favor (and still get to be set straight :) ) WPF/Silverlight does have a strong learning curve so don't feel like you are alone. Most of the people answering the questions also struggled with it, but are just a couple years ahead of the game. Take bennefit from it and ask so you do not make the same mistakes the early birds did :-D
Computers have been intelligent for a long time now. It just so happens that the program writers are about as effective as a room full of monkeys trying to crank out a copy of Hamlet.
Not really... :^) http://www.codeproject.com/Messages/4126589/UserControl-as-a-TabItem.aspx[^]
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.