How to Bind List Of Objects(Static) To ListView in Windows Phone 8, 8.1 and 10

Charwaka Thupili
9y
32.3k
0
1

Article

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".

public class Person
{
public string Name { get; set; }
public string Age { get; set; }
}

Save it.

Now add another class file called ViewModel.

public class ViewModel
{
public List < Person > Items = new List < Person >
{
new Person{Name="charwaka", Age="16"},
new Person{Name="Nitin Patil", Age="21"},
new Person{Name="Kiran Kumar", Age="32"},
new Person{Name="Mohan", Age="24"},
new Person{Name="sundar", Age="23"},
new Person{Name="sundar", Age="23"},
new Person{Name="vignesh Devan", Age="13"},
new Person{Name="Dileep Kumar", Age="26"},
new Person{Name="Kumar", Age="25"},
new Person{Name="Peter", Age="45"},
new Person{Name="Nina", Age="48"},
new Person{Name="Rajeshwari", Age="36"},
}
}

Now, go to MainPage.cs.

Create an instance of your ViewModel class.

ViewModel vm = new ViewModel();
public MainPage()
{
InitializeComponent();
lstBooks.ItemsSource = vm.Items; //Binding items to ListView
}

Step 2

Create UI to display our Listitems in ListView

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="lstBooks">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="#007ACC" Width="460" Height="90" Margin="0,10,0,0">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" Foreground="White" FontSize="30" Margin="10,10,81,0" />
<TextBlock Text="{Binding Age}" FontSize="20" Margin="10,10,81,0" TextWrapping="Wrap" Foreground="White"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="390,11,0,11" Background="Transparent" >
<Image Source="/Assets/Contact.png" Width="65" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</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.

<Grid Background="#007ACC" Width="460" Height="90" Margin="0,10,0,0">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" Foreground="White" FontSize="30" Margin="10,10,81,0"/>
<TextBlock Text="{Binding Age}" FontSize="20" Margin="10,10,81,0" TextWrapping="Wrap" Foreground="White"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="390,11,0,11" Background="Transparent" >
<Image Source="/Assets/Contact.png" Width="65" />
</StackPanel>
</Grid>