WPF Display Collection in ListBox using DataTemplate

0 votes
asked Jul 12, 2014 in WPF by Susan

I want to display a POCO object collection to a Listbox using data template. Also, when a particular item is selected in the Listbox, I want to display that in editable controls. For example, if I display FirstName and LastName of multiple customers in ListBox, when I select one customer in the List, I should be able to bind that in editable controls like textboxes and edit them. How do I do that?

Share

1 Answer

+1 vote
answered Jul 13, 2014 by Sundar
selected Jul 13, 2014 by administrator
 
Best answer

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:

wpf listbox binding with datatemplate

Your answer

Preview

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com
...