Telerik Forums
UI for WPF Forum
2 answers
50 views

Hello, 

I would like to remove all messages of radchat after inactivity.

I don't find how to remove all messages. Could you help me ?

Thanks

Thomas

Thomas
Top achievements
Rank 1
Iron
 answered on 22 Aug 2023
1 answer
97 views

Hi,

Im using conversationalUI in a WPF app and would like to update the message in realtime as my openAI response is streaming in to make the UX a better experience on long responses. This should update the message being displayed in realtime as the service is streaming in text.

I only see the ability to do a message.Add() option, I feel like there should also be a AddAsync() method. Is this even possible in this control? 

Thanks in advance!

Martin Ivanov
Telerik team
 answered on 10 May 2023
1 answer
298 views
I am working on Conversational UI and made a chat application , where we can chat with multiple users by maintaining a dictionary .&nbsp; Key is the user and value is the ChatViewModel having a ObservableCollection&lt;MessageBase&gt; and Author. Its is working properly but I want to store the messages in the database and When we select another to chat with , the previous messages stored in database will be display in the chatwindow and we can continue chatting. &nbsp; <br />
Martin Ivanov
Telerik team
 answered on 23 Dec 2021
1 answer
72 views
How to set custom color on currentauthor bubble (inlinemessage) in Chat Conversation UI on WPF? 
Stenly
Telerik team
 answered on 16 Nov 2021
3 answers
202 views

I am creating a little chat demo, by having two chat boxes next to each other (they communicate to each other). My issue is, when I load older messages from the database, I could not properly set a different "current author" for each chat box while maintaining MVVM structure (what I need is: in chatbox 1 user1 is the currentAuthor, in chatbox 2 user 2 is the currnetAuthor)

I am following an MVVM pattern. Code snippets are provided below (I tried to remove all lines irrelevant to the question):

1- my chat boxes

<telerik:RadChat x:Name="chat1" 
			 Width="400"
			 Height="550"
                         DataSource="{Binding Chat1Messages}"
                         CurrentAuthor="{Binding Chat1CurrentAuthor}">
</telerik:RadChat>

 <telerik:RadChat x:Name="chat2" 
			 Width="400"
			 Height="550"
                         DataSource="{Binding Chat2Messages}"
                         CurrentAuthor="{Binding Chat2CurrentAuthor}">

</telerik:RadChat>

2- My code in adding the messages from DB:

//some code to get data from DB//


this.chat1CurrentAuthor = this.FirstAuthor;
this.chat2CurrentAuthor = this.SecondAuthor;

//Iterator over data from DB
{
     //if message is written by first author:
     {
          this.Chat1Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.FirstAuthor, CreationDate = row.Time });
          this.Chat2Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.FirstAuthor, CreationDate = row.Time });
     }
     //if message is written by second author:
     {
          this.Chat1Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.SecondAuthor, CreationDate = row.Time });
          this.Chat2Messages.Add(new TextMessageObject() { Text = row.MessageText, MsgAuthor = this.SecondAuthor, CreationDate = row.Time });
     }
}


3- code to support MVVM:

public Author Chat1CurrentAuthor
{
            get { return this.chat1CurrentAuthor; }
            set
            {
                if (value != this.chat1CurrentAuthor)
                {
                    this.chat1CurrentAuthor = value;
                    OnPropertyChanged(() => this.chat1CurrentAuthor);
                }
            }
}
public Author Chat2CurrentAuthor
{
            get { return this.chat2CurrentAuthor; }
            set
            {
                if (value != this.chat2CurrentAuthor)
                {
                    this.chat2CurrentAuthor = value;
                    OnPropertyChanged(() => this.chat2CurrentAuthor);
                }
            }
}

 

With my current code, both authors are set up as current authors in both chatboxes (i.e in chatbox1, currentAuthor is both user1 and user2, in chatbox2 currentAuthor is both user1 and user2) which is not the desired behavior.

 

 

 

Dinko | Tech Support Engineer
Telerik team
 answered on 12 Aug 2021
3 answers
67 views

     Hello!

https://www.telerik.com/forums/radchat-messages-not-updated-when-datasource-changed

