How to display Json data in windows phone 7

Question

I am beginner in windows phone, and i have no idea how to fill the List box from the JSON string. In my application, there will be a Json String which is coming from web service

Answer 1

First thing first, you need a good library that would help you convert your json string into your c# model representation (DeSerialization).

You can either write yours, use the built in platform deserializer or just use NewtonSoft.json

To Install NewtonSoft for WP, use Nuget. Note that you have to use version 5.0.8 since the 6.x series don't support Windows Phone 7.

I've simplified your json string a little bit, don't understand why a country property would hold a list of countries?

c#, in your code behind

public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();

        //BindCountries();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        BindCountries();
    }

    private void BindCountries()
    {
        var json =
            "{\"type\":\"ok\",\"countries\":[{\"title\":\"Country-1\",\"description\":\"US\",\"status\":\"1\"},{\"title\":\"Country-2\",\"description\":\"Australia\",\"status\":\"0\"},{\"title\":\"Country-3\",\"description\":\"Brazil\",\"status\":\"0\"}]}";

        var countryResult = JsonConvert.DeserializeObject<CountryResult>(json);

        if (countryResult.Type.Equals("ok", StringComparison.InvariantCultureIgnoreCase))
        {
            lstCountries.ItemsSource = countryResult.Countries;
        }

    }
}

public class CountryResult
{
    public string Type { get; set; }
    public IEnumerable<Country> Countries { get; set; }
}

public class Country
{
    public string Title { get; set; }
    public string Description { get; set; }
    public int Status { get; set; }
}

Xaml:

<phone:PhoneApplicationPage 
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid  x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox x:Name="lstCountries">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="{Binding Title}" />
                        <TextBlock Text="{Binding Description}" />
                    </StackPanel>

                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

    </Grid>
</Grid>

Result: