Scrolling with the mouse wheel scrolls directly to the bottom of the messages instead of scrolling smoothly between the items.
To work this around, create a custom class that derives from RadChat and override its OnPointerWheelChanged method.
public class CustomChat : RadChat
{
private ScrollViewer scrollViewer;
internal ScrollViewer ScrollViewer
{
get
{
if (this.scrollViewer == null)
{
this.scrollViewer = this.ChildrenOfType<ScrollViewer>().Where(sc => sc.Name == "PART_ScrollViewer").FirstOrDefault();
}
return this.scrollViewer;
}
}
protected override void OnPointerWheelChanged(PointerRoutedEventArgs e)
{
if (this.ScrollViewer != null)
{
int delta = e.GetCurrentPoint(this).Properties.MouseWheelDelta;
double wheelDetents = delta / 120.0;
double scrollableRange = ScrollViewer.ExtentHeight - ScrollViewer.ViewportHeight;
double step = 0.01 * scrollableRange;
double offsetDelta = wheelDetents * step;
double newOffset = ScrollViewer.VerticalOffset - offsetDelta;
newOffset = Math.Max(0, Math.Min(ScrollViewer.ExtentHeight, newOffset));
ScrollViewer.ScrollToVerticalOffset(newOffset);
}
}
}
Unhandled COMException is thrown when the MessageGroup elements are removed from the chat's visual tree. This can happen when the group view models are removed from the MessageGroups or MessageListItems collections.
To work this around, you can get the corresponding MessageGroup container and set its DataContext to null before removing the MessageGroupViewModel from the MessageGroups or MessageListItems collections.
var groupVisuals = chat.ChildrenOfType<MessageGroup>();
foreach (MessageGroup group in groupVisuals)
{
group.DataContext = null;
}
The scrolling in RadChat feels incosistent and not smooth when having messages with different heights.
To work around this you can modify the ControlTemplate of ChatMessageList in order to set the Background property of the ScrollViewer element to a value different than null. For example, Transparent.
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<ResourceDictionary Source="ms-appx:///Telerik.WinUI.Controls/Themes/Generic.xaml"/>
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<Style TargetType="chat:ChatMessageList" BasedOn="{StaticResource ChatMessageListStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chat:ChatMessageList">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<!--The background of the Scrollviewer is set here-->
<ScrollViewer x:Name="PART_ScrollViewer"
VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
BorderThickness="0"
Background="Transparent">
<ItemsPresenter Margin="{TemplateBinding Padding}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
The list with the RadChat messages disappears when the ImageSource of ImageCardMessage is assigned after the control is loaded.
To work this around, you can pre-set the ImageSource of the image cards using a placeholder image.