悬停时显示边框控制

Question

我有一个 Border 控件，它包含一个 Image 控件。基本上，如果图像控件悬停，我想显示边框控件。 类似于 css :hover 效果的东西。

实现这一目标的最简单方法是什么？

Answer 1

所以有很多方法可以实现这一点，这完全取决于您的设置。

• 仅用于一个孤立的图像，还是您希望能够在其他地方重复使用此功能？
• 您的图片是否在DataTemplate 中用于ListView 或其他一些项目控件？
• 您是否可以通过编写代码隐藏来实现这一点，或者最好是仅使用 XAML 的解决方案？ （希望是后者。）
• 等

如果只针对一张图像，您可以处理图像控件上的PointerEntered 和PointerExited 事件，将边框的BorderBrush 颜色分别设置为黄色（例如）和透明。由于您说您对 XAML 非常陌生，因此这是我可以提供的唯一“最简单”的解决方案。也许其他人可以提出其他简单的替代方案。不幸的是，没有开箱即用的类似 ":hover" 的样式。您必须自己编写此功能。

---

我首选的解决方案是将此功能捆绑到某种可重用组件中。想到的一些解决方案：

1. 创建一个 UserControl 包含 Border 和 Image 以及处理指针进入和退出事件所需的代码隐藏。
2. 创建一个新的模板ContentControl，允许您在Border 内设置任意UIElement。这也允许您使用TemplateBindings 从模板外部设置BorderBrush 之类的内容。
3. 创建一个 Behavior (Blend SDK)，可以附加到您的 Border 以包含必要的逻辑。

关于 Blend SDK 的主题，如果您使用 VisualStates 和 blend 的 EventTriggerBehavior 和 GoToStateAction 来处理 PointerEntered 上不断变化的视觉状态，则可以使用零代码隐藏来实现解决方案 1 和 2和PointerExited 事件。