Progress® Telerik® UI for .NET MAUI Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 21 May 2025 11:56 by ADMIN
JOHN
Created on: 21 May 2025 11:46
Category: Chat (Conversational UI)
Type: Feature Request
0
Chat: Provide a built-in option to attach images
Provide an option to attach images also exchange images in the chat
1 comment
ADMIN
Didi
Posted on: 21 May 2025 11:56

for now as a solution you can use the Chat control template 

    <ControlTemplate x:Key="RadChatControlTemplate">
        <Grid IsClippedToBounds="True">
            <Grid telerikMauiControls:KeyboardHelper.IsTranslationTarget="True"
                  IsClippedToBounds="True"
                  RowSpacing="2"
                  RowDefinitions="*, Auto">
                <Grid Margin="{OnPlatform Default='10, 10, 10, 0', WinUI='0, 10, 0, 0', MacCatalyst='0, 10, 0, 0'}">
                    <telerikChat:RadChatListView x:Name="PART_ChatListView"
                                                 telerikMauiControls:StyleHelper.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                                 AutoScrollMode="{TemplateBinding AutoScrollMode}"
                                                 ScrollMediator="{TemplateBinding ActualScrollMediator}"
                                                 ItemTemplate="{TemplateBinding ItemTemplateSelector}"
                                                 ItemsSource="{TemplateBinding Items}"
                                                 AutomationId="RadChatListView" />
                    <telerikMauiControls:RadContentView telerikMauiControls:StyleHelper.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                                        VerticalOptions="End"
                                                        Content="{TemplateBinding TypingIndicator}"
                                                        HeightRequest="{TemplateBinding TypingIndicator.IsVisible, Converter={StaticResource ChatBoolToValueConverter}}"
                                                        Padding="{OnPlatform Default=0, WinUI='10, 0', MacCatalyst='12, 0'}" />
                    <telerikMauiControls:RadContentView telerikMauiControls:StyleHelper.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                                        VerticalOptions="End"
                                                        Content="{TemplateBinding Picker}"
                                                        HeightRequest="{TemplateBinding Picker.IsVisible, Converter={StaticResource ChatBoolToValueConverter}}"
                                                        MaximumHeightRequest="{Binding Height, Source={x:Reference PART_ChatListView}}"
                                                        Padding="{OnPlatform Default=0, WinUI='10, 0', MacCatalyst='12, 0'}" />
                </Grid>
                <Grid x:Name="PART_InputAreaGrid"
                      Grid.Row="1"
                      ColumnDefinitions="*, Auto"
                      Padding="10"
                      telerikMauiControls:KeyboardHelper.IsTranslationPivot="True">
                    <telerikChat:ChatEntry x:Name="PART_ChatEntry"
                                           telerikMauiControls:StyleHelper.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                           ReserveSpaceForErrorView="False"
                                           Keyboard="Chat"
                                           Text="{TemplateBinding Message, Mode=TwoWay}"
                                           HeightRequest="{OnPlatform Default=36, WinUI=32, MacCatalyst=28, Android=44}"
                                           ReturnCommand="{TemplateBinding ActualSendMessageCommand}"
                                           BackgroundColor="Transparent"
                                           VerticalOptions="Center"
                                           telerikMauiControls:KeyboardHelper.IsTranslationSource="True" 
                                           AutomationId="RadChatEntry" />
                    <ImageButton x:Name="PART_SendMessageButton"
                                 Grid.Column="1"
                                 telerikMauiControls:StyleHelper.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                 Opacity="0.6"
                                 Padding="0"
                                 Margin="10, 0, 0, 0"
                                 Command="{TemplateBinding ActualSendMessageCommand}"
                                 Source="{Binding SendMessageButtonImage, Source={RelativeSource Mode=TemplatedParent}}"
                                 BackgroundColor="Transparent"
                                 BorderColor="Transparent"
                                 WidthRequest="{OnPlatform Default=24, WinUI=22}"
                                 Aspect="AspectFit"
                                 VerticalOptions="Center" 
                                 AutomationId="RadChatSendMessageButton" />
                </Grid>
            </Grid>
        </Grid>
    </ControlTemplate>

the namespaces used: 

                    xmlns:telerikMauiControls="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
                    xmlns:telerikChat="clr-namespace:Telerik.Maui.Controls.Chat;assembly=Telerik.Maui.Controls"

Then add additional button int he control template on which you can develop logic for attaching an image and display this image inside the chat list using Chat ItemTemplateSelector. https://docs.telerik.com/devtools/maui/controls/chat/item-template-selector 

Regards,
Didi
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status
Category