New to Telerik UI for WPF? Download free 30-day trial

How to add a hyperlink in a text message

Environment

Product RadChat for WPF

Description

How to send a hyperlink in RadChat (Conversational UI).

Solution

In order to display html/hyperlink, you can create a custom message and use a RadRichTextBox in order to show its contents. The first step is to inherit the TextMessage class as shown in Example 1.

Example 1: Defining a custom message

public class HtmlMessage : TextMessage 
{ 
    public HtmlMessage(Author author, string text, DateTime creationDate = default(DateTime)) : base(author, text, creationDate) 
    { 
    } 
} 
Public Class HtmlMessage 
    Inherits TextMessage 
 
    Public Sub New(ByVal author As Author, ByVal text As String, Optional ByVal creationDate As Date = Date.MinValue) 
        MyBase.New(author, text, creationDate) 
    End Sub 
End Class 

After that we can inherit the MessageTemplateSelector in order to choose a DataTemplate for the messages.

Example 2: Defining a custom MessageTemplateSelector

public class CustomMessageTemplateSelector : MessageTemplateSelector 
{ 
    public DataTemplate HtmlMessageTemplate { get; set; } 
 
    public override DataTemplate SelectTemplate(object item, DependencyObject container) 
    { 
        var htmlTextMessage = item as HtmlMessage; 
 
        if (htmlTextMessage != null) 
        { 
            return this.HtmlMessageTemplate; 
        } 
        return base.SelectTemplate(item, container); 
    } 
} 
Public Class CustomMessageTemplateSelector 
    Inherits MessageTemplateSelector 
 
    Public Property HtmlMessageTemplate() As DataTemplate 
 
    Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate 
        Dim htmlTextMessage = TryCast(item, HtmlMessage) 
 
        If htmlTextMessage IsNot Nothing Then 
            Return Me.HtmlMessageTemplate 
        End If 
        Return MyBase.SelectTemplate(item, container) 
    End Function 
End Class 

Extract the xaml of the default MessageTemplateSelector for the theme that you are using and define the look of the custom HtmlMessage. Then we can use the custom selector in the ItemTemplate of the MessageGroup element as shown in Example 3.

Example 3: CustomMessageTemplateSelector in xaml

