Windows Phone - Populate ListBox with Json

Question

I have a Json file saved in "IsolatedStorage" (json.html) and i need populate a "ListBox" with the field "FName" (from Json file).

The Json below, is stored in file (json.html) and saved in IsolatedStorage. The file will be changed as necessary (synchronized with web server). So I need that fields as "FNome" and "FEstado" received information from "json.html".

My Json file:

{"xId":"52","result":{"type":"Basico.Bean.MunicipioClass.TMunicipio","id":1,"fields":{"FRefCount":0,"FId":52,"FNome":"Sumare","FEstado":"SP","FPais":"Brasil"}}}

My class from Json:

        public class Fields
    {
        public int FId { get; set; }
        public string FNome { get; set; }
        public string FEstado { get; set; }
        public string FPais { get; set; }
    }

My ListBox:

 <ListBox x:Name="listBox1" 
             Height="192" Width="456" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Top" 
             BorderThickness="5"
             Padding="5"
             BorderBrush="White"
             FontSize="30"
             HorizontalContentAlignment="Stretch" Foreground="{x:Null}">
                    <ListBox.Background>
                        <SolidColorBrush Color="White" Opacity="0.5"/>
                    </ListBox.Background>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="200"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{Binding FNome}"/>
                                <TextBlock Grid.Column="10" Text="{Binding FEstado}"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Answer 1

I'm assuming you are not using MVVM design pattern or anything "fancy", so here's (almost) minimal working example for you to study.

First, right-click on your project, select Manage NuGet Packages and install Json.NET dependency. Json.NET package helps you handle JSON formatted data.

After installation, this would be your MainWindow.xaml. Here you define your ListBox and template you want to use when showing each ListBox item.

<Window x:Class="MyWpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="100"
        Width="420">

    <Grid>
        <!-- Your ListBox, notice the ItemsSource -->
        <ListBox 
             Height="50" 
             Width="400"
             FontSize="30"
             HorizontalContentAlignment="Stretch"
             ItemsSource="{Binding Items}">

            <!-- Template to display each item -->
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <!-- Bind UI controls to properties you want to display -->
                        <TextBlock Grid.Column="0" Text="{Binding FId}"/>
                        <TextBlock Grid.Column="1" Text="{Binding FPais}"/>
                        <TextBlock Grid.Column="2" Text="{Binding FNome}"/>
                        <TextBlock Grid.Column="3" Text="{Binding FEstado}"/>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>  

And your code-behind, namely MainWindow.xaml.cs. For clarity, json is defined as const string.

using System.Windows;
using System.Collections.ObjectModel;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace MyWpfApplication
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            // Your JSON string
            const string json = 
                "{'xId':'52'," +
                "  'result':{" + 
                "    'type':'Basico.Bean.MunicipioClass.TMunicipio'," +
                "    'id':1," + 
                "    'fields':{" + 
                "      'FRefCount':0," +
                "      'FId':52," + 
                "      'FNome':'Sumare'," + 
                "      'FEstado':'SP'," + 
                "      'FPais':'Brasil'" + 
                "    }" + 
                "  }" + 
                "}";

            // Parse as JObject
            JObject jObj = JObject.Parse(json);

            // Extract what you need, the "fields" property
            JToken jToken = jObj["result"]["fields"];

            // Convert as Fields class instance
            Fields fields = jToken.ToObject<Fields>();

            // Assign to Items property, which is used as ListBox's ItemsSource
            // In real application you'd probably want to have more than one item :)
            Items = new ObservableCollection<Fields>() { fields };
        }

        public ObservableCollection<Fields> Items { get; set; }
    }
}

And then, of course, you need you Fields class, too. You can "map" JSON to C# class autamagically if property names match. If you want to use other name in your class properties, say plain Id instead of FId, then you need to mark the property with JsonProperty attribute. For example [JsonProperty(PropetyName = "FId)].

public class Fields
{
    [JsonProperty(PropertyName = "FId")]
    public int FId { get; set; }

    public string FNome { get; set; }
    public string FEstado { get; set; }
    public string FPais { get; set; }
}

Running the "application" gives you the following output