使用 WPF 从自定义 JSON 显示 TreeView

Question

我正在尝试使用 TreeView 呈现未知的 JSON。我还需要编辑这些 JSON 对象中的字符串并将其写回，因此我需要某种形式的字典，但键可以从层次结构的一侧重复到另一侧（JSON 示例中的“响应”）。我研究了又研究，但找不到有效的东西。大多数问题也是针对 winforms 或不使用 MVVM 提出的，我无法将其转化为我想要的内容。

\n

JSON 示例：

\n

{\n  "universal": {\n    "regionalSettings": {\n      "culture": {\n        "en-GB": "United Kingdom (en-GB)",\n        "mk-MK": "\xd0\x9c\xd0\xb0\xd0\xba\xd0\xb5\xd0\xb4\xd0\xbe\xd0\xbd\xd0\xb8\xd1\x98\xd0\xb0 (mk-MK)",\n        "sq-MK": "Shqip\xc3\xabria (sq-MK)",\n      },\n      "language": {\n        "en-GB": "English (United Kingdom)",\n        "mk": "\xd0\x9c\xd0\xb0\xd0\xba\xd0\xb5\xd0\xb4\xd0\xbe\xd0\xbd\xd1\x81\xd0\xba\xd0\xb8",\n        "sq": "Shqipe",\n      },\n      "timeZone": {\n        "Europe/Amsterdam": "Europe/Amsterdam",\n        "Europe/Andorra": "Europe/Andorra",\n        "Europe/Astrakhan": "Europe/Astrakhan",\n        "Europe/Athens": "Europe/Athens",\n        "Europe/Belgrade": "Europe/Belgrade",\n        "Europe/Berlin": "Europe/Berlin",\n        "Europe/Bratislava": "Europe/Bratislava",\n        "Europe/Brussels": "Europe/Brussels",\n      }\n    }\n  }\n}\n

\n

查看片段：

\n

{\n  "universal": {\n    "regionalSettings": {\n      "culture": {\n        "en-GB": "United Kingdom (en-GB)",\n        "mk-MK": "\xd0\x9c\xd0\xb0\xd0\xba\xd0\xb5\xd0\xb4\xd0\xbe\xd0\xbd\xd0\xb8\xd1\x98\xd0\xb0 (mk-MK)",\n        "sq-MK": "Shqip\xc3\xabria (sq-MK)",\n      },\n      "language": {\n        "en-GB": "English (United Kingdom)",\n        "mk": "\xd0\x9c\xd0\xb0\xd0\xba\xd0\xb5\xd0\xb4\xd0\xbe\xd0\xbd\xd1\x81\xd0\xba\xd0\xb8",\n        "sq": "Shqipe",\n      },\n      "timeZone": {\n        "Europe/Amsterdam": "Europe/Amsterdam",\n        "Europe/Andorra": "Europe/Andorra",\n        "Europe/Astrakhan": "Europe/Astrakhan",\n        "Europe/Athens": "Europe/Athens",\n        "Europe/Belgrade": "Europe/Belgrade",\n        "Europe/Berlin": "Europe/Berlin",\n        "Europe/Bratislava": "Europe/Bratislava",\n        "Europe/Brussels": "Europe/Brussels",\n      }\n    }\n  }\n}\n

\n

视图模型片段：

\n

                <ScrollViewer>\n                    <TreeView>\n                        <HierarchicalDataTemplate ItemsSource="{Binding Tree}" />\n                    </TreeView>\n                </ScrollViewer>\n

\n

“魔法应该发生的地方”标记了我缺少代码的地方。在那里，我需要以某种方式分层表示 json 并使其成为可以传递到 TreeView 的格式，同时还包含字符串（在对象中，而不是在 TreeView 本身中，因为我需要在特定项目时显示这些字符串）在树中被选中），目前我正在传递 JObject，它使 TreeView 显示根目录“System.Windows.HierarchicalDataTemplate”。

\n

我真诚地感谢所有可以提前提供帮助的人。

\n

Answer 1

正如我们在评论中得出的结论，某些Json 编辑器可能适合实现目标。

我已经实现了一个示例，如何使用 .NET Core System.Text.Json（文档）读取/写入 json 并使用 .NET Core 浏览它TreeView。

我没有使用 Calibrum.Micro 并且不熟悉它，但在没有任何外部库的情况下完成了它。我在解决方案中添加了两个帮助程序类。

public class NotifyPropertyChanged : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

public class RelayCommand : ICommand
{
    private readonly Action<object> _execute;
    private readonly Predicate<object> _canExecute;

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }

    public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
        => (_execute, _canExecute) = (execute, canExecute);

    public bool CanExecute(object parameter)
        => _canExecute == null || _canExecute(parameter);

    public void Execute(object parameter)
        => _execute(parameter);
}

Tha数据模型实现

public class TreeNode : NotifyPropertyChanged
{
    public static MainViewModel MainVM { get; set; }

    private bool _isSelected;
    private string _name;
    public bool IsSelected 
    { 
        get => _isSelected; 
        set
        {
            _isSelected = value;
            if (_isSelected) MainVM.SelectedItem = this;
        } 
    }
    public string Name 
    { 
        get => _name; 
        set
        {
            _name = value;
            OnPropertyChanged();
        } 
    }
}

