Data templates are templates which can used to display the content in a particular format. When a template is applied to a list, for each item in the list, the template will be applied. So, if your collection has 5 items, then each item will be displayed in the same format.
Below example display the listbox using data template. In this example, we have a StackPanel that displays its child one after another. First child of the StackPanel has set of controls used to edit the item selected in the ListBox. Second child of the StackPanel has ListBox. Inside the ListBox we define the ItemTemplate. ItemTemplate is a property inside ListBox and it is a typeof DataTemplate. DataTemplate has to be designed to display for only one Item in the List. When the WPF engine displays each item in the list, it will check whether any data template defined for that. So the check will happen before adding each item into the list. If there are any, then that template will be applied for that item.
To Display Selected Item in Editable Controls:
To display the selected item of listbox, we need use a property called, “IsSynchronizedWithCurrentItem” and set it to True. Once you do this, WPF engine will synchronize the selected item with other controls which not to display collections but are using the same datacontext. In our example, datacontext of the Window is set to the CustomerViewModel collection. So, both editable textboxes and the ListBox are using the same datacontext. Because of that, whenever the select item is changed, wpf engine can update the changes to the textboxes.
public class CustomerViewModel : INotifyPropertyChanged
{
private string firstName;
public string FirstName
{
get
{
return firstName;
}
set
{
firstName = value;
OnPropertyChanged("FirstName");
}
}
private string lastName;
public string LastName
{
get
{
return lastName;
}
set
{
lastName = value;
OnPropertyChanged("LastName");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(property));
}
}
}
public partial class MainWindow : Window
{
ObservableCollection<CustomerViewModel> cvmList = null;
public MainWindow()
{
InitializeComponent();
cvmList = new ObservableCollection<CustomerViewModel>()
{
new CustomerViewModel { FirstName = "FName1", LastName="LName1" },
new CustomerViewModel { FirstName = "FName2", LastName="LName2" },
new CustomerViewModel { FirstName = "FName3", LastName="LName3" }
};
this.DataContext = cvmList;
}
}
<Grid>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" Text="First Name: " VerticalAlignment="Top"/>
<TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Text="Last Name:" VerticalAlignment="Top"/>
<TextBox Grid.Column="1" Text="{Binding /FirstName}" Height="23" Width="150" />
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding /LastName}" Height="23" Width="150"/>
</Grid>
<ListBox Margin="20" ItemsSource="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Top" IsSynchronizedWithCurrentItem="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Left" Text="First Name: " VerticalAlignment="Top"/>
<TextBlock Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" Text="Last Name:" VerticalAlignment="Top"/>
<TextBlock Grid.Column="1" Text="{Binding Path=FirstName}" Height="23" Width="148" />
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding LastName}" Height="23" Width="148"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
Output:
