Question

当鼠标悬停在图标bug上时，如何制作将弹出的图片

我的图标的xaml代码

{{1}}

Answer 1

您可以使用WPF Image.Style Trigger更改图像来源，例如关于MouseOver事件的img1.png到img2.png，如以下示例所示：

清单1.使用触发器在WPF图像控件中的鼠标悬停上切换图像

<Image>
  <Image.Style>
    <Style TargetType="{x:Type Image}">
      <Setter Property="Source" Value="img/img1.png"/>
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter Property="Source" Value="img/img2.png"/>
        </Trigger>
      </Style.Triggers>
    </Style>
  </Image.Style>
</Image>

或者，您可以使用WPF img/info.png在MouseOver事件上显示图像Trigger，将Opacity属性从0更改为1（或使用与您的案例相关的自定义数字，例如来自0.2至1）如下图所示：

清单2.使用Trigger

在WPF图像控件中鼠标悬停时显示图像

   <Image >
        <Image.Style>
            <Style TargetType="{x:Type Image}">
            <Setter Property="Source" Value="img/Cube.jpg"/>
            <Setter Property="Opacity" Value="0" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" Value="1" />
                </Trigger>
            </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>

重要提示：请勿像原始代码一样设置静态图像源：

<Image x:Name="image" Source="img/info.png" .....

相反，请使用示例中显示的Setter。此外，您不需要不透明蒙版来实现这种简单的效果。

希望这可能会有所帮助。

Answer 2

为什么不在图标上使用Tootip

<Image x:Name="image" HorizontalAlignment="Left" Height="27" Margin="157,257,0,0" VerticalAlignment="Top" Width="26" Source="img/info.png" Cursor="Hand">
            <Image.OpacityMask>
                <ImageBrush ImageSource="img/info.png"/>
            </Image.OpacityMask>
            <Image.ToolTip>
                <ToolTip Placement="Bottom">
                    <ToolTip.Template>
                        <ControlTemplate>
                            <StackPanel>
                                <Path Margin="34,0,0,0" Fill="#e5AAAAAA" Data="M 0 16 L 16 0 L 32 16 Z"/>
                                <Image Height="100" Width="80" Source="img/bigImage.png"/>
                            </StackPanel>
                        </ControlTemplate>
                    </ToolTip.Template>
                </ToolTip>
            </Image.ToolTip>
        </Image>

Answer 3

您可以使用活动UIElement.MouseEnter和UIElement.MouseLeave将UIElement.Visibility从Visibility.Collapsed更改为Visibility.Visible的{{1}}。

或者您使用触发器

ImageControl

来源：http://www.wpf-tutorial.com/styles/trigger-datatrigger-event-trigger/

Answer 4

您可以将xaml打包为自定义工具提示 - 请参阅this

如何在鼠标悬停在C＃WPF中时弹出图像

4 个答案: