How to display JSON in WPF TreeView

Question

I am reading in JSON and then displaying it in a WPF treeview.

Here is the code...

Class MainWindow
Public Sub New()

    InitializeComponent()
    D         


        

Answer 1

Here is the code Rekshino submitted, in Vb.

Imports System.Globalization
Public Class ValConv
Implements IValueConverter
Private Function IValueConverter_Convert(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.Convert
    If (TypeOf value Is String) Then
        Dim newStr As New List(Of String)
        newStr.Add(value)
        Return newStr
    Else
        Return value
    End If
End Function

Private Function IValueConverter_ConvertBack(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
    Return value
End Function

End Class

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApp2"
    Title="Window1" Height="300" Width="300">

<Window.Resources>
    <local:ValConv x:Key="valConv"/>
</Window.Resources>
<Grid>
    <TreeView x:Name="tView">

    <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Value, Converter={StaticResource valConv}}" >
                <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" Foreground="Red"/>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
            <TextBlock Text="{Binding Key}"/>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>

</TreeView>
</Grid>

Answer 2

The problem is that your XAML can only show a collections in dictionary's value and if there is a string, then it will be considered as collection of characters. One of the quick sollutions is to create a converter, which will transform your strings into string collections.

For this you need a value converter(sorry I do code in c#)

public class ValConv : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is string str)
        {
            return new List<string> { str };
        }
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}

Instantiate this converter in resources:

<Window.Resources>
<local:ValConv x:Key="valKonv"/>
</Window.Resources>

and use it:

<HierarchicalDataTemplate ItemsSource="{Binding Value, Converter={StaticResource valConv}}" >

Answer 3

I needed a more generic operation to consume any JSON.

This code uses the nuget Newtonsoft JSON to do the magic of taking any raw JSON (without models) and loading it into a TreeView which looks like this:

JSON

string jsonString = @"[{""BatchId"":0,""AccessionChanges"":[{""LabId"":8675309,""InstanceChanges"":[{""Property"":""Note"",""ChangedTo"":""Jabberwocky"",""UniqueId"":null,""SummaryInstance"":null},{""Property"":""Instrument"",""ChangedTo"":""instrumented"",""UniqueId"":null,""SummaryInstance"":null}],""DetailChanges"":[{""Property"":""Comments"",""ChangedTo"":""2nd Comment"",""UniqueId"":null,""SummaryInstance"":null},{""Property"":""CCC"",""ChangedTo"":""XR71"",""UniqueId"":null,""SummaryInstance"":null}]}]}]";

Xaml <TreeView x:Name="tView" />

Codbehind Xaml

InitializeComponent();
try
{
    tView.Items.Add(JSONOperation.Json2Tree(JArray.Parse(jsonString), "Root"));    
}
catch (JsonReaderException jre)
{
    MessageBox.Show($"Invalid Json {jre.Message}");
}

public static class JSONOperation

public static TreeViewItem Json2Tree(JToken root, string rootName = "")
{
    var parent = new TreeViewItem() { Header = rootName };

    foreach (JToken obj in root)
        foreach (KeyValuePair<string, JToken> token in (JObject)obj)
            switch (token.Value.Type)
            {
                case JTokenType.Array:
                    var jArray = token.Value as JArray;

                    if (jArray?.Any() ?? false)
                        parent.Items.Add(Json2Tree(token.Value as JArray, token.Key));
                    else
                        parent.Items.Add($"\x22{token.Key}\x22 : [ ]"); // Empty array   
                    break;

                case JTokenType.Object:
                    parent.Items.Add(Json2Tree((JObject)token.Value, token.Key));
                    break;

                default:
                    parent.Items.Add(GetChild(token));
                    break;
            }

    return parent;
}

private static TreeViewItem GetChild(KeyValuePair<string, JToken> token)
{
    var value = token.Value.ToString();
    var outputValue = string.IsNullOrEmpty(value) ? "null" : value;
    return new TreeViewItem() { Header = $" \x22{token.Key}\x22 : \x22{outputValue}\x22"}; 
}