前面的文章我们提及过，异步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 override
private 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();
}
#endregion
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;
RootChanged(oldRoot, value);
}
}
public override bool IsDisposed
{
get
{
return false;
}
}
protected override CompositionTarget GetCompositionTargetCore()
{
return _visualTarget;
}
private VisualTarget _visualTarget;
}
}
到这里，你就可以愉快的玩耍了。 下期我们再实现异步UI在XAML上的编辑能力，可以在xaml中添加普通的xaml代码一样简单使用。
本文会经常更新，请阅读原文： https://huchengv5.gitee.io//post/%E4%B8%BA%E5%BC%82%E6%AD%A5UI%E6%B7%BB%E5%8A%A0%E4%BA%A4%E4%BA%92%E8%83%BD%E5%8A%9B.html ，以避免陈旧错误知识的误导，同时有更好的阅读体验。
本作品采用
知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
进行许可。欢迎转载、使用、重新发布，但务必保留文章署名胡承（包含链接：
https://huchengv5.gitee.io/
），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请
与我联系
。