<Grid> 
    <Grid.Resources> 
        <!-- Those are the templates for the different types of messages--> 
        <local:CustomMessageTemplateSelector x:Key="CustomMessageTemplateSelector" x:Shared="false"> 
            <local:CustomMessageTemplateSelector.CalendarMessageTemplate> 
                <DataTemplate> 
                    <telerik:RadCalendar SelectedDate="{Binding SelectedDate, Mode=TwoWay}" DisplayDate="{Binding DisplayDate}"/> 
                </DataTemplate> 
            </local:CustomMessageTemplateSelector.CalendarMessageTemplate> 
            <local:CustomMessageTemplateSelector.ListMessageTemplate> 
                <DataTemplate> 
                    <telerik:RadListBox 
                        ItemsSource="{Binding Source}" 
                        SelectionMode="{Binding SelectionMode}" 
                        SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" 
                        SelectedItem="{Binding SelectedItem, Mode=TwoWay}" 
                        DisplayMemberPath="{Binding DisplayMemberPath}" 
                        ItemTemplate="{Binding ItemTemplate}" 
                        IsSynchronizedWithCurrentItem="False" 
                        MinWidth="220"> 
                        <telerik:EventToCommandBehavior.EventBindings> 
                            <telerik:EventBinding Command="{Binding SelectionChangedCommand}" EventName="SelectionChanged" PassEventArgsToCommand="True"/> 
                        </telerik:EventToCommandBehavior.EventBindings> 
                    </telerik:RadListBox> 
                </DataTemplate> 
            </local:CustomMessageTemplateSelector.ListMessageTemplate> 
            <!-- This is the look of the HtmlMessage message type--> 
            <local:CustomMessageTemplateSelector.HtmlMessageTemplate> 
                <DataTemplate> 
                    <StackPanel> 
                        <telerik:HtmlDataProvider RichTextBox="{Binding ElementName=richTextBox}"  
                                                Html="{Binding Path=Text, Mode=TwoWay}" /> 
                        <telerik:RadRichTextBox x:Name="richTextBox" IsReadOnly="True" IsSpellCheckingEnabled="False" HyperlinkNavigationMode="Click" /> 
                    </StackPanel> 
                </DataTemplate> 
            </local:CustomMessageTemplateSelector.HtmlMessageTemplate> 
            <local:CustomMessageTemplateSelector.TextMessageTemplate> 
                <DataTemplate> 
                    <chat:TextMessageControl/> 
                </DataTemplate> 
                </local:CustomMessageTemplateSelector.TextMessageTemplate> 
                <local:CustomMessageTemplateSelector.CardTemplate> 
                    <DataTemplate> 
                        <chat:Card/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.CardTemplate> 
                <local:CustomMessageTemplateSelector.ImageCardTemplate> 
                    <DataTemplate> 
                        <chat:ImageCard/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.ImageCardTemplate> 
                <local:CustomMessageTemplateSelector.ProductCardTemplate> 
                    <DataTemplate> 
                        <chat:ProductCard/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.ProductCardTemplate> 
                <local:CustomMessageTemplateSelector.WeatherCardTemplate> 
                    <DataTemplate> 
                        <chat:WeatherCard/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.WeatherCardTemplate> 
                <local:CustomMessageTemplateSelector.FlightCardTemplate> 
                    <DataTemplate> 
                        <chat:FlightCard/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.FlightCardTemplate> 
                <local:CustomMessageTemplateSelector.CarouselTemplate> 
                    <DataTemplate> 
                        <chat:CarouselCard/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.CarouselTemplate> 
                <local:CustomMessageTemplateSelector.DataFormTemplate> 
                    <DataTemplate> 
                        <ItemsControl ItemsSource="{Binding Fields}" ItemTemplateSelector="{StaticResource DataFormTemplateSelector}" Margin="5" MinWidth="220"/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.DataFormTemplate> 
                <local:CustomMessageTemplateSelector.ImageTemplate> 
                    <DataTemplate> 
                        <Image Source="{Binding Source}" Width="{Binding Size.Width}" Height="{Binding Size.Height}" Stretch="{Binding Stretch}"/> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.ImageTemplate> 
                <local:CustomMessageTemplateSelector.GifTemplate> 
                    <DataTemplate> 
                        <MediaElement Width="{Binding Size.Width}" Height="{Binding Size.Height}" Stretch="{Binding Stretch}" Source="{Binding Source}" LoadedBehavior="Play" UnloadedBehavior="Play"> 
                            <telerik:EventToCommandBehavior.EventBindings> 
                                <telerik:EventBinding Command="{Binding MediaEndedCommand}" EventName="MediaEnded" PassEventArgsToCommand="True"/> 
                            </telerik:EventToCommandBehavior.EventBindings> 
                        </MediaElement> 
                    </DataTemplate> 
                </local:CustomMessageTemplateSelector.GifTemplate> 
        </local:CustomMessageTemplateSelector> 
 
        <!-- If you are using the NoXaml dlls, you should base the style on the default one:--> 
        <!-- <Style TargetType="{x:Type chat:MessageGroup}" BasedOn="{StaticResource MessageGroupStyle}">--> 
        <Style TargetType="{x:Type chat:MessageGroup}"> 
            <Setter Property="ItemTemplate"> 
                <Setter.Value> 
                    <DataTemplate> 
                        <!-- This is where we use the custom template selector defined above --> 
                        <chat:InlineMessageControl ContentTemplateSelector="{StaticResource CustomMessageTemplateSelector}" Content="{Binding Message}"/> 
                    </DataTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
    </Grid.Resources> 
 
    <telerik:RadChat x:Name="chat"   /> 
</Grid> 

The code shown in Example 3 is for the purposes of the demo and you should make sure to extract the xaml of the default MessageTemplateSelector for the theme that you are using.

Example 4 demonstrates how to add a message containing a hyperlink to the RadChat.

Example 4: Adding a message

public MainWindow() 
{ 
    InitializeComponent(); 
 
    this.chat.CurrentAuthor = new Author("TestAuthor"); 
    this.chat.AddMessage(new HtmlMessage(this.chat.CurrentAuthor, "<html>Visit our <a href=\"https://www.progress.com/\" >homepage</a>.</html>", DateTime.Now)); 
} 
Public Sub New() 
    InitializeComponent() 
 
    Me.chat.CurrentAuthor = New Author("TestAuthor") 
    Me.chat.AddMessage(New HtmlMessage(Me.chat.CurrentAuthor, "<html>Visit our <a href=""https://www.progress.com/"" >homepage</a>.</html>", Date.Now)) 
End Sub 

See Also

In this article