How to create a hyperlink that contains both image and text elements

• Feb 08, 2021
• 5 minutes to read

This example demonstrates how to create a custom user control with an ASPxHyperLink that contains both image and text elements. The sample web page contains two customized ImageLink controls. The “NavigateUrl” property of the second control contains a unique parameter that keeps the hyperlink unvisited. This is done to show visited and unvisited links in different styles. The styles in the user control allow the image and text to look like a single hyperlink. The dxeHyperlink class changes the standard DevExpress theme and the dxeHyperlink_BlackGlass class specifies the BlackGlass theme. For other themes, specify dxeHyperlink_[Theme_Name] classes in the same way. To overcome differences in how Firefox and other browsers render data, a special “hyperlink_ff” style was created. When the Firefox browser is used, the style is applied in the Init event handler of every custom ImageLink user control. You can use the same approach to overcome difficulties with other browsers.

Default.aspx.cs

using DevExpress.Web;
using DevExpress.Web.ASPxEditors;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e) {
        //This line is used for the demo purpose
        uc1.NavigateUrl = uc1.NavigateUrl +"?id="+ DateTime.Now.Millisecond.ToString();
    }
}

ImageLink.ascx (C#)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageLink.ascx.cs" Inherits="ImageLink" %>
<%@ Register assembly="DevExpress.Web.v13.1, Version=13.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<style>
.hyperlink_ff img {
    padding-bottom:2px;
}

.hyperlink img {
    padding-bottom:3px;
}

.hyperlink_ie img, 
.hyperlink_ff img,
.hyperlink img {
    vertical-align: bottom;
}

a.dxeHyperlink,
a.dxeHyperlink:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink:visited,
a.dxeHyperlink:visited:hover,
a.dxeHyperlink:visited img,
a.dxeHyperlink:visited:hover img {
    border-bottom-color: #ab59a6;
}

a.dxeHyperlink:hover,
a.dxeHyperlink:hover img {
    border-bottom-color: #5494ea;
}

a.dxeHyperlink_BlackGlass,
a.dxeHyperlink_BlackGlass:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink_BlackGlass:visited,
a.dxeHyperlink_BlackGlass:visited:hover,
a.dxeHyperlink_BlackGlass:visited img,
a.dxeHyperlink_BlackGlass:visited:hover img {
    border-bottom-color: #800080;
}

a.dxeHyperlink_BlackGlass:hover,
a.dxeHyperlink_BlackGlass:hover img {
    border-bottom-color: #ff9600;
}
</style>
<dx:ASPxHyperLink ID="ASPxHyperLink" EncodeHtml="false" runat="server" OnInit="ASPxHyperLink_Init">
</dx:ASPxHyperLink>

ImageLink.ascx.cs

using DevExpress.Web;
using DevExpress.Web.ASPxEditors;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ImageLink : System.Web.UI.UserControl
{
    private string image;
    private string text;

    public string NavigateUrl { 
        get { return ASPxHyperLink.NavigateUrl; } 
        set { ASPxHyperLink.NavigateUrl = value; } 
    }

    public string ImageSrc {
        get { return this.image; }
        set
        {
            this.image = value;
            ASPxHyperLink.Text = String.Format("<img src='{0}'/>{1}", this.image, this.text);
        }
    }
    public string LinkText { 
        get { return this.text; } 
        set {
            this.text = value;
            ASPxHyperLink.Text = String.Format("<img src='{0}'/>{1}", this.image, this.text); 
        } 
    }

    protected void ASPxHyperLink_Init(object sender, EventArgs e) {
        if (RenderUtils.Browser.IsFirefox)
            ((ASPxHyperLink)sender).CssClass = "hyperlink_ff";
        else
            ((ASPxHyperLink)sender).CssClass = "hyperlink";
    }
}

Default.aspx (C#)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="ImageLink.ascx" tagname="ImageLink" tagprefix="uc" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASPxHyperLink with text and image</title>
</head>
<body>
    <form id="form1" runat="server">
        <uc:ImageLink ID="uc1" NavigateUrl="~/Default.aspx" ImageSrc="./Images/memo.png" LinkText="Refresh" runat="server" />
        <uc:ImageLink ID="uc2" NavigateUrl="https://maps.google.com/" runat="server" ImageSrc="./Images/localization.png" LinkText="Maps" />
    </form>
</body>
</html>

Default.aspx (VB.NET)

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register src="ImageLink.ascx" tagname="ImageLink" tagprefix="uc" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASPxHyperLink with text and image</title>
</head>
<body>
    <form id="form1" runat="server">
        <uc:ImageLink ID="uc1" NavigateUrl="~/Default.aspx" ImageSrc="./Images/memo.png" LinkText="Refresh" runat="server" />
        <uc:ImageLink ID="uc2" NavigateUrl="https://maps.google.com/" runat="server" ImageSrc="./Images/localization.png" LinkText="Maps" />
    </form>
</body>
</html>

ImageLink.ascx.vb

Imports Microsoft.VisualBasic
Imports DevExpress.Web
Imports DevExpress.Web.ASPxEditors
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class ImageLink
    Inherits System.Web.UI.UserControl
    Private image As String
    Private text As String

    Public Property NavigateUrl() As String
        Get
            Return ASPxHyperLink.NavigateUrl
        End Get
        Set(ByVal value As String)
            ASPxHyperLink.NavigateUrl = value
        End Set
    End Property

    Public Property ImageSrc() As String
        Get
            Return Me.image
        End Get
        Set(ByVal value As String)
            Me.image = value
            ASPxHyperLink.Text = String.Format("<img src='{0}'/>{1}", Me.image, Me.text)
        End Set
    End Property
    Public Property LinkText() As String
        Get
            Return Me.text
        End Get
        Set(ByVal value As String)
            Me.text = value
            ASPxHyperLink.Text = String.Format("<img src='{0}'/>{1}", Me.image, Me.text)
        End Set
    End Property

    Protected Sub ASPxHyperLink_Init(ByVal sender As Object, ByVal e As EventArgs)
        If RenderUtils.Browser.IsFirefox Then
            CType(sender, ASPxHyperLink).CssClass = "hyperlink_ff"
        Else
            CType(sender, ASPxHyperLink).CssClass = "hyperlink"
        End If
    End Sub
End Class

ImageLink.ascx (VB.NET)

<%@ Control Language="vb" AutoEventWireup="true" CodeFile="ImageLink.ascx.vb" Inherits="ImageLink" %>
<%@ Register assembly="DevExpress.Web.v13.1, Version=13.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<style>
.hyperlink_ff img {
    padding-bottom:2px;
}

.hyperlink img {
    padding-bottom:3px;
}

.hyperlink_ie img, 
.hyperlink_ff img,
.hyperlink img {
    vertical-align: bottom;
}

a.dxeHyperlink,
a.dxeHyperlink:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink:visited,
a.dxeHyperlink:visited:hover,
a.dxeHyperlink:visited img,
a.dxeHyperlink:visited:hover img {
    border-bottom-color: #ab59a6;
}

a.dxeHyperlink:hover,
a.dxeHyperlink:hover img {
    border-bottom-color: #5494ea;
}

a.dxeHyperlink_BlackGlass,
a.dxeHyperlink_BlackGlass:hover {
     text-decoration:none;
     border-bottom: 1px solid #0d45b7;
}

a.dxeHyperlink_BlackGlass:visited,
a.dxeHyperlink_BlackGlass:visited:hover,
a.dxeHyperlink_BlackGlass:visited img,
a.dxeHyperlink_BlackGlass:visited:hover img {
    border-bottom-color: #800080;
}

a.dxeHyperlink_BlackGlass:hover,
a.dxeHyperlink_BlackGlass:hover img {
    border-bottom-color: #ff9600;
}
</style>
<dx:ASPxHyperLink ID="ASPxHyperLink" EncodeHtml="false" runat="server" OnInit="ASPxHyperLink_Init">
</dx:ASPxHyperLink>

Default.aspx.vb

Imports Microsoft.VisualBasic
Imports DevExpress.Web
Imports DevExpress.Web.ASPxEditors
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        'This line is used for the demo purpose
        uc1.NavigateUrl = uc1.NavigateUrl & "?id=" & DateTime.Now.Millisecond.ToString()
    End Sub
End Class