Skip to content

Latest commit

 

History

History
238 lines (203 loc) · 11 KB

kb-chat-howto-display-hyperlink-html.md

File metadata and controls

238 lines (203 loc) · 11 KB
title description type page_title slug position tags ticketid res_type
How to add a hyperlink in a text message
This article demonstrates how to show HTML formatted text and hyperlinks in RadChat.
how-to
Sending a clickable hyperlink in RadChat
kb-chat-howto-display-hyperlink-html
0
chat, link, hyperlink, html, conversational, ui
1465210
kb

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.

[C#] Example 1: Defining a custom message

{{region cs-kb-chat-howto-display-hyperlink-html-0}}

public class HtmlMessage : TextMessage
{
    public HtmlMessage(Author author, string text, DateTime creationDate = default(DateTime)) : base(author, text, creationDate)
    {
    }
}

{{endregion}}

[VB.NET] Example 1: Defining a custom message

{{region vb-kb-chat-howto-display-hyperlink-html-1}}

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

{{endregion}}

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

[C#] Example 2: Defining a custom MessageTemplateSelector

{{region cs-kb-chat-howto-display-hyperlink-html-2}}

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);
    }
}

{{endregion}}

[VB.NET] Example 2: Defining a custom MessageTemplateSelector

{{region vb-kb-chat-howto-display-hyperlink-html-3}}

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

{{endregion}}

[Extract the xaml]({%slug styling-apperance-editing-control-templates%}) 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.

[XAML] Example 3: CustomMessageTemplateSelector in xaml

{{region vb-kb-chat-howto-display-hyperlink-html-4}}

<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>

{{endregion}}

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.

[C#] Example 4: Adding a message

{{region cs-kb-chat-howto-display-hyperlink-html-5}}

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));
}

{{endregion}}

[VB.NET] Example 4: Adding a message

{{region vb-kb-chat-howto-display-hyperlink-html-6}}

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

{{endregion}}

See Also

  • [RadChat Getting Started]({%slug chat-getting-started%})
  • [Data Providers]({%slug radrichtextbox-features-data-providers%})