如何在后台线程安全序列化WPF UI元素为JSON且不阻塞UI线程

核心逻辑是拆分UI属性提取和序列化IO操作两个阶段，利用WPF UI线程仅处理开销极低的属性读取工作，将高耗时的序列化、文件写入操作放到无UI依赖的后台线程执行。

方案1（推荐：性能最优，无线程风险） #

WPF UI元素的线程亲和性不可绕过，因此绝对不要在非UI线程访问任何UI对象的属性，也不要直接序列化UI对象。

1. UI线程提取纯数据模型
   首先在UI线程遍历所有画布元素，将后续序列化需要的所有属性从UI元素、DesignerElementWrapper中全部读取出来，组装为完全不包含任何UI类型引用的纯POCO（普通C#类）模型，该过程仅涉及内存读取，耗时极低，不会造成UI卡顿。
   示例代码：

// 该段代码全程在UI线程执行，仅做属性读取
List<DesignerElementSerializable> serializableElements = CanvasElements.Select(element =>
{
    var wrapper = element.FindVisualAncestor<DesignerElementWrapper>();
    // 自定义方法：将UI元素需要序列化的所有属性手动提取到纯POCO
    var elementContent = ExtractContentFromUiElement(element);
    return new DesignerElementSerializable
    {
        Size = new Size(wrapper.Width, wrapper.Height),
        Position = new Point(Canvas.GetLeft(wrapper), Canvas.GetTop(wrapper)),
        Content = elementContent,
        // 不要直接存Type类型，存字符串避免序列化问题
        ContentTypeAssemblyName = element.GetType().AssemblyQualifiedName
        // 其他需要序列化的属性
    };
}).ToList();

2. 后台线程执行序列化与写入
   将组装完成的纯数据集合传到后台线程，后续序列化、JSON生成、文件写入全程不会接触任何UI对象，无线程安全问题，也不会阻塞UI。
   示例代码：

// 后台线程执行高耗时操作
await Task.Run(() =>
{
    var json = JsonConvert.SerializeObject(serializableElements, yourSerializerSettings);
    File.WriteAllText(saveFilePath, json);
});

// 可选：执行完成后回到UI线程弹提示/更新状态

方案2（兼容特殊场景：无法抽取POCO时使用） #

如果业务逻辑不允许手动提取POCO，必须直接序列化UI元素，可以采用UI线程分帧序列化的方案，避免长时间阻塞UI：
将所有元素拆分为小批次，每处理完一个批次就主动让出UI线程处理用户输入，序列化完成后再将整个结果扔到后台写文件。
示例代码：

// 每批次处理3个元素，可根据实际场景调整批次大小
foreach (var elementBatch in CanvasElements.Chunk(3))
{
    foreach (var element in elementBatch)
    {
        // 直接在UI线程序列化当前批次的元素
        var wrapper = element.FindVisualAncestor<DesignerElementWrapper>();
        var designerElement = new DesignerElement
        {
            Size = new Size(wrapper.Width, wrapper.Height),
            Position = new Point(Canvas.GetLeft(wrapper), Canvas.GetTop(wrapper)),
            ContentJson = JsonConvert.SerializeObject(element, settings),
            ContentType = element.GetType()
        };
        // 存入结果集合
        resultCollection.Add(designerElement);
    }
    // 让出UI线程，处理用户输入、界面渲染等更高优先级的任务
    await Dispatcher.Yield(DispatcherPriority.Background);
}

// 最后将完整结果扔到后台写文件
await Task.Run(() =>
{
    var finalJson = JsonConvert.SerializeObject(resultCollection, settings);
    File.WriteAllText(saveFilePath, finalJson);
});

该方案的序列化过程仍在UI线程执行，性能略低于方案1，优势是不需要修改原有序列化逻辑，兼容性更高。

内容的提问来源于stack exchange，提问作者toogeneric