Part 1

Step 1

Create a Windows Phone Application.



Create a Person Class.

In the current project right-click then select Add > New > Class File. Rename it to "Person.cs".

  1. public class Person
  2. {
  3. public string Name { get; set; }
  4. public string Age { get; set; }
  5. }
Save it.

Now add another class file called ViewModel.
  1. public class ViewModel
  2. {
  3. public List < Person > Items = new List < Person >
  4. {
  5. new Person{Name="charwaka", Age="16"},
  6. new Person{Name="Nitin Patil", Age="21"},
  7. new Person{Name="Kiran Kumar", Age="32"},
  8. new Person{Name="Mohan", Age="24"},
  9. new Person{Name="sundar", Age="23"},
  10. new Person{Name="sundar", Age="23"},
  11. new Person{Name="vignesh Devan", Age="13"},
  12. new Person{Name="Dileep Kumar", Age="26"},
  13. new Person{Name="Kumar", Age="25"},
  14. new Person{Name="Peter", Age="45"},
  15. new Person{Name="Nina", Age="48"},
  16. new Person{Name="Rajeshwari", Age="36"},
  17. }
  18. }
Now, go to MainPage.cs.

Create an instance of your ViewModel class.
  1. ViewModel vm = new ViewModel();
  2. public MainPage()
  3. {
  4. InitializeComponent();
  5. lstBooks.ItemsSource = vm.Items; //Binding items to ListView
  6. }
Step 2
Create UI to display our Listitems in ListView
  1. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  2. <ListBox x:Name="lstBooks">
  3. <ListBox.ItemTemplate>
  4. <DataTemplate>
  5. <Grid Background="#007ACC" Width="460" Height="90" Margin="0,10,0,0">
  6. <StackPanel Orientation="Vertical">
  7. <TextBlock Text="{Binding Name}" Foreground="White" FontSize="30" Margin="10,10,81,0" />
  8. <TextBlock Text="{Binding Age}" FontSize="20" Margin="10,10,81,0" TextWrapping="Wrap" Foreground="White"/>
  9. </StackPanel>
  10. <StackPanel Orientation="Horizontal" Margin="390,11,0,11" Background="Transparent" >
  11. <Image Source="/Assets/Contact.png" Width="65" />
  12. </StackPanel>
  13. </Grid>
  14. </DataTemplate>
  15. </ListBox.ItemTemplate>
  16. </ListBox>
  17. </Grid>

Step 3

Now debug (hit F5).

The output will be like the following. (Note: I have used Custom Fonts.)



ProTip: Use light colors whenever designing an app. (See some popular apps to get an idea of the best matching colors.)

Part 2

Step 1: Design the ListView

First create your own design like this.

  1. <Grid Background="#007ACC" Width="460" Height="90" Margin="0,10,0,0">
  2. <StackPanel Orientation="Vertical">
  3. <TextBlock Text="{Binding Name}" Foreground="White" FontSize="30" Margin="10,10,81,0"/>
  4. <TextBlock Text="{Binding Age}" FontSize="20" Margin="10,10,81,0" TextWrapping="Wrap" Foreground="White"/>
  5. </StackPanel>
  6. <StackPanel Orientation="Horizontal" Margin="390,11,0,11" Background="Transparent" >
  7. <Image Source="/Assets/Contact.png" Width="65" />
  8. </StackPanel>
  9. </Grid>
Then just put this Grind in between the "ListView " templates:
  1. <ListBox x:Name="lstBooks">
  2. <ListBox.ItemTemplate>
  3. <DataTemplate>
  4. //Place your Grid ot stack pannel after Designing it Here That’s all
  5. </DataTemplate>
  6. </ListBox.ItemTemplate>
  7. </ListBox>
Step 2: Edit the ListView



You can right-click the page that has the list view then select Open it in Blend then Expand the Visual Tree as shown.

It will be like this.



It's complete now. Please comment below for any concerns.