WPF Bind JSON Array Using Listbox And DataTemplate In C#

Introduction

 

Windows Presentation Foundation (WPF) is Microsoft’s User Interface Framework that uses XAML to create desktop applications. As the name suggests it is meant to present users' data in the most comprehensive way using various capabilities provided by its GUI controls, resources, documents, layouts, and security. XAML on the other hand is Extensible-Mark-Up-Language which provides a declarative model to build the application's UI which is separate from the code-behind file. If you have used ASP.NET you will be more familiar with the file structure used in WPF. WPF comprises a .xaml file for XAML code and a back-end or code-behind file which can use C#, VB.NET (.xaml.cs/.xaml.vb files), or any other .NET language to provide the behavior of the desktop application.

 

This article is meant to showcase one of WPF's presentation capabilities using Student.json and a WPF data template.

 

So I'm assuming that you have created your WPF App (.NET Framework) project and named it as you like; in this case, I have named mine Students.

 

 

 

Here is my Students.json file which we intend to use and I have saved mine in my project folder /bin/Debug/Students.json.

[
  {
    "ID": "1",
    "Name": "John Doe",
    "Gender": "Male",
    "Class": "32",
    "Seat": "15",
    "Comment": "An average student"
  },
  {
    "ID": "2",
    "Name": "Jane Doe",
    "Gender": "Female",
    "Class": "11",
    "Seat": "14",
    "Comment": "A highly exceptional student"
  },
  {
    "ID": "3",
    "Name": "Mary Williams",
    "Gender": "Female",
    "Class": "12",
    "Seat": "14",
    "Comment": "An average student"
  },
  {
    "ID": "4",
    "Name": "Peter Hughs",
    "Gender": "Male",
    "Class": "21",
    "Seat": "14",
    "Comment": "Below average student"
  },
  {
    "ID": "5",
    "Name": "Sara Gomez",
    "Gender": "0",
    "Class": "22",
    "Seat": "14",
    "Comment": "Above average student"
  }

]

We are going to use the sample data as shown in the preceding JSON file. In Visual Studio our project is currently empty as shown below,

 

 

 

And here is the WPF default file is shown in the Solution Explorer,

 

 

1. We need to create a Student class first in our solution so to do this we ‘Add a folder’ to our solution and name it Models. And in the models folder we right-click to 'Add a class’ which we will name students.
   
   
   
   
   

2. In our students.cs class we add the following properties which will be used to create a student object and they should match the students.json properties.
   
   
   
   
3. We need to create a presentation platform to show the user the student data and we do this in the XAML file, in this case, the MainWindow.xaml. And we start by changing the title of our main window to Students and adding the WindowState property to ‘Maximized’ so that the window opens in full-screen mode,
   
   
   
   
4. After this we need to add a Resource to the Window that determines how our data template is going to look like as shown below,
   

   <Window.Resources>
         <!-- Data Template (applied to each bound task item in the task collection) -->
         <DataTemplate x:Key="students">
             <Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2"
         CornerRadius="2" Padding="5" Margin="5">
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="*"/>
                         <RowDefinition/>
                         <RowDefinition/>
                         <RowDefinition/>
                         <RowDefinition/>
                         <RowDefinition/>
                     </Grid.RowDefinitions>
   
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto" />
                         <ColumnDefinition />
                     </Grid.ColumnDefinitions>
   
                     <TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="ID:"/>
                     <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=ID}"/>
                     <TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Name:"/>
                     <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Name}"/>
                     <TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Gender:"/>
                     <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Gender}"/>
                     <TextBlock Grid.Row="3" Grid.Column="0" Padding="0,0,5,0" Text="Class:"/>
                     <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding Path=Class}"/>
                     <TextBlock Grid.Row="4" Grid.Column="0" Padding="0,0,5,0" Text="Seat:"/>
                     <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding Path=Seat}"/>
                     <TextBlock Grid.Row="5" Grid.Column="0" Padding="0,0,5,0" Text="Comment:"/>
                     <TextBlock Grid.Row="5" Grid.Column="1" Text="{Binding Path=Comment}"/>
                 </Grid>
             </Border>
         </DataTemplate>
     </Window.Resources>

   This code should appear just below the title field and take note of the <Window.Resources></Window.Resources> tag. Resources are used in WPF to create a uniform look and feel in controls and windows and can be applied at different levels including application-level but we will not cover that in this article.

5. After adding the resource to style our list we now need to create our UI and in this case, we are going to use WPF's DockPanel layout to present our data.
   
   
   
   Notice how the ItemTemplate locates the StaticResource name which in this case is ‘students’.
   
   Our design now should be looking like this,
   
   
   

6. At this point we now need to go on our MainWindow.xaml.cs file which is the code-behind file to deserialize our Students.json file and present it in our WPF Listbox. To do this we need to add a Nuget Newtonsoft.Json package to our project. Right-click on your project solution in Solution Explorer and select 'Manage Nuget Packages’. Browse for Newtonsoft.Json package and click to install.
   
   
   
   
7. Now we can open our MainWindow.xaml.cs file and on top of the page let us add the assemblies Newtonsoft.Json and Students.Models because we will need to use a class present in the Models folder namely the ‘student class as we will see later in the article,
   

   using Newtonsoft.Json;
   using Students.Models;

8. Now add the following code to your MainWindow.xaml file.
   

   public partial class MainWindow : Window
       {
           public MainWindow()
           {
               InitializeComponent();
               OutputJson();
           }
   
           public void OutputJson()
   
           {
               try
               {
   
                   string json = System.IO.File.ReadAllText(@"Students.json");
   
   
                   lststudents.ItemsSource = JsonConvert.DeserializeObject<List<Student>>(json);
               }
               catch (Exception ex)
               {
                   MessageBox.Show(ex.Message);
               }
            }
       }

9. Save your project and press F5 or the 'Start' button at the top menu of the Visual Studio page. Your Output should look as follows,
   
   
   

Conclusion

 

This article shows how useful WPF can be when it comes to presenting data to users using various controls and methods to give users a quality experience.