Using WPF Popup Controls with Hyperlink and TextBlock

By | July 31, 2011

In this post I am going to describe how you can use WPF popup control with Hyperlink. Instead of showing the content with in Popup Control, we can use common Tool Tips as we can easily bind any WPF element within Tool Tips. But there are few advantages of Popup controls over default Tool tips where we can think to use Popup instead of Tool tips.

First of all, You must have to set IsOpen=True to Popup control to appear. Unlike ToolTips, Popup control never visible by default. Secondly, Tool Tips disappears automatically after a certain time, but for Popup Control you have to explicitly set StayOpen property to true or false.

Read more about WPF Popup Control .

Below image shown as example, where on mouse of underline text a popup appears with some details information.

image

To achieve this, first create a WPF Sample Application with TextBlock with main content  and a Popup Control with the content which will display the more information for the underlined text.

Below is the used code snippet for the XAML.

<Window x:Class="PopupWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Popup With Hyperlink" Height="189" Width="525">
    <Grid>
        <TextBlock TextWrapping="Wrap">A single tip can improve productivity of work while coding.
            <Run Cursor="Hand" TextDecorations="underline" MouseEnter="Run_MouseEnter_1"> Daily .NET Tips</Run>
            is aiming to sharing useful coding tips and tricks for .NET Developers. This site completely design for sharing Tips and Tricks, 
            useful Code Snippet which anyone use in daily development work and targeted anything related with .NET.
      </TextBlock>
        <Popup Name="DDNTPopup"
               StaysOpen="False"
               Placement="Mouse"
               MaxWidth="00" 
               PopupAnimation="Slide" >
            <Border BorderBrush="Beige" 
                    BorderThickness="5" 
                    Background="LightGoldenrodYellow">
                <TextBlock Margin="10" 
                           TextWrapping="Wrap" >
                   Visit <Hyperlink NavigateUri="http://dailydotnettips.com" Click="Hyperlink_Click">http://dailydotnettips.com</Hyperlink>
                    for more information. Daily .NET Tips has now more than 170 very useful tips and Tricks. To keep update on daily tips,  
                    <Hyperlink NavigateUri="http://feeds.feedburner.com/dailydotnettips/MvvJ" Click="Hyperlink_Click_1">subscribe</Hyperlink> our feed or follow us on
                    Twitter at  <Hyperlink NavigateUri="http://twitter.com/#!/dailydotnettips" Click="Hyperlink_Click_2">@dailydotnettips</Hyperlink>
                </TextBlock>
            </Border>
            
        </Popup>
    </Grid>
</Window>

I have used Run element to apply the formatting on text and providing a Event Handler.

image

On Mouse enter, we need to make the Popup Visible, so below is the code snippet for the display the popup.

image 

We are not explicitly handling the close event of Popup control here, because in XAML we have already mentioned StaysOpen=”False”, which means, Popup will automatically disappear if user click some where else.

 

image 

The only think left here is handling the Click="Hyperlink_Click" event. Below is the code snippets for the same.

image

That’s all !

Hope this will help

Cheers !

AJ