https://www.telerik.com/forums/update-chat-messages-on-datasource-change

https://feedback.telerik.com/wpf/1357293-chat-setting-a-new-instance-for-the-datasource-does-not-clear-the-previous-messages

 

In last link:

"*** The fix for this issue will be available with the next LIB (version 2018.3.1210) expected on Monday, December 10."

 

Where i can find this build?

 

PS: we use 2018 and do NOT want to migrate to 2019.

Martin Ivanov
Telerik team
 answered on 01 Feb 2019
3 answers
250 views

Dear Team,

I am facing issue with Chat Control. When I tried to change datasource of control, Messages in Chat UI does not reflect.

I have List of User in listbox. Each User has Observable collection of TextMessages. When User selection changed, I bind datasource to selected user messages. I assume that Chat control will update its UI by selected User messaged. But it is not working.

I tried to clear MessageListItems on selection change, and re-bind datasource to selected user's messages. In this case Chat UI does not show any messages.

 

For reference I have uploaded my sample project on Google drive.

Messenger App

@Admin: I had already shared the same issue few days ago, but i did not receive any solution.

 

Stefan
Telerik team
 answered on 16 Nov 2018
2 answers
176 views

Dear All,

I am new to Chat control. I am practicing RadChat in Chat application, such that I have list of contacts on Left side, which bounded to List of users where

public class User: Entity
{
        public ObservableCollection<MessageBase> Messages { get => messages; set { messages = value; RaisePropertyChange(); } }
}

I have bounded RadChat DataSource as SelectedUser.Messages property, where SelectedUser is public property in my viewmodel, which contains selected item object.

As I assume that RadChat need to updated Messages as datasource is changed, but instead of refreshing messages, it appends new messages to old one.

My requirement is to Clear all messages in Chat UI, as I have selected new Messages object as datasource.

 

Here I want to clarify that data in Messages are correct according to my need. I feel it is some issue in RadChat or I need further steps to acheive my target.

<telerik:RadChat Grid.Row="2" Margin="5 0 0 0" Name="ctrlChat"                                     CurrentAuthor="{Binding CurrentAuther,UpdateSourceTrigger=PropertyChanged}"
DataSource="{Binding SelectedUser.Messages, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
   <telerik:EventToCommandBehavior.EventBindings>
    <telerik:EventBinding EventName="SendMessage"
                         Command="{Binding SendMessageCommand}" PassEventArgsToCommand="True" />
     </telerik:EventToCommandBehavior.EventBindings> 
    </telerik:RadChat>

 

 

Stefan
Telerik team
 answered on 14 Nov 2018
7 answers
186 views
How can I customize the Message List Part,  Its an ItemsPresenter , I want to change messages font and make the avatar little bigger. nothing is mentioned in the documentation for how to do this.
Omar
Top achievements
Rank 1
 answered on 11 Sep 2018
6 answers
122 views

Once I've started creating a new template using Expression Blend, The SuggestedActios Part disappears even using the default style created by Blend,

 

Kindly check the style 

 

