Customize popup control in WPF with balloon style

Question

1.60/5 (2 votes)

See more:

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

Posted 14-Apr-17 0:32am

Robin Purbia

Updated 16-Apr-17 9:12am

Add a Solution

Comments

Ralf Meier 14-Apr-17 11:57am

Have you tried to use the Codeproject-Search for "Custom Tooltip" ?
I'm very sure that you will find something usefull ...

Angelo L 16-Apr-17 3:15am

You could try using the ToolTip anyway. You say it's a click event? Then use the click event to set the ToolTip's IsOpen property to True.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Angelo L · Answer 1 · 2017-04-16T09:12:00

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>