|
| 1 | +--- |
| 2 | +title: Attachments |
| 3 | +meta_title: .NET MAUI Chat Documentation - Attachments Styling |
| 4 | +description: Learn how to style the outgoing and incoming attachments in the Telerik UI for .NET MAUI Chat control. |
| 5 | +position: 6 |
| 6 | +tags: .net maui, telerik .net maui, ui for .net maui, chat, style |
| 7 | +slug: chat-attachments-styling |
| 8 | +--- |
| 9 | + |
| 10 | +# .NET MAUI Chat Attachments Styling |
| 11 | + |
| 12 | +Any change in the appearance of the `RadChat` components depends on the referenced styles. |
| 13 | + |
| 14 | +>tip When working with attachments, you need to grant permissions to access the device camera and device external storage. For more details, review the [Microsoft Media Picker](https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/device-media/picker?view=net-maui-10.0&tabs=android) article. |
| 15 | +
|
| 16 | +## Style the Attachments in the Input Area |
| 17 | + |
| 18 | +The Telerik UI for .NET MAUI Chat control allows you to customize the appearance of the attachments in the input area, by using the `ChatInputAreaAttachedFileItemView` as implicit style. The `ChatInputAreaAttachedFileItemView` exposes the following properties for customization: |
| 19 | + |
| 20 | +* `ImageStyle` (`Style` with target type `Image`)—Defines the style of the icon of the attached file. |
| 21 | +* `SubtitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the size of the attached file. |
| 22 | +* `TitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the name of the attached file. |
| 23 | +* `RemoveButtonStyle` (`Style` with target type `RadTemplatedButton`)—Defines the style of the remove button used to remove the attached file from the input area. |
| 24 | + |
| 25 | +Here is an example for styling the attachments in the messages: |
| 26 | + |
| 27 | +<snippet id='chat-styling-attached-file' /> |
| 28 | + |
| 29 | +And the needed converter for the images inside the attachments icon in the input area: |
| 30 | + |
| 31 | +<snippet id='chat-styling-attachments-imagestyle' /> |
| 32 | + |
| 33 | +This is the result: |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +> For a runnable example with Styling the Chat Attachments in the Input Area, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Chat > Features** category. |
| 38 | +
|
| 39 | +## Style the Attachments in the Messages |
| 40 | + |
| 41 | +To customize the appearance of the attachments in the messages, you can use the `ChatAttachmentsMessageView` as an implicit style. The `ChatAttachmentsMessageView` exposes the following properties for customization: |
| 42 | + |
| 43 | +* `BorderStyle` (`Style` with target type `RadBorder`)—Defines the style of the border of the message with the attachments. |
| 44 | +* `LabelStyle` (`Style` with target type `Label`)—Defines the style of the label in the attached messages. |
| 45 | +* `AttachmentsListViewStyle` (`Style` with target type `ChatMessageAttachmentsListView`)—Defines the style of the list view containing the attached files in the message. The properties for customizing the list view are: |
| 46 | + * `DownloadAllButtonStyle` (`Style` with target type `RadTemplatedButton`)—Defines the style for the Download All button used to download all attached files in the message. |
| 47 | + * `AttachmentStyle` (`Style` with target type `ChatMessageAttachmentView`)—Defines the style of the entire attachment view in the attachments message. |
| 48 | + * `ImageStyle` (`Style` with target type `Image`)—Defines the style of the icon of the attached file in the message area. |
| 49 | + * `SubtitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the size of the attached file in the message area. |
| 50 | + * `TitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the name of the attached file in the message area. |
| 51 | + * `ActionsViewStyle` (`Style` with target type `ChatMessageAttachmentActionsView`)—Defines the style of the actions view containing the download and remove buttons for the attached file in the message area. The properties for customizing the actions view are: |
| 52 | + * `MenuButtonStyle` (`Style` with target type `Image`)—the custom image style that represents the attachment icon. |
| 53 | + |
| 54 | +In addition, you can style the incoming and outgoing attachments messages separately targeting the following implicit styles: |
| 55 | + |
| 56 | +* `ChatIncomingAttachmentsMessageView`—Represents all incoming attachments messages. |
| 57 | +* `ChatIncomingFirstAttachmentsMessageView`—Represents a view that visualizes the first incoming attachments message, out of a few consecutive messages from the same author. |
| 58 | +* `ChatIncomingMiddleAttachmentsMessageView`—Represents a view that visualizes the middle incoming attachments message, out of a few consecutive messages from the same author. |
| 59 | +* `ChatIncomingLastAttachmentsMessageView`—Represents a view that visualizes the last incoming attachments message, out of a few consecutive messages from the same author. |
| 60 | +* `ChatIncomingSingleAttachmentsMessageView`—Represents a view that visualizes a single incoming attachments message, out of a few consecutive messages from the same author. |
| 61 | + |
| 62 | +* `ChatOutgoingAttachmentsMessageView`—Represents all outgoing attachments messages. |
| 63 | +* `ChatOutgoingFirstAttachmentsMessageView`—Represents a view that visualizes the first outgoing attachments message, out of a few consecutive messages from the same author. |
| 64 | +* `ChatOutgoingMiddleAttachmentsMessageView`—Represents a view that visualizes the middle outgoing attachments message, out of a few consecutive messages from the same author. |
| 65 | +* `ChatOutgoingLastAttachmentsMessageView`—Represents a view that visualizes the last outgoing attachments message, out of a few consecutive messages from the same author. |
| 66 | +* `ChatOutgoingSingleAttachmentsMessageView`—Represents a view that visualizes a single outgoing attachments message, out of a few consecutive messages from the same author. |
| 67 | + |
| 68 | +Use the properties listed for the `ChatAttachmentsMessageView` for the customization of the incoming and outgoing attachments messages. |
| 69 | + |
| 70 | +Here is an example for styling the `ChatAttachmentsMessageView` and `ChatOutgoingAttachmentsMessageView`: |
| 71 | + |
| 72 | +<snippet id='chat-styling-attachments-messages' /> |
| 73 | + |
| 74 | +And the needed converter for the attachments icon inside the messages area: |
| 75 | + |
| 76 | +<snippet id='chat-styling-image-outgoing-messages' /> |
| 77 | + |
| 78 | +This is the result: |
| 79 | + |
| 80 | + |
| 81 | + |
| 82 | +> For a runnable example with Styling the Chat Attachments in the Messages, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **Chat > Features** category. |
| 83 | +
|
| 84 | +## See Also |
| 85 | + |
| 86 | +- [Commands]({%slug chat-commands%}) |
| 87 | +- [Chat Items]({%slug chat-items-overview%}) |
| 88 | +- [MVVM Support]({%slug chat-mvvm-support%}) |
0 commit comments