<Style x:Key="RadChatStyle2" TargetType="{x:Type telerik:RadChat}">
    <Setter Property="FontFamily" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.FontFamily}}"/>
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MarkerBrush}}"/>
    <Setter Property="Background" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MainBrush}}"/>
    <Setter Property="BorderBrush" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.BasicBrush}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="MessageListTemplateSelector">
    <Setter.Value>
    <ConversationalUI:MessageTemplateSelector>
    <ConversationalUI:MessageTemplateSelector.CalendarMessageTemplate>
    <DataTemplate>
    <telerik:RadCalendar DisplayDate="{Binding DisplayDate}" SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CalendarMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.CarouselTemplate>
    <DataTemplate>
    <ConversationalUI:CarouselCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CarouselTemplate>
    <ConversationalUI:MessageTemplateSelector.CardTemplate>
    <DataTemplate>
    <ConversationalUI:Card/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CardTemplate>
    <ConversationalUI:MessageTemplateSelector.DataFormTemplate>
    <DataTemplate>
    <ItemsControl Margin="5" MinWidth="220"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.DataFormTemplate>
    <ConversationalUI:MessageTemplateSelector.FlightCardTemplate>
    <DataTemplate>
    <ConversationalUI:FlightCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.FlightCardTemplate>
    <ConversationalUI:MessageTemplateSelector.GifTemplate>
    <DataTemplate>
    <MediaElement Height="{Binding Size.Height}" LoadedBehavior="Play" Position="0" Source="{Binding Source}" Stretch="{Binding Stretch}" SpeedRatio="1" UnloadedBehavior="Play" Width="{Binding Size.Width}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.GifTemplate>
    <ConversationalUI:MessageTemplateSelector.ImageCardTemplate>
    <DataTemplate>
    <ConversationalUI:ImageCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ImageCardTemplate>
    <ConversationalUI:MessageTemplateSelector.ImageTemplate>
    <DataTemplate>
    <Image Height="{Binding Size.Height}" Source="{Binding Source}" Stretch="{Binding Stretch}" Width="{Binding Size.Width}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ImageTemplate>
    <ConversationalUI:MessageTemplateSelector.ListMessageTemplate>
    <DataTemplate>
    <telerik:RadListBox DisplayMemberPath="{Binding DisplayMemberPath}" IsSynchronizedWithCurrentItem="False" IsTabStop="False" ItemTemplate="{Binding ItemTemplate}" IsTextSearchEnabled="True" MinWidth="220" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" SelectedValueBinding="{x:Null}" SelectionMode="{Binding SelectionMode}" TextBinding="{x:Null}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ListMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.ProductCardTemplate>
    <DataTemplate>
    <ConversationalUI:ProductCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ProductCardTemplate>
    <ConversationalUI:MessageTemplateSelector.TextMessageTemplate>
    <DataTemplate>
    <ConversationalUI:TextMessageControl Stylus.IsFlicksEnabled="False" Stylus.IsPressAndHoldEnabled="False"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.TextMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.WeatherCardTemplate>
    <DataTemplate>
    <ConversationalUI:WeatherCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.WeatherCardTemplate>
    </ConversationalUI:MessageTemplateSelector>
    </Setter.Value>
    </Setter>
    <Setter Property="MessagePopupTemplateSelector">
    <Setter.Value>
    <ConversationalUI:MessageTemplateSelector>
    <ConversationalUI:MessageTemplateSelector.CalendarMessageTemplate>
    <DataTemplate>
    <telerik:RadCalendar DisplayDate="{Binding DisplayDate}" SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CalendarMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.CarouselTemplate>
    <DataTemplate>
    <ConversationalUI:CarouselCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CarouselTemplate>
    <ConversationalUI:MessageTemplateSelector.CardTemplate>
    <DataTemplate>
    <ConversationalUI:Card/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CardTemplate>
    <ConversationalUI:MessageTemplateSelector.DataFormTemplate>
    <DataTemplate>
    <ItemsControl Margin="5" MinWidth="220"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.DataFormTemplate>
    <ConversationalUI:MessageTemplateSelector.FlightCardTemplate>
    <DataTemplate>
    <ConversationalUI:FlightCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.FlightCardTemplate>
    <ConversationalUI:MessageTemplateSelector.GifTemplate>
    <DataTemplate>
    <MediaElement Height="{Binding Size.Height}" LoadedBehavior="Play" Position="0" Source="{Binding Source}" Stretch="{Binding Stretch}" SpeedRatio="1" UnloadedBehavior="Play" Width="{Binding Size.Width}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.GifTemplate>
    <ConversationalUI:MessageTemplateSelector.ImageCardTemplate>
    <DataTemplate>
    <ConversationalUI:ImageCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ImageCardTemplate>
    <ConversationalUI:MessageTemplateSelector.ImageTemplate>
    <DataTemplate>
    <Image Height="{Binding Size.Height}" Source="{Binding Source}" Stretch="{Binding Stretch}" Width="{Binding Size.Width}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ImageTemplate>
    <ConversationalUI:MessageTemplateSelector.ListMessageTemplate>
    <DataTemplate>
    <telerik:RadListBox DisplayMemberPath="{Binding DisplayMemberPath}" IsSynchronizedWithCurrentItem="False" IsTabStop="False" ItemTemplate="{Binding ItemTemplate}" IsTextSearchEnabled="True" MinWidth="220" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" SelectedValueBinding="{x:Null}" SelectionMode="{Binding SelectionMode}" TextBinding="{x:Null}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ListMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.ProductCardTemplate>
    <DataTemplate>
    <ConversationalUI:ProductCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ProductCardTemplate>
    <ConversationalUI:MessageTemplateSelector.TextMessageTemplate>
    <DataTemplate>
    <ConversationalUI:TextMessageControl Stylus.IsFlicksEnabled="False" Stylus.IsPressAndHoldEnabled="False"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.TextMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.WeatherCardTemplate>
    <DataTemplate>
    <ConversationalUI:WeatherCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.WeatherCardTemplate>
    </ConversationalUI:MessageTemplateSelector>
    </Setter.Value>
    </Setter>
    <Setter Property="MessageOverlayTemplateSelector">
    <Setter.Value>
    <ConversationalUI:MessageTemplateSelector>
    <ConversationalUI:MessageTemplateSelector.CalendarMessageTemplate>
    <DataTemplate>
    <telerik:RadCalendar DisplayDate="{Binding DisplayDate}" SelectedDate="{Binding SelectedDate, Mode=TwoWay}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CalendarMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.CarouselTemplate>
    <DataTemplate>
    <ConversationalUI:CarouselCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CarouselTemplate>
    <ConversationalUI:MessageTemplateSelector.CardTemplate>
    <DataTemplate>
    <ConversationalUI:Card/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.CardTemplate>
    <ConversationalUI:MessageTemplateSelector.DataFormTemplate>
    <DataTemplate>
    <ItemsControl Margin="5" MinWidth="220"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.DataFormTemplate>
    <ConversationalUI:MessageTemplateSelector.FlightCardTemplate>
    <DataTemplate>
    <ConversationalUI:FlightCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.FlightCardTemplate>
    <ConversationalUI:MessageTemplateSelector.GifTemplate>
    <DataTemplate>
    <MediaElement Height="{Binding Size.Height}" LoadedBehavior="Play" Position="0" Source="{Binding Source}" Stretch="{Binding Stretch}" SpeedRatio="1" UnloadedBehavior="Play" Width="{Binding Size.Width}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.GifTemplate>
    <ConversationalUI:MessageTemplateSelector.ImageCardTemplate>
    <DataTemplate>
    <ConversationalUI:ImageCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ImageCardTemplate>
    <ConversationalUI:MessageTemplateSelector.ImageTemplate>
    <DataTemplate>
    <Image Height="{Binding Size.Height}" Source="{Binding Source}" Stretch="{Binding Stretch}" Width="{Binding Size.Width}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ImageTemplate>
    <ConversationalUI:MessageTemplateSelector.ListMessageTemplate>
    <DataTemplate>
    <telerik:RadListBox DisplayMemberPath="{Binding DisplayMemberPath}" IsSynchronizedWithCurrentItem="False" IsTabStop="False" ItemTemplate="{Binding ItemTemplate}" IsTextSearchEnabled="True" MinWidth="220" SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" SelectedValueBinding="{x:Null}" SelectionMode="{Binding SelectionMode}" TextBinding="{x:Null}"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ListMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.ProductCardTemplate>
    <DataTemplate>
    <ConversationalUI:ProductCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.ProductCardTemplate>
    <ConversationalUI:MessageTemplateSelector.TextMessageTemplate>
    <DataTemplate>
    <ConversationalUI:TextMessageControl Stylus.IsFlicksEnabled="False" Stylus.IsPressAndHoldEnabled="False"/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.TextMessageTemplate>
    <ConversationalUI:MessageTemplateSelector.WeatherCardTemplate>
    <DataTemplate>
    <ConversationalUI:WeatherCard/>
    </DataTemplate>
    </ConversationalUI:MessageTemplateSelector.WeatherCardTemplate>
    </ConversationalUI:MessageTemplateSelector>
    </Setter.Value>
    </Setter>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type telerik:RadChat}">
    <Grid>
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
    <Grid>
    <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="48"/>
    <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <ConversationalUI:ChatMessageList x:Name="PART_MessageList" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
    <ConversationalUI:ChatPopupPlaceholder x:Name="PART_PopupPlaceholder" BorderBrush="{TemplateBinding BorderBrush}" Grid.Row="1" Visibility="Collapsed"/>
    <ItemsControl x:Name="PART_SuggestionItemsControl" Stylus.IsFlicksEnabled="False" Stylus.IsPressAndHoldEnabled="False" ConversationalUI:ScrollViewerScrollingHelper.IsEnabled="True" Padding="12,16,5,12" Grid.Row="2" Visibility="{Binding SuggestedActionsVisibility, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type telerik:RadChat}}}">
    <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
    <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
    </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
    <DataTemplate>
    <telerik:RadButton BorderBrush="{DynamicResource {x:Static telerik:Windows8ResourceKey.AccentBrush}}" BorderThickness="2" Background="{DynamicResource {x:Static telerik:Windows8ResourceKey.AccentBrush}}" CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type telerik:RadChat}}}" Command="{Binding Command}" Foreground="{DynamicResource {x:Static telerik:Windows8ResourceKey.MainBrush}}" Stylus.IsFlicksEnabled="False" InnerCornerRadius="0" Stylus.IsPressAndHoldEnabled="False" Margin="0,0,10,0" MinHeight="28" telerik:TouchManager.ShouldSuspendMousePromotion="True">
    <StackPanel Orientation="Horizontal">
    <Image Height="16" Source="{Binding Icon}" Stretch="UniformToFill" Width="16">
    <Image.Clip>
    <EllipseGeometry Center="8,8" RadiusY="8" RadiusX="8"/>
    </Image.Clip>
    <Image.Visibility>
    <Binding Path="Source" RelativeSource="{RelativeSource Self}">
    <Binding.Converter>
    <telerik:NullToVisibilityConverter/>
    </Binding.Converter>
    </Binding>
    </Image.Visibility>
    </Image>
    <TextBlock Margin="{Binding Padding, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type telerik:RadButton}}}" Text="{Binding Text}" VerticalAlignment="Center">
    <TextBlock.Visibility>
    <Binding Path="Text" RelativeSource="{RelativeSource Self}">
    <Binding.Converter>
    <telerik:NullToVisibilityConverter/>
    </Binding.Converter>
    </Binding>
    </TextBlock.Visibility>
    </TextBlock>
    </StackPanel>
    </telerik:RadButton>
    </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.Template>
    <ControlTemplate TargetType="{x:Type ItemsControl}">
    <ScrollViewer BorderThickness="0" Background="{x:Null}" HorizontalScrollBarVisibility="Auto">
    <ScrollViewer.Style>
    <Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ScrollViewer}">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
    <Grid>
    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" HorizontalAlignment="Right" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
    <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" telerik:TouchManager.TouchMode="None" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom"/>
    </Grid>
    </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    <Style.BasedOn>
    <Style TargetType="{x:Type ScrollViewer}">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type ScrollViewer}">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
    <Grid>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
    <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
    <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
    </Grid>
    </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    <Setter Property="Background" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MainBrush}}"/>
    <Setter Property="BorderBrush" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.BasicBrush}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    </Style>
    </Style.BasedOn>
    </Style>
    </ScrollViewer.Style>
    <ItemsPresenter Margin="{TemplateBinding Padding}"/>
    </ScrollViewer>
    </ControlTemplate>
    </ItemsControl.Template>
    </ItemsControl>
    <ConversationalUI:TypingIndicator x:Name="PART_TypingIndicator" Icon="{TemplateBinding TypingIndicatorIcon}" Grid.Row="3" Text="{TemplateBinding TypingIndicatorText}" Visibility="{TemplateBinding TypingIndicatorVisibility}"/>
    <Border x:Name="InputBoxContainer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,0" Grid.Row="4">
    <DockPanel>
    <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
    <telerik:RadToggleButton x:Name="PART_ToolBarButton" IsChecked="{Binding IsToolBarOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" InnerCornerRadius="0" Margin="5,0">
    <telerik:RadToggleButton.Style>
    <Style TargetType="{x:Type telerik:RadToggleButton}">
    <Setter Property="Height" Value="28"/>
    <Setter Property="Width" Value="28"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.StrongBrush}}"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
    <Grid>
    <Border x:Name="BorderVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
    <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="IsChecked" Value="True">
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.AccentBrush}}"/>
    </Trigger>
    <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MarkerBrush}}"/>
    </Trigger>
    <Trigger Property="IsPressed" Value="True">
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MarkerBrush}}"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
    <Setter Property="Opacity" TargetName="Content" Value="0.3"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </telerik:RadToggleButton.Style>
    <telerik:RadToggleButton.Visibility>
    <Binding Path="ToolBarCommands.Count" RelativeSource="{RelativeSource TemplatedParent}">
    <Binding.Converter>
    <telerik:NumberToVisibilityConverter/>
    </Binding.Converter>
    </Binding>
    </telerik:RadToggleButton.Visibility>
    <telerik:RadGlyph Glyph="" TextOptions.TextRenderingMode="Aliased"/>
    </telerik:RadToggleButton>
    <telerik:RadButton x:Name="SendButton" CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{Binding SendCommand, RelativeSource={RelativeSource TemplatedParent}}" InnerCornerRadius="0" Margin="5,0">
    <telerik:RadButton.Style>
    <Style TargetType="{x:Type telerik:RadButton}">
    <Setter Property="Height" Value="28"/>
    <Setter Property="Width" Value="28"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.AccentBrush}}"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type telerik:RadButton}">
    <Grid>
    <Border x:Name="BorderVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
    <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Grid>
    <ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MarkerBrush}}"/>
    </Trigger>
    <Trigger Property="IsPressed" Value="True">
    <Setter Property="Foreground" Value="{telerik:Windows8Resource ResourceKey={x:Static telerik:Windows8ResourceKey.MarkerBrush}}"/>
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
    <Setter Property="Opacity" TargetName="Content" Value="0.3"/>
    </Trigger>
    </ControlTemplate.Triggers>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </telerik:RadButton.Style>
    <Path Data="M1,9L18,9 0,16z M0,0L18,8 1,8z" Fill="{Binding Foreground, ElementName=SendButton}" Stretch="None" SnapsToDevicePixels="True" StrokeThickness="0"/>
    </telerik:RadButton>
    </StackPanel>
    <telerik:RadWatermarkTextBox x:Name="PART_InputBox" AcceptsReturn="True" BorderThickness="0" Background="Transparent" WatermarkContent="{TemplateBinding InputBoxWatermarkContent}"/>
    </DockPanel>
    </Border>
    <Border x:Name="PART_ToolBar" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,0" Background="{DynamicResource {x:Static telerik:Windows8ResourceKey.MainBrush}}" CornerRadius="0,0,1,1" Height="48" Grid.Row="5" SnapsToDevicePixels="True">
    <Border.Visibility>
    <Binding ElementName="PART_ToolBarButton" Path="IsChecked">
    <Binding.Converter>
    <telerik:BooleanToVisibilityConverter/>
    </Binding.Converter>
    </Binding>
    </Border.Visibility>
    <ItemsControl>
    <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
    <StackPanel IsItemsHost="True" Orientation="Horizontal"/>
    </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
    <DataTemplate>
    <telerik:RadButton ContentTemplate="{Binding ToolBarCommandTemplate, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type telerik:RadChat}}}" Content="{Binding}" Command="{Binding Command}" InnerCornerRadius="0" Margin="5,5,0,5"/>
    </DataTemplate>
    </ItemsControl.ItemTemplate>
    </ItemsControl>
    </Border>
    <ConversationalUI:ChatOverlay x:Name="PART_Overlay" Grid.RowSpan="5" Visibility="Collapsed"/>
    </Grid>
    </Border>
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>

 

Omar
Top achievements
Rank 1
 answered on 09 Sep 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?