In my previous blog Windows 10 (including IoT) USB HID device identification was covered in detail. This included an app that takes the relevant IDs for an HID device and checks whether it is present on the system. Two of the IDs could be looked up via a menu as they come an HID Usage table. The menu data was loaded from a JSON (text) file and translated using Linq to a list that is the Xaml data source binding for the menu. This blog demonstrates the mechanism for loading JSON data from a text file into an Xaml ComboBox.

1. Create a secondary file for MainPage  (MainPageJSON.cs)

This will contain all of the relevant JSON and Linq code including classes and then menu SelectionChanged event handler.

• Add a new class file to the project, called MainPageJSON.cs
• Clear the file contents
• Partially mirror MianPage.cs into MainPageJSON.cs by copying  all of MainPage.cs upwards from the line:
  public sealed partial class MainPage : Page
• Place open an closing braces below the last line (public sealed partial class MainPage : Page) in MainPageJSON.cs

2. Add the HidDeviceClass and its list to MainPageJSON.cs as follows:

        // This list is used to populate cbDevType dropdown menu
        private List<HidDeviceClass> HidDeviceClasses;

        public class HidDeviceClass
        {
            public HidDeviceClass(string usageName, ushort pageID, ushort usageID)
            {
                UsageName = usageName;
                PageID = pageID;
                UsageID = usageID;
            }

            public string UsageName { get; set; }
            public ushort PageID { get; set; }
            public ushort UsageID { get; set; }
        }

HidDeviceClasses is what will be bound to the menu. The UsageName will be what is displayed for user selection. The PageID and UsageID will be the required IDs for further processing. The menu items are in the image below (circled in red):

The menu displayed in the app.

The ComboBox menu Xaml code snippet is:

            <ComboBox x:Name="cbDevType" ItemsSource="{Binding}" 
               HorizontalAlignment="Left" Height="47" Margin="493,33,0,0" 
               VerticalAlignment="Top" Width="134" 
               SelectionChanged="cbDevType_SelectionChanged" >
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Width="Auto" Height="Auto">
                            <TextBlock Text="{Binding UsageName}" />
                            <TextBlock Text="{Binding PageID}" Visibility="Collapsed"/>
                            <TextBlock Text="{Binding UsageID}" Visibility="Collapsed" />
                        </StackPanel>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>

3. JSON enable the app:

We need to get the NewtonSoft.json library via Nuget and include its using references.

• In Visual Studio in the project, Menu—>Tools—>Nuget Package Manager—>Manage Nuget Packages for the Solution ..
• Search for NewtonSoft.json if it isn’t showing, and install it for the app.  Close Nuget.
• Add the following using references if not showing:

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

Next we add a function that can be called in the MainPage constructor imediately after InitializeComponent();. This function will open the .json file as Json text stream reader, read the stream into a JSON object and then query it using Linq into the required list. The list is then made the data context for the ComboBox.

4. Add the following function to MainPage in MainPageJSON.cs

        private void GetUagePageInfo()
        {
            using (StreamReader file = File.OpenText(".\\usagepage.json"))
            using (JsonTextReader reader = new JsonTextReader(file))
            {
                 JObject jObject = (JObject)JToken.ReadFrom(reader);

            }

          }

5. After the JObject line add the following Json to Linq code to get the list:

                var hidDeviceClasses =
                    from p in jObject["hidDeviceClasses"]
                    select new HidDeviceClass((string)p["UsageName"], (ushort)p["PageID"], (ushort)p["UsageID"]);
                HidDeviceClasses = hidDeviceClasses.ToList<HidDeviceClass>();

6. Finally added the following code to bind the list, just before exiting the function

              cbDevType.DataContext = HidDeviceClasses

Now to implement the list event handler:

7. Add the following event handler to MainPage class in MainPageJSON:

 
       private void cbDevType_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (!(cbDevType.SelectedIndex == -1))
            {
                //Get the selected object and use the usage IDs
                HidDeviceClass seln = (HidDeviceClass)cbDevType.SelectedItem;
                tb_usagepageID.Text = "0x" + seln.PageID.ToString("00");
                tb_usageID.Text = "0x" + seln.UsageID.ToString("00");
            }
        }

Now to create the json data file:

JSON 101:

• A JSON object is a Name followed by a colon separated Value (Name-Value pair), with the object enclosed in braces.
• The value is either a simple value (integer, string etc) or an object.
• The object can also be be an array of values or objects. Arrays are enclosed in square brackets.
  
  

The JSON object for this data is Named hidDeviceClasses and its Value is an array of  HidDeviceClass objects.

8. Create the JSON file as follows:

• Add a new text file to the project and call it usagpage.json
• Set its properties to Content, Copy if Newer and Custom Tool and Custom Tool Namespace both blank.
• Insert the following into the file:

{
    "hidDeviceClasses": 
}

• Looking up the USB.org reference you could add more pages to the data.

Summary

This blog explains how to load an Xaml menu with static data from a JSON data (text) data file.