有没有一种方法可以在WPF中模拟MouseOver? [英] Is there a way to simulate MouseOver in WPF?

问题描述

我正在使用WPF中适合带图标链接的文本大小写.我想在某些图像右侧显示的超链接中包含一些文本.

I'm working on a link control in WPF which fits the text with icon links case in the Windows UX Guide. I want to have some text within a hyperlink that appears to the right of some image.

在我的情况下，我首先使用包含Hyperlink的TextBlock，然后包含我的图像和一些文本.

In my case I started off by using a TextBlock that contained a Hyperlink which then contained my image and some text.

<TextBlock>
    <Hyperlink>
        <Rectangle Height="16"
                   Width="16"
                   Fill="{StaticResource MyIconBrush}"
                   Stretch="UniformToFill"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Left" />
        <Run>My link text</Run>
    </Hyperlink>
</TextBlock>

但是，这样做的问题是，图像比我的文字高，会产生一种效果，即文字与底部对齐.不幸的是，我还没有找到一种方法来控制TextBlock或Hyperlink内的垂直对齐方式，因此我尝试采用另一种布局，其中代表我的矢量图标的Hyperlink和Rectangle分开为了使它们正确对齐，如下所示.

The problem with this however was that the image being taller than my text produced an effect where the text was aligned to the bottom. Unfortunately I haven't found a way to control the vertical alignment within the TextBlock or within the Hyperlink, so I've resorted to attempting an alternative layout where the Hyperlink and the Rectangle that represent my vector icon are separated in order to get them to align properly like shown below.

<StackPanel Orientation="Horizontal">
    <Rectangle Height="16"
               Width="16"
               Fill="{StaticResource MyIconBrush}"
               Stretch="UniformToFill"
               VerticalAlignment="Center"
               HorizontalAlignment="Left" />
    <TextBlock VerticalAlignment="Center">
        <Hyperlink>My link text<Hyperlink>
    </TextBlock>
</StackPanel>

但是，与此有关的问题是，既然我的图标和我的Hyperlink是分开的，当鼠标悬停在我的图标上时，我没有看到链接的MouseOver外观，反之亦然.另外，我的Hyperlink还可以选择挂接Command，但是Rectangle和StackPanel没有，因此，如果我使用Hyperlink.Command，该图标将不会执行Command.

The problem with this however is that now that my Icon and my Hyperlink are separated I don't get my MouseOver appearance of my link when I the mouse is over my icon and vise-versa. Also my Hyperlink has an option for me to hook up a Command, but the Rectangle and StackPanel do not, so if I make use of Hyperlink.Command, the icon will not execute the Command.

所以这让我开始思考，如何模拟给定控件的MouseOver，并带有一个复选框，当您实际将鼠标悬停在其关联文本上时，会在该框上获得MouseOver效果.我知道在HTML世界中， label 元素中有一个 属性，可用于指定其标记的控件，这些控件基本上可以完成我要寻找的操作.我还可以想象，在其他情况下，最好有一个标签，当您将鼠标悬停在其上时会显示一个相应的文本框，就像鼠标悬停在该文本框上一样，并且可能在单击焦点时也将相应的文本框也赋予了该标签.目前，尽管我主要对如何在WPF中获取标签或类似标签的元素感兴趣，以根据其MouseOver状态充当给定控件的代理感兴趣.另外，如果可能的话，我也想纯粹在XAML中做到这一点.

So this got me to thinking, how do I simulate MouseOver for a given control such with a checkbox where you get the MouseOver effect on the box when you actually mouse over its associated text. I know in the HTML world the label element has a for attribute that can be used to specify which control it is labeling which will basically do what I'm looking for. Also I can imagine that in other scenarios it may be nice to have a label that when you mouse over shows a corresponding text box as if the mouse is over it and possibly when clicked focus is given to the corresponding text box as well. For now though I'm interested mainly in how to to get a label or label like element in WPF to act as a proxy for a given control in terms of its MouseOver state. Also I would like to do this purely in XAML if possible.

更新:我也尝试了以下操作，但没有成功.我得到了想要的外观，但是图标下的链接似乎不足以引起鼠标事件.我猜命中测试仅在鼠标实际上位于呈现的文本上方时才起作用，而与控件的填充无关.

UPDATE: I also attempted the following but no success. I get the appearance I want but the link under the icon did not appear to be enough to get the mouse events. I guess the hit tests only work when the mouse is actually over the rendered text regardless of the padding of the control.

<Grid>
    <Rectangle Height="16"
               Width="16"
               Fill="{StaticResource MyIconBrush}"
               Stretch="UniformToFill"
               HorizontalAlignment="Left"
               VerticalAlignment="Center"
               IsHitTestVisible="False"
               Focusable="False"/>
    <TextBlock Padding="18,0,0,0"
               VerticalAlignment="Center">
        <Hyperlink>Configure additional filters...</Hyperlink>
    </TextBlock>
</Grid>

推荐答案

使用Run和BaselineAlignment ="Center"将导致链接断开.只需将图像和文本块填充到这样的水平堆栈面板中即可.

Using Run and BaselineAlignment="Center" will result in a broken link. Just stuff the image and textblock in a horizontal stack panel like this.

<TextBlock> 
    <Hyperlink> 
        <StackPanel Orientation="Horizontal">
            <Rectangle 
                Height="16" Width="16" 
                Fill="{StaticResource MyIconBrush}" 
                Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Left" /> 
            <TextBlock 
                Text="My link text" 
                VerticalAlignment="Center"/>
        </StackPanel>
    </Hyperlink>
</TextBlock>

如果您希望控件以默认方式以外的其他方式对鼠标悬停事件可见，则需要覆盖其控件模板.通过采用现有的控制模板并根据您的需要对其进行修改，这是最简单的方法.例如，可以在 复选框ControlTemplate示例 .这应该显示如何在鼠标悬停时将背景更改为另一种颜色，但是您也可以在某些内容更改颜色下创建一行以模拟超链接.

If you want a control to visible react to a mouseover event in some other way than it does by default, you need to override its controltemplate. This is easiest done by taking an existing controltemplate and modify it to your needs. For example, a control template for checkbox can be found in CheckBox ControlTemplate Example. This should show how to change the background to another color on mouseover, but you could also make a line under some content change color to simulate a hyperlink.

这篇关于有没有一种方法可以在WPF中模拟MouseOver?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！