public class TreeObject : TreeNode
{
    private ObservableCollection<TreeNode> _children;

    public ObservableCollection<TreeNode> Children
    { 
        get => _children; 
        set
        {
            _children = value;
            OnPropertyChanged();
        } 
    }
}

public class TreeValue : TreeNode
{
    private string _value;
    public string Value
    { 
        get => _value; 
        set
        {
            _value = value;
            OnPropertyChanged();
        } 
    }
}

查看型号MainWindow

public class MainViewModel : NotifyPropertyChanged
{
    private ObservableCollection<TreeNode> _treeItems;
    private TreeNode _selectedItem;
    private ICommand _loadCommand;
    private ICommand _saveCommand;

    public ObservableCollection<TreeNode> TreeItems
    {
        get => _treeItems;
        set
        {
            _treeItems = value;
            OnPropertyChanged();
        }
    }

    public TreeNode SelectedItem
    {
        get => _selectedItem;
        set
        {
            _selectedItem = value;
            OnPropertyChanged();
        }
    }

    public ICommand LoadCommand => _loadCommand ??= new RelayCommand(parameter =>
    {
        TreeItems = new ObservableCollection<TreeNode>();
        JsonReaderOptions options = new JsonReaderOptions
        {
            AllowTrailingCommas = true,
            CommentHandling = JsonCommentHandling.Skip
        };

        Utf8JsonReader reader = new Utf8JsonReader(File.ReadAllBytes("example.json"), options);
        reader.Read();
        ReadJson(ref reader, TreeItems);
    });

    public ICommand SaveCommand => _saveCommand ??= new RelayCommand(parameter =>
    {
        JsonWriterOptions options = new JsonWriterOptions
        {
            Indented = true,
            Encoder = JavaScriptEncoder.UnsafeRelaxedJsonEscaping
        };
        using Stream stream = File.Create("out.json");
        using Utf8JsonWriter writer = new Utf8JsonWriter(stream, options);
        writer.WriteStartObject();
        WriteJson(writer, TreeItems);
    });

    private void WriteJson(Utf8JsonWriter writer, ObservableCollection<TreeNode> items)
    {
        foreach (TreeNode node in items)
        {
            switch (node)
            {
                case TreeValue valueNode:
                    writer.WriteString(valueNode.Name, valueNode.Value);
                    break;
                case TreeObject objectNode:
                    writer.WriteStartObject(objectNode.Name);
                    WriteJson(writer, objectNode.Children);
                    break;
            }
        }
        writer.WriteEndObject();
    }
        
    private void ReadJson(ref Utf8JsonReader reader, ObservableCollection<TreeNode> items)
    {
        bool complete = false;
        string propertyName = "";
        while (!complete && reader.Read())
        {
            switch (reader.TokenType)
            {
                case JsonTokenType.PropertyName:
                    propertyName = reader.GetString();
                    break;
                case JsonTokenType.String:
                    items.Add(new TreeValue { Name = propertyName, Value = reader.GetString() });
                    break;
                case JsonTokenType.StartObject:
                    ObservableCollection<TreeNode> children = new ObservableCollection<TreeNode>();
                    items.Add(new TreeObject { Name = propertyName, Children = children });
                    ReadJson(ref reader, children);
                    break;
                case JsonTokenType.EndObject:
                    complete = true;
                    break;
            }
        }
    }

    public MainViewModel()
    {
        TreeItems = new ObservableCollection<TreeNode>();
        TreeNode.MainVM = this;
    }
}

查看（整个标记）

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TreeView Margin="5" ItemsSource="{Binding TreeItems}">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type local:TreeObject}" ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Name}"/>
                </HierarchicalDataTemplate>
                <DataTemplate DataType="{x:Type local:TreeValue}">
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
                <Style TargetType="TreeViewItem">
                    <Setter Property="IsSelected" Value="{Binding IsSelected}" />
                    <Setter Property="IsExpanded" Value="True"/>
                </Style>
            </TreeView.Resources>
        </TreeView>
        <StackPanel Margin="5" Grid.Column="1">
            <StackPanel Orientation="Horizontal">
                <Button Content="Load" Padding="5,0" Command="{Binding LoadCommand}"/>
                <Button Content="Save" Padding="5,0" Margin="5,0,0,0" Command="{Binding SaveCommand}"/>
            </StackPanel>
            <TextBlock Text="Name"/>
            <TextBox Text="{Binding SelectedItem.Name, UpdateSourceTrigger=PropertyChanged}"/>
            <ContentControl Content="{Binding SelectedItem}" Margin="0,5">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type local:TreeObject}">
                        <WrapPanel>
                            <TextBlock Text="{Binding Children.Count, StringFormat=Children count: {0}}"/>
                        </WrapPanel>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type local:TreeValue}">
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="Value"/>
                            <TextBox Text="{Binding Value, UpdateSourceTrigger=PropertyChanged}"/>
                        </StackPanel>
                    </DataTemplate>
                </ContentControl.Resources>
            </ContentControl>
        </StackPanel>
    </Grid>
</Window>