Binding ListView Control Using MVVM

In this short post I will show you how you can bind the list view control and get the selected value of the list view control using MVVM pattern. For this post I have added one list view control which hold the grid view control in it view and when item is selected in the grid view the selected item is shown at the end of the screen. In the Image 1the selected items are not shown ( only the label fields are shown) but in the Image 2 when user click on any of the item the detail is shown.

Image 1

Here you can see the first name and last name are concatenated to make the full name, email address, contact number and the date of birth of the selected person is shown.

Image 2

Model:

            In the model folder I have one file with the name MainWindowModel which has one class with the name of the Persons. The Persons class has the UserID, first name, last name, EmailID , contact number and the date of birth properties.

ViewModel:

                    In the viewModel folder I have one file with the name MainWindowViewModel which contain class of same name. The viewModel has two properties one is the PersonRecords ( which is list of Person records used to bind with the list view control) and the second one is the SelectedPersonRecord( which is of type Person and used to bind with the selected value of the list view control.which holds the selected value of the list view control).

View:

         In the view , I have list view control which is bind to the PersonRecords ( the ItemSource of the list view control) and the SelectedItem of the list view control is bind to the SelectedPersonRecord as you can see in the code below and the binding mode of the SelectedItem is two way as I want to send back the latest changes to the viewModel as well.

< ListView ItemsSource="{Binding PersonRecords}" Margin="5" AlternationCount="1" Grid.Row="1" SelectedItem="{Binding SelectedPersonRecord, Mode=TwoWay}"> 
            < ListView.View > 
                < GridView > 
                    < GridViewColumn Header="First Name"  DisplayMemberBinding="{Binding FirstName}"/> 
                    < GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}"/> 
                    < GridViewColumn Header="Email Address" DisplayMemberBinding="{Binding EmailID}"/> 
                    < GridViewColumn Header="Contact Number" DisplayMemberBinding="{Binding ContactNumber}"/> 
                    < GridViewColumn Header="Date Of Birth" DisplayMemberBinding="{Binding DateOfBirth, Converter={StaticResource showOnlyDate}}"/> 
                < /GridView> 
            < /ListView.View> 
        < /ListView> 
        < Button Grid.Row="2" Content="Close" Width="70" Height="24" HorizontalAlignment="Right"  d:LayoutOverrides="Width" Margin="0,0,5,0" Command="ApplicationCommands.Close" /> 
        < TextBlock Grid.Row="3" HorizontalAlignment="Left"  Text="Selected Item Values" FontWeight="ExtraBold"/>             
        < TextBlock Grid.Row="4" HorizontalAlignment="Left"  DataContext="{Binding SelectedPersonRecord}">             
            < Run Text="Name :    " FontWeight="Bold"/> 
            < Run Text="{Binding LastName}"/> 
            < Run Text=","/> 
            < Run Text="{Binding FirstName}"/> 
            < Run Text="Email Address : " FontWeight="Bold"/> 
            < Run Text="{Binding EmailID}"/>             
        < /TextBlock> 
        < TextBlock Grid.Row="5" DataContext="{Binding SelectedPersonRecord}" HorizontalAlignment="Left"> 
            < Run Text="Contact Number: " FontWeight="Bold"/> 
            < Run Text="{Binding ContactNumber}"/> 
            < Run Text="Date Of Birth : " FontWeight="Bold"/> 
            < Run Text="{Binding DateOfBirth,StringFormat='dd/MM/yyyy'}"/> 
        < /TextBlock> 

When user click on any  of the item in the list view the corresponded value is shown at the bottom of the form. which has dataContaxt of SelectedRecord. I have set the dataContext of each of the textblock control to the SelectedPersonRecord property and then use the Run object of the Textblock control to format and bind to the properties like first name, last name, emailID, contact number and date of birth.You can download the source code from here

All and any comments / bugs / suggestions are welcomed!