Humenik.com
Books Apps Blog Contact NET Bible
John 3:16
Trinidad Force
Buy Now



Android Clock
Buy Now

Create Beautiful Dynamic UI’s using DataTemplates and MVVM
In yesterday’s post, I talked about MVVM and how easy it is to start building composite applications leveraging this innovative programming paradigm. Until today, I was struggling with linking dynamically created UI elements to the view-model. To take it one step further, I wanted the user interface to be bound fully (Two-Way) to the view-model and be automatically updated as the view-model changes.

What’s an example? You have a view that prompts the user to input a count. That count could be used to create Albums, Contacts or whatever ‘class’ you want. Here’s the sample code for an Album.cs file:

public class Album
{
     public string Artist { get; set; }
     public string Name { get; set; }
     public string Year { get; set; }
}

You can add this code to your view-model class:

private ObservableCollection<Album> albums = new ObservableCollection<Album>();

public ObservableCollection Albums
{
     get { return albums; }
     set { albums = value; OnPropertyChanged("Albums"); }
}

Update your view code with the XAML below, link your DataContext to your view-model and as you add new Album objects to your Albums observable collection, they will automatically show up on your UI and be bound to the view-model. Yes, it’s that simple to build rich UIs that are managed by user input at runtime.

<ListBox Width="510" ItemsSource="{Binding Path=Albums, Mode=TwoWay}" HorizontalContentAlignment="Stretch" BorderThickness="0">
  <ListBox.ItemTemplate>
   <DataTemplate>
    <StackPanel Orientation="Vertical">
     <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
      <TextBlock Text="Artist:" Width="60" VerticalAlignment="Center"/>
      <TextBox Text="{Binding Path=Artist}" Width="100"/>
      <TextBlock Text="Name:" Width="60" Margin="5,0,0,0" VerticalAlignment="Center"/>
      <TextBox Text="{Binding Path=Name}" Width="210" />
      <TextBlock Text="Date:" Width="60" Margin="5,0,0,0" VerticalAlignment="Center"/>
      <TextBox Text="{Binding Path=Date}" Width="50" />
     </StackPanel>
    </StackPanel>
   </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>