How to add hyperlink to image programmatically in wpf?


  • How to add hyperlink to image programmatically in wpf?

    I have an xaml code like this
     <Hyperlink Click="Hyperlink_Click" Name="testlink">
      <Image Width="16" Height="16" Name="mood1" Source="test.gif" ></Image>


    I need to do the same thing programmatically.

    Can anybody provide me direction on how to do this? Thanks in advance

    I am able to create hyperlink for normal text like this. But I am looking for a way to create link against image

    TextBlock txtBlock = new TextBlock();
    Run run = new Run(strLink);
    Hyperlink hyperl = new Hyperlink(run);
    hyperl.NavigateUri = new Uri("url");
    hyperl.Click += new RoutedEventHandler(hLink_Click);

    Tuesday, February 02, 2010 8:06 AM

All replies

  • I think you can use Button with an image instead of hyperlink with image

    On Click event of button you can call your code to spawn a process to open URL.
    Tuesday, February 02, 2010 9:25 AM
  • Right now I am using like this only.

    But I need button to be of image size exactly. If I assign the button width and height same as image, image size is getting reduced.

    If I dont assign the width and height for button, image size is proper.

    How to achive this?

    Tuesday, February 02, 2010 11:33 AM
  • Actually I am able to figure out how to add hyperlink to the image. BUt still I have problem.
    Only if I give absolute path of image, image is showing up. Other wise image is not getting displayed

    testImg.Source = new BitmapImage(new Uri("/appname;component/test.gif",UriKind.Relative));  // Image is not shown
    //testImg.Source = new BitmapImage(new Uri("C:/images/test.gif")); // image is shown. But I shouldnt use this, as if I install the program on some other machine, it willnot work on them

    testImg.Width = 18;
    testImg.Height = 16;

    Hyperlink linkImg = new Hyperlink(new InlineUIContainer(testImg));
    linkImg.Click += new RoutedEventHandler(linkImg_Click);
    //linkImg.TextDecorations = null;

    TextBlock tbLink = new TextBlock();
    //tbLink.Text = "tet....";

    can anyone provide me some help regarding this.
    Thanks in advance

    Tuesday, February 02, 2010 11:47 AM
  • hi,

    <Image Height="54"  Name="image1" Source="test.gif"  Cursor="Hand" MouseLeftButtonDown="image1_MouseLeftButtonDown" />

    private void image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
      // do ur code here.......


    TextBlock tb=new TextBlock ();
    tb.MouseLeftButtonDown += new MouseButtonEventHandler(tb_MouseLeftButtonDown);
    tb.Cursor = Cursors.Hand;
    void tb_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
       // do ur code here.......

    Nagarjuna Dilip
    • Edited by NagarjunaDilip Tuesday, February 02, 2010 12:01 PM
    • Proposed as answer by Anand Austin Tuesday, February 28, 2012 6:02 AM
    Tuesday, February 02, 2010 11:55 AM
  • what is that you have mentioned? I didnt understand
    Tuesday, February 02, 2010 11:59 AM
  • hi,

    try this way will work..........u can change cursor and make an event of mouse left click and do the code wht u want..........
    Nagarjuna Dilip
    Tuesday, February 02, 2010 12:04 PM
  • For your image path problem, it depends on the properties of the image in your project.

    If you want to embed the image in the program:

    Image properties in the project:
    Build Action = Resource
    Copy To Outout Directory = Do not copy 

    testImg.Source =


    new BitmapImage(new Uri("pack://application:,,,/appname;component/test.gif", UriKind.RelativeOrAbsolute));

    If you want to reference a loose image in the output directory of your program:

    Image properties in the project:
    Build Action = Content
    Copy To Outout Directory = Copy if newer

    testImg.Source =


    new BitmapImage(new Uri("test.gif", UriKind.Relative));

    Tuesday, February 02, 2010 8:25 PM
  • I have a formregion and hosting a wpf usercontrol inside it.

    I am giving my usercontrol.xaml code here



    UserControl x:Class="TestOutlook.UserControl1"






    Height="300" Width="300" Loaded="UserControl_Loaded">



    <Grid Name="g1">















    <TextBlock Name="T1" Grid.Row="0"><Hyperlink><Image Width="16" Height="18" Source="/TestOutlook;component/test.gif"></Image></Hyperlink></TextBlock>










    private void UserControl_Loaded(object sender, RoutedEventArgs e)



    Image expandCollapseImg = new Image();

    expandCollapseImg.Name =


    expandCollapseImg.Source =

    new BitmapImage(new Uri("/TestOutlook;component/test.gif", UriKind.RelativeOrAbsolute));

    expandCollapseImg.Width = 18;

    expandCollapseImg.Height = 16;



    Hyperlink linkExpandCollapseImg = new Hyperlink(new InlineUIContainer(expandCollapseImg));

    linkExpandCollapseImg.Click +=

    new RoutedEventHandler(linkExpandCollapseImg_Click);


    //linkExpandCollapseImg.TextDecorations = null;


    TextBlock tbLinkExpandCollapseImg = new TextBlock();


    new Run("expand "));



    Grid.SetRow(tbLinkExpandCollapseImg, 1);







    void ThisAddIn_Startup(object sender, System.EventArgs e)



    MailItem mi = (Outlook.MailItem)Globals.ThisAddIn.Application.CreateItem(Microsoft.Office.Interop.Outlook.OlItemType.olMailItem);

    mi.MessageClass =






    When I run this project, I am getting only first image, but not the second one added in usercontrol load method. I am using the same image in first and second row of the grid. Build action is set to resource, and copy if newer.

    I am uanble to understand What is the problem.
    Please help me to resolve this issue.

    Also If I want to toggle the image source, is it fine to always assign source as new Bitmapimage(new uri()) ?
    Thanks in advance

    Wednesday, February 03, 2010 8:14 PM
  • If you are specifying it as a resource, in code you need to follow this syntax:

    new BitmapImage(new Uri("pack://application:,,,/appname;component/test.gif", UriKind.RelativeOrAbsolute));

    Where, in your case, appname = TestOutlook
    Wednesday, February 03, 2010 9:50 PM
  • If I give the url like http://somapp//images/test.gif  it is showing the image. But now the problem is If I want to change the content  of a button (dynamically created) it is not changing for two to three clicks. content of the button is image.
    On clcik of some other button, I need to change the image of this dynamically created button or hyperlink with image.

    Is there a way to force wpf controls to refresh? I tried even calling refresh method on button, image.
    Nothing worked.

    If the screen is a small one for testing purpose, it is working. But in real case, where I have lots of controls in screen, image is not chaging.

    Changing the text of any textblock, hiding of grid these are working. But hiding of dynamic  buttn, changing image of dynamic button is not working.

    What could be the problem?
    Thanks in advance
    Friday, February 05, 2010 6:20 AM