WinRT - 用于透明 PNG 的 ImageButton
WinRT - ImageButton for transparent PNGs
我正在使用 XAML Toolkit ImageButton 控件来为按钮创建正常和按下状态。代码是:
<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/1_off.png"
PressedStateImageSource="ms-appx:///Assets/1_on.png"
Width="500"
Height="200">
</toolkit:ImageButton>
我面临的问题是,假设我的形状不是矩形或正方形。例如,我有星形和箭头对象的 PNG。有没有办法根据形状设置它们的边界?如果没有,请建议处理此类情况的最佳方法。
我尝试了两个选项
当使用鼠标或触摸点击时 - 您会在点击前检查指针的最后位置,看看按钮中的图像在该位置是否有不透明像素。
- 优点:
- 比选项 2 简单。
- 您获得最准确的信息
- 缺点:
- 您无法判断某个按钮是通过鼠标、触摸、笔、键盘还是由旁白使用自动化点击的,因此您最终可能会因为鼠标光标有点偏离而过滤掉键盘点击。您可能会使用一些启发式方法,例如在点击事件之前指针移动或指针向下事件发生了多长时间,但这有点老套并且可能不可靠。
为您的图像生成矢量路径并将其作为带有 Fill="Transparent"
的 Path
元素放入按钮模板中,然后标记任何其他非透明或可点击测试的模板元素(按钮、背景为 "Transparent" 的边框等)为 IsHitTestVisible="false"
.
- 优点:
- 不破坏任何输入法
- 可以很精确
- 对于某些形状,例如圆形 -
Path.Data
可能非常简单,或者您甚至可以使用 Ellipse
元素之类的东西来代替
- 缺点:
- 您需要以某种方式生成路径
- 复杂的路径可能会对性能产生不利影响
在大多数情况下总体上更好的解决方案是将可命中测试区域保留为矩形。原因是 - 任意形状是一个挑剔且不可靠的命中测试目标,因此它使单击按钮更加困难。使用默认的矩形边框或至多 - 椭圆形状更简单且更可用。
我正在使用 XAML Toolkit ImageButton 控件来为按钮创建正常和按下状态。代码是:
<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/1_off.png"
PressedStateImageSource="ms-appx:///Assets/1_on.png"
Width="500"
Height="200">
</toolkit:ImageButton>
我面临的问题是,假设我的形状不是矩形或正方形。例如,我有星形和箭头对象的 PNG。有没有办法根据形状设置它们的边界?如果没有,请建议处理此类情况的最佳方法。
我尝试了两个选项
当使用鼠标或触摸点击时 - 您会在点击前检查指针的最后位置,看看按钮中的图像在该位置是否有不透明像素。
- 优点:
- 比选项 2 简单。
- 您获得最准确的信息
- 缺点:
- 您无法判断某个按钮是通过鼠标、触摸、笔、键盘还是由旁白使用自动化点击的,因此您最终可能会因为鼠标光标有点偏离而过滤掉键盘点击。您可能会使用一些启发式方法,例如在点击事件之前指针移动或指针向下事件发生了多长时间,但这有点老套并且可能不可靠。
- 优点:
为您的图像生成矢量路径并将其作为带有
Fill="Transparent"
的Path
元素放入按钮模板中,然后标记任何其他非透明或可点击测试的模板元素(按钮、背景为 "Transparent" 的边框等)为IsHitTestVisible="false"
.- 优点:
- 不破坏任何输入法
- 可以很精确
- 对于某些形状,例如圆形 -
Path.Data
可能非常简单,或者您甚至可以使用Ellipse
元素之类的东西来代替
- 缺点:
- 您需要以某种方式生成路径
- 复杂的路径可能会对性能产生不利影响
- 优点:
在大多数情况下总体上更好的解决方案是将可命中测试区域保留为矩形。原因是 - 任意形状是一个挑剔且不可靠的命中测试目标,因此它使单击按钮更加困难。使用默认的矩形边框或至多 - 椭圆形状更简单且更可用。