使用气球样式自定义WPF中的弹出控件 [英] Customize popup control in WPF with balloon style

问题描述

我正在尝试实现如下弹出控件：



[ ^ $



当紫色问号图标上出现MouseEnter事件时，必须显示此内容。



但我无法实现这样的Popup风格，因为我是WPF新手。



我现在想做的事情：



要在相对位置显示Popup为紫色？标记图标是？的右中心icon.

实现具有会话气球等背景的Popup风格。我不能硬编码Popup的大小，因为里面的文本内容的长度可能会有所不同。

如果有人可以帮助我实现这种风格的弹出控制将是一个很大的帮助。在此先感谢。



我尝试了什么：



我不能使用ToolTip作为应用程序将在触摸屏系统上运行，因此用户无法通过鼠标操作来查看工具提示。如果用户触摸紫色问号图标

I am trying to implement Popup Control like below:

[^]

This has to be shown when MouseEnter event occurs on "Purple Question Mark" icon.

But I am unable to implement such Popup style as I am new to WPF.

Things I want to do as of now:

To show Popup on a relative location to purple "?" mark icon which is Right-Center of "?" icon.
To implement Popup style having such background like conversation balloon. I cannot hard code size of Popup as the length of text content inside may vary.
If anyone can help me achieving Popup Control with such style would be a great help. Thanks in advance.

What I have tried:

I cannot use ToolTip as the application will run on a touch screen system, so User cannot do mouse over to see tooltip. It will always give click event if User touch the Purple Question mark icon

推荐答案

，它总会给出点击事件。所以，我昨天稍微修改了一下。你可能想要的更像是一个EventTrigger。我在MouseUp上做了这个，但我想你的用法就是TouchUp。我还使用该事件来重置放置目标，因为它似乎打破了这样做。至于你希望它看起来如何，你可能想看看工具提示样式和模板 [ ^ ]。

So, I tinkered with this a bit yesterday. What you probably want is something more like an EventTrigger. I did this on MouseUp, but I guess for your usage it would be TouchUp. I also used the event to reset the placement target since it seemed to break doing this. As far as how you want it to look, you might want to check out ToolTip Styles and Templates[^].

<Image Name="testimage" Source="silhouette.jpg" Height="57" Width="100"  MouseUp="MouseUp_setTarget">
    <Image.ToolTip>
        <ToolTip PlacementTarget="{Binding ElementName=testimage}" Placement="Right"> 

private void MouseUp_setTarget(object sender, MouseButtonEventArgs e)
{
    ((ToolTip)(((FrameworkElement)sender).ToolTip)).PlacementTarget = ((FrameworkElement)sender);
}

<Image.Triggers>
    <EventTrigger RoutedEvent="MouseUp">
        <BeginStoryboard>
            <Storyboard>
                <BooleanAnimationUsingKeyFrames Storyboard.TargetName="{x:Null}"  Storyboard.TargetProperty="ToolTip.IsOpen">
                    <DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True" />
                    <DiscreteBooleanKeyFrame KeyTime="0:0:5" Value="False" />
                </BooleanAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Image.Triggers>

这篇关于使用气球样式自定义WPF中的弹出控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！