Question

I used http://json2csharp.com to generate the C# class from the below JSON string.

{
    "stationArr":[
        {
            "id":"9",
            "name":"name9",
        "sidebar":{
                "original":"http://myurl.com/station_images/5/5_s.png",
                "m":"http://myurl.com/station_images/5/m/5_s_m.png",
                "s":"http://myurl.com/station_images/5/s/5_s_s.png"
            }
        },
    {
            "id":"3",
            "name":"name3",
        "sidebar":{
                "original":"http://myurl.com/station_images/5/5_s.png",
                "m":"http://myurl.com/station_images/5/m/5_s_m.png",
                "s":"http://myurl.com/station_images/5/s/5_s_s.png"
            }
    ]
    "stationUrlMap":{
        "9":"http://myurl.com/9_64",
        "3":"http://myurl.com/3_64",
    }
}

The generated classes are (I created different .cs for each class.

public class Sidebar
{
    public string original { get; set; }
    public string m { get; set; }
    public string s { get; set; }
}

public class StationArr
{
    public string id { get; set; }
    public string name { get; set; }
    public Sidebar sidebar { get; set; }
}

/*public class StationUrlMap
{
    public string __invalid_name__9 { get; set; }
    public string __invalid_name__3 { get; set; }
}
*/
public class StationList
{
    public List<StationArr> stationArr { get; set; }
//    public StationUrlMap stationUrlMap { get; set; } Dicarded it
}

I have discarded the StationUrlMap as I don’t need it.

I am using the following code to create the Object

string resultString = sd.ReadToEnd();
StationList stations = JsonConvert.DeserializeObject<StationList>(resultString);
Debug.Writeline(stations.stationArr.Count); // gives Output 9 Which is correct.

I just don’t know how to display the List of stations in the UI (using ListBox). Please guide me in the right direction.

Answer 1

Create a ListBox in the XAML

<ListBox x:Name="ListBoxStations" Height="500" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Width="450">
                 <Image Source="{Binding Path=sidebar.original}"/>
                 <TextBlock Text="{Binding Path=name}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

And then in your cs file, after the json conversion do the following

StationList stations = JsonConvert.DeserializeObject<StationList>(resultString);
ListBoxStations.ItemsSource = stations.stationArr;

The above XAML code is just a sample, change based on your requirements.