| title | author | date | CreateTime | categories |
|---|---|---|---|---|
WPF 解决 StylusPlugIn 点击穿透问题 |
lindexi |
2019-10-18 20:55:35 +0800 |
2019-1-8 10:49:4 +0800 |
WPF 笔迹 |
在使用 StylusPlugIn 的时候会出现这样的坑，只要一个元素附加有 StylusPlugIn 加入到视觉树，在这个元素上面放另一个没有附加 StylusPlugIn 的元素，点击上面的元素，下面的元素的 StylusPlugIn 还是可以收到触摸的消息
如果写一个简单的 StylusPlugIn 附加到元素上，可以很快知道我说的问题
public class JallsiniPeagelJurnarbe : StylusPlugIn
{
/// <inheritdoc />
protected override void OnStylusDown(RawStylusInput rawStylusInput)
{
Trace();
base.OnStylusDown(rawStylusInput);
}
/// <inheritdoc />
protected override void OnStylusMove(RawStylusInput rawStylusInput)
{
Trace();
base.OnStylusMove(rawStylusInput);
}
/// <inheritdoc />
protected override void OnStylusUp(RawStylusInput rawStylusInput)
{
Trace();
base.OnStylusUp(rawStylusInput);
}
private void Trace([CallerMemberName] string name = "")
{
Debug.WriteLine(name);
}
}再创建一个 UIElement 附加这个 JallsiniPeagelJurnarbe 将 UIElement 添加到界面，就可以在触摸的时候看到输出
public class MeexikelelHaiwurbe : UIElement
{
/// <inheritdoc />
public MeexikelelHaiwurbe()
{
var dynamicRenderer = new JallsiniPeagelJurnarbe();
StylusPlugIns.Add(dynamicRenderer);
}
}现在摸一下屏幕，可以看到不断输出
但是如果在这个元素上面再放一个元素会怎样？
下面创建一个用户控件，这个用户控件非常简单，我就不放代码了
<local:MeexikelelHaiwurbe></local:MeexikelelHaiwurbe>
<local:NabayparKawquheTea HorizontalAlignment="Center" VerticalAlignment="Center"></local:NabayparKawquheTea>
此时摸到了 林德熙是逗比 的元素，在 JallsiniPeagelJurnarbe 还是可以收到触摸的消息，如果是通过 JallsiniPeagelJurnarbe 做书写，那么就会发现在 林德熙是逗比 的元素后面进行了书写，此时在 林德熙是逗比 的元素的 Down Move 函数使用 e.Handle = true 也没有用，因为 StylusPlugIn 走的不是路由事件
这个问题就是 StylusPlugIn 点击穿透问题，虽然在元素上面放了另一个元素，但是在触摸的时候就像上面的元素不存在一样
一个解决方法是在上面的元素上创建一个空白的 StylusPlugIn 这样就可以防止点击穿透
刚才创建的 林德熙是逗比 的元素，在这个元素的构造函数添加一个空白的 StylusPlugIn 就可以解决这个问题
public partial class NabayparKawquheTea : UserControl
{
public NabayparKawquheTea()
{
InitializeComponent();
StylusPlugIns.Add(new LihemtugeJootrasLeresu());
}
}
public class LihemtugeJootrasLeresu : StylusPlugIn
{
}现在的触摸将会很诡异，为了说明这时的触摸是怎样的，需要再添加一点代码
现在白色部分是底层的元素，灰色的说德熙是逗比的元素放在底层元素上面，然后进行一次触摸
从底层元素按下，然后移动到说德熙是逗比的元素上，接着移到底层元素上抬起
底层的元素OnStylusEnter
底层的元素OnStylusDown
说德熙是逗比的元素 OnStylusEnter
说德熙是逗比的元素 OnStylusLeave
说德熙是逗比的元素 OnStylusEnter
说德熙是逗比的元素 OnStylusLeave
底层的元素OnStylusUp此时移动到说德熙是逗比的元素上在底层的元素依然可以接收到 Move 的消息
如果是从说德熙是逗比的元素上按下，然后移动到底层元素，请看下图
底层的元素OnStylusEnter
底层的元素OnStylusDown
说德熙是逗比的元素 OnStylusEnter
说德熙是逗比的元素 OnStylusDown
说德熙是逗比的元素 OnStylusLeave
说德熙是逗比的元素 OnStylusEnter
说德熙是逗比的元素 OnStylusLeave
底层的元素OnStylusUp虽然说德熙是逗比的元素的层级比底层的元素高，但是首先命中的是底层的元素然后才是 说德熙是逗比 的元素收到 down 如果此时在底层的元素抬手，那么就会在底层的元素收到 up 而在说德熙是逗比的元素上没有收到消息
通过这个方法可以只要 说德熙是逗比 的元素有触摸，就设置底层的元素失去焦点，通过在 底层的元素 添加一个方法，调用这个方法就不处理当前的触摸
在使用 StylusPlugIns 集合，使用框架的方法判断是通过在 _plugInCollectionList 字段拿到所有的集合，也就是先添加到视觉树的控件，将会在 PenContexts.AddStylusPlugInCollection 加入到字段。所以遍历的顺序和视觉树顺序无关，而是和加入视觉树的顺序有关。详细请看
WPF 高速书写 StylusPlugIn 原理
那么在 WPF 的 DynamicRenderer 是如何处理的？
在 StylusPlugIn 有一个方法是 OnStylusDownProcessed 通过这个方法可以判断在 UI 线程命中测试的附加元素有没有收到输入，通过判断参数 targetVerified 的值就可以知道
如果在 UI 线程的元素刚好也收到了触摸的消息，这里的 targetVerified 就是 true 否则就是 false 当然这个方法要求在 down 的时候调用 NotifyWhenProcessed 方法才可以
protected override void OnStylusDown(RawStylusInput rawStylusInput)
{
Trace();
// 调用这个方法之后才会触发 OnStylusDownProcessed 在主线程收到触摸
// 如果附加的元素收到了路由触摸，参数 targetVerified 为 true 通过这个方法可以判断当前的点击的元素是否在上面有其他元素
rawStylusInput.NotifyWhenProcessed("林德熙是逗比");
base.OnStylusDown(rawStylusInput);
}这里的 NotifyWhenProcessed 传入的参数将会是在 OnStylusDownProcessed 的第一个参数 callbackData 返回，在 DynamicRenderer 就是传入了 StrokeInfo 然后在这个函数判断
所以解决这个问题有两个方法，第一个就是在元素上面添加一个 StylusPlugIn 如果收到了消息就设置另一个元素的 StylusPlugIn 失去焦点，另一个方法是在元素通过 NotifyWhenProcessed 设置如果主线程的元素可以收到触摸的方法
第一个方法是需要在其他所有元素上面添加 StylusPlugIn 有代码耦合
第二个方法需要等待主线程收到消息，在笔迹就出现点击的时候出现了闪烁，因为触摸线程比主线程先收到点击