Json to C# object display in Windows Phone's ListBox

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.

nkchandra · Accepted Answer · 2012-09-30 11:53:02Z

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.

answered Sep 30, 2012 at 11:53

nkchandra

5,5572 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mihaiconst · Accepted Answer · 2012-09-30 11:40:13Z

0

There are two ways.

First you can set the listbox's ItemSource property to the list you just created.

Second, You can create an ObservableCollection of thing in your list, and bind the observable collection to the listbox's ItemSource property. Add items in the Observable Collection and these will be displayed in your listbox.

The second way gives you more control over the items in the lisbox. You can remove or add elements in the observable collection and that will reflect in the listbox contents. The first method will make the contents of the list read-only, and you will not be able to add or remove items from it.

http://msdn.microsoft.com/en-us/library/ms668604.aspx

http://msdn.microsoft.com/en-us/library/system.windows.controls.listbox%28v=vs.95%29.aspx

answered Sep 30, 2012 at 11:40

mihaiconst

881 silver badge7 bronze badges

2 Comments

martin solomon Over a year ago

i tried that before with the following code in my xaml file.

<DataTemplate x:Key="StationArrTemplate">   	<StackPanel>   		<TextBlock Text="{Binding content_url}"/>   		<TextBlock Text="{Binding id}"/>   		<TextBlock Text="{Binding preview_url}"/>   		<TextBlock Text="{Binding sort_order}"/>   	</StackPanel>   </DataTemplate>    <Grid x:Name="ContentPanel" Margin="12,8,0,-8" Height="607" Grid.Row="1">      <ListBox ItemTemplate="{StaticResource StationArrTemplate1}" ItemsSource="{Binding StationArr}" Margin="150,141,118,166"/>   </Grid>

It is not displaying anything

mihaiconst Over a year ago

Don't use XAML, try it in the code behind. It is really not that hard, and XAML will not get you too far. You have examples in the two links. Read them

Collectives™ on Stack Overflow

Json to C# object display in Windows Phone's ListBox

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related