Glenn Block

Sponsors

The Lounge

Syndication

Recent Posts

Tags

View more

News

  • View Glenn Block's profile on LinkedIn

    Me

Archives

Advertisement

Glenn Block » Using ViewModels and DataTemplates to compose your UI
Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
Using ViewModels and DataTemplates to compose your UI

Several drops ago we introduced a ViewModel composition spike. The purpose of this spike was to introduce a different way to compose your UI that WPF offers. That is instead of having your views and regions be UI-Elements, having them as pure models. What I mean by this is instead of having a Employee Region which is a tab, that contains EmployeeViews, you have a model (the region) that contains Employees. Likewise instead of of having a panel that displays a CustomerView, you have a  model that contains a single Customer. So how do I get my Employee region to display as a Tab, and my Employee to display itself in the same way as the EmployeeView? The answer is using DataTemplates. Using DataTemplates, you can define the UI rendering for a specific type (in this case the Employee and the EmployeeRegion). The nice thing for the no code-behind zealots among us is that there is absolutely NO CODE BEHIND in a DataTemplate.

Below you can see an example of what an Employee template might look like.

<DataTemplate DataType="{x:Type Employee}">
    <Grid x:Name="GeneralGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="5"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Text="First Name:" Grid.Column="0" Grid.Row="0"></TextBlock>
        <TextBlock Text="Last Name:" Grid.Column="2" Grid.Row="0"></TextBlock>
        <TextBlock Text="Phone:" Grid.Column="0" Grid.Row="2"></TextBlock>
        <TextBlock Text="Email:" Grid.Column="2" Grid.Row="2"></TextBlock>
 
        <TextBox x:Name="FirstNameTextBox" Text="{Binding Path=FirstName}" 
            Grid.Column="0" Grid.Row="1"></TextBox>
        <TextBox x:Name="LastNameTextBox" Text="{Binding Path=LastName}" 
            Grid.Column="2" Grid.Row="1"></TextBox>
        <TextBox x:Name="PhoneTextBox" Text="{Binding Path=Phone}" 
            Grid.Column="0" Grid.Row="3"></TextBox>
        <TextBox x:Name="EmailTextBox" Text="{Binding Path=Email}" 
            Grid.Column="2" Grid.Row="3"></TextBox>
    </Grid>
</DataTemplate>

Julian has a set of posts where he is discussing this interesting approach to composition. He's done two posts so far, but I am sure there's much more to come.

Using the Presentation Model in WPF

First approach to Presentation Model with DataTemplates

Great stuff!

Posted 05-24-2008 9:10 AM by Glenn Block
Filed under: ,

[Advertisement]

Comments

Rob wrote re: Using ViewModels and DataTemplates to compose your UI
on 05-24-2008 3:18 PM

Now you're starting to think like a WPF developer!!!  You'll find that this is what truly unlocks all of WPF's possibilities.

Bob on Medical Device Software » Blog Archive » Drop, Spike… Huh? wrote Bob on Medical Device Software &raquo; Blog Archive &raquo; Drop, Spike&#8230; Huh?
on 05-24-2008 7:46 PM

Pingback from  Bob on Medical Device Software  &raquo; Blog Archive   &raquo; Drop, Spike&#8230; Huh?

Dew Drop - May 25, 2008 | Alvin Ashcraft's Morning Dew wrote Dew Drop - May 25, 2008 | Alvin Ashcraft's Morning Dew
on 05-25-2008 11:38 AM

Pingback from  Dew Drop - May 25, 2008 | Alvin Ashcraft's Morning Dew

Josh Smith wrote re: Using ViewModels and DataTemplates to compose your UI
on 06-10-2008 6:27 PM

This sounds about right to me.  This is the "right" way to do data visualization in WPF, so I'm glad to see you guys are starting to do it as well.

Check this out for another perspective: www.codeproject.com/.../TreeViewWithViewModel.aspx

Josh

Brett Ryan wrote re: Using ViewModels and DataTemplates to compose your UI
on 06-12-2008 5:44 AM

I'm on the hunt for a way to have capture events from this approach, specifically where an ItemsControl is used, like a ListBox, how do you capture a double click event, or better still, wire a Command="{Binding ItemActivated"} action to be captured. I don't care if it's a global command I just want something, but at the moment I can't figure anything out :(

-Brett

Glenn Block wrote re: Using ViewModels and DataTemplates to compose your UI
on 06-17-2008 11:12 PM

@Brett

Check out the DelegateCommand. Using the command you can pass in delegates for the CanExecute and Execute.

Glenn Block wrote re: Using ViewModels and DataTemplates to compose your UI
on 06-17-2008 11:13 PM

@Josh

Great article. Thanks for the link.

Mike wrote re: Using ViewModels and DataTemplates to compose your UI
on 08-21-2008 2:27 AM

Great Post!  Thanks for the samples...

I do have one question however, if I need to have a combobox in my datatemplate, how would I go about setting it's (the combobox's) datacontext?  I have created a couple of ObjectDataSources and added them to a separate ResourceDictionary and then in the datatemplate I simply bind the datacontext to one of those DataProviders.  I'm sure there are other/better ways to do it, any suggestions?  I guess all I'm really trying to do is populate that combobox with a list of states... (i.e. - CA, MN, NY, WI, Etc.)

Glenn Block wrote re: Using ViewModels and DataTemplates to compose your UI
on 08-21-2008 2:37 AM

Hi @Mike

What you can do is hang your combo list off of your presentation model as a property, say a List<String>, or a List<City> Then just bind to it.

Because its a ViewModel, you can decorate it with whatever it needs tot drive the UI.

Mike wrote re: Using ViewModels and DataTemplates to compose your UI
on 08-21-2008 1:39 PM

Thanks for the reply...I'm VERY new to this whole MVx architecture and it's got my head spinning...it seems the more I read, the more I become confused because everyone has a different opinion on how to implement a pattern...anyway...

In the example above I could/would create a property called City on the EmployeeModel and then that property would be populated with a generic list that is created by a call to a datastore (via DAL) that would retrieve the list of cities?

Thanks so much for responding...

Add a Comment

(required)  
(optional)
(required)  
Remember Me?