Share via


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!

Comments