WPF异步UI交互功能的实现方法

前面的文章我们提及过，异步UI的基础实现。基本思路主要是开启新的UI线程，并通过VisualTarget将UI线程上的Visual(即RootVisual)连接到主线程上的UI上即可渲染显示。

但是，之前的实现访问是没有交互能力的，视觉树上的UI并不能实现鼠标事件。那么今天我们就把交互的工作也给完成了。

实现交互能力的核心在于PresentationSource，它是完成交互功能的核心。它提供了交互源，它是一个抽象类，不能直接使用。我们需要通过继承它来实现交互逻辑。

具体代码如下：

 public class VisualTargetPresentationSource : PresentationSource{public VisualTargetPresentationSource(HostVisual hostVisual){_visualTarget = new VisualTarget(hostVisual);}public override Visual RootVisual{get{return _visualTarget.RootVisual;}set{Visual oldRoot = _visualTarget.RootVisual;_visualTarget.RootVisual = value;//此处是关键代码，通过根的时间通知，触发Load事件。通知视觉树，元素已经加载。//元素加载后，IsVisible会变成True，命中测试才能开始工作RootChanged(oldRoot, value);}}public override bool IsDisposed{get{return false;}}protected override CompositionTarget GetCompositionTargetCore(){return _visualTarget;}private VisualTarget _visualTarget;}

有了上述代码，我们的异步UI具备了交互能力。但是此时，我们用鼠标点击元素，依然是不会有动作发生的。

因为我们的UI是在异步线程上，它的功能受到一定的阉割，它并不能直接响应鼠标或者键盘事件。所以我们需要通过VisualHost来做路由事件的传递。

请看完整的示例：

//异步UI容器public class AsyncUIContainer : UIElement{public AsyncUIContainer(){Initialize();}private HostVisual hostVisual;private Grid RootVisual;private DispatcherUIThread dispatcherUIThread;/// <summary>/// /// </summary>private void Initialize(){hostVisual = new HostVisual();dispatcherUIThread = new DispatcherUIThread();dispatcherUIThread.Start();dispatcherUIThread.Dispatcher.Invoke(() =>{RootVisual = new Grid();new VisualTargetPresentationSource(hostVisual){RootVisual = RootVisual};});AddVisualChild(hostVisual);}public void UpdateRootLayout(Action<Grid> action){if (action != null){RootVisual.Dispatcher.Invoke(() =>{action(RootVisual);});}}#region overrideprivate UIElement _hitElement;protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters){RootVisual.Dispatcher.Invoke(() =>{_hitElement = (UIElement)RootVisual.InputHitTest(hitTestParameters.HitPoint);});if (_hitElement != null){return new PointHitTestResult(this, hitTestParameters.HitPoint);}else{return null;}}//此处是用来做路由事件转发，用于触发UI线程上的元素事件protected override void OnMouseDown(MouseButtonEventArgs e){base.OnMouseDown(e);if (_hitElement != null){_hitElement.Dispatcher.Invoke(() => _hitElement.RaiseEvent(e));}}//重写布局系统，让多线程UI元素能正常布局protected override Size MeasureCore(Size availableSize){if (availableSize.Height > 0 && availableSize.Width > 0 && !(double.IsInfinity(availableSize.Height) || double.IsInfinity(availableSize.Width))){RootVisual.Dispatcher.Invoke(() =>{RootVisual.Measure(availableSize);});return availableSize;}else{var minSize = new Size(200, 200);RootVisual.Dispatcher.Invoke(() =>{RootVisual.Measure(minSize);                  });return minSize;}}//重写布局系统，让多线程UI元素能正常布局protected override void ArrangeCore(Rect finalRect){base.ArrangeCore(finalRect);RootVisual.Dispatcher.Invoke(() =>{RootVisual.Arrange(finalRect);});RenderSize = finalRect.Size;}//指定起Visual的数量protected override int VisualChildrenCount => 1;//指定需要渲染的Visual对象protected override Visual GetVisualChild(int index){return hostVisual;}public void Dispose(){dispatcherUIThread?.Dispose();}#endregionpublic class VisualTargetPresentationSource : PresentationSource{public VisualTargetPresentationSource(HostVisual hostVisual){_visualTarget = new VisualTarget(hostVisual);}public override Visual RootVisual{get{return _visualTarget.RootVisual;}set{Visual oldRoot = _visualTarget.RootVisual;_visualTarget.RootVisual = value;RootChanged(oldRoot, value);}}public override bool IsDisposed{get{return false;}}protected override CompositionTarget GetCompositionTargetCore(){return _visualTarget;}private VisualTarget _visualTarget;}}

到这里，你就可以愉快的玩耍了。下期我们再实现异步UI在XAML上的编辑能力，可以在xaml中添加普通的xaml代码一样简单使用。