jsonwpfhierarchicaldatatemplate

How to display JSON in WPF TreeView


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

Here is the code...

Class MainWindow
Public Sub New()

    InitializeComponent()
    Dim dic = GetThreadedObject(GetJASN())("phases")
    Dim items = dic(0)
    tView.ItemsSource = items

End Sub

Private Function GetJASN() As String
    Dim output As String = My.Computer.FileSystem.ReadAllText(My.Application.Info.DirectoryPath & "\UAL525 Phase of Flight.json")
    Return output
End Function

Private Function GetThreadedObject(JASN As String)
    Dim Js As New JavaScriptSerializer()
    Js.MaxJsonLength = JASN.Length * 2
    Dim j = Js.Deserialize(Of Object)(JASN)
    Return j
End Function
End Class

And the WPF...

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <TreeView x:Name="tView">

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

</TreeView>
</Grid>

Start Point and End Point

Start and End points (above) look fine (presumably because they contain child elements to display).

Phase

But the Phase element should just contain one value. A single string that reads "GROUND". But it is broken up into a charArray for some reason. And displayed in multiple elements as shown above.

So what is the key to fixing this? Multiple data templates that display a string differently from other objects?


Solution

  • 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}}" >