# .NET MAUI Chat Attachments Styling

Any change in the appearance of the `RadChat` components depends on the referenced styles.

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

## Style the Attachments in the Input Area

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:

* `ImageStyle` (`Style` with target type `Image`)—Defines the style of the icon of the attached file.
* `SubtitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the size of the attached file.
* `TitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the name of the attached file.
* `RemoveButtonStyle` (`Style` with target type `RadTemplatedButton`)—Defines the style of the remove button used to remove the attached file from the input area.

Here is an example for styling the attachments in the messages:

```XAML
<Style TargetType="telerik:PromptInputAttachedFileItemView">
    <Setter Property="TitleStyle">
        <Setter.Value>
            <Style TargetType="Label">
                <Setter Property="FontAttributes" Value="Italic" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="RemoveButtonStyle">
        <Setter.Value>
            <Style TargetType="telerik:RadTemplatedButton">
                
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="ImageStyle">
        <Setter.Value>
            <Style TargetType="Image">
                <Setter Property="Source" Value="{Binding AttachedFile.FileName, Source={RelativeSource Mode=TemplatedParent}, Converter={StaticResource ChatFileExtensionToImageSourceConverter}}" />
            </Style>
        </Setter.Value>
    </Setter>
</Style>
```

And the needed converter for the images inside the attachments icon in the input area:

```XAML
<telerik:ChatFileExtensionToImageSourceConverter x:Key="ChatFileExtensionToImageSourceConverter">
    <telerik:ChatFileExtensionToImageSourceConverter.FallbackValue>
        <FontImageSource FontFamily="{Static telerik:TelerikFont.Name}"
                         Glyph="{Static telerik:TelerikFont.IconFile}"
                         Size="16"
                         Color="#F18900" />
    </telerik:ChatFileExtensionToImageSourceConverter.FallbackValue>
    <telerik:ChatFileExtensionToImageSourceConverterItem FileExtensions=".pdf, .doc, .docx, .pptx">
        <telerik:ChatFileExtensionToImageSourceConverterItem.ImageSource>
            <FontImageSource FontFamily="{Static telerik:TelerikFont.Name}"
                             Glyph="{Static telerik:TelerikFont.IconGallery}"
                             Size="16"
                             Color="#8660C5" />
        </telerik:ChatFileExtensionToImageSourceConverterItem.ImageSource>
    </telerik:ChatFileExtensionToImageSourceConverterItem>
    <telerik:ChatFileExtensionToImageSourceConverterItem FileExtensions=".png, .jpg, .bmp, .jpeg">
        <telerik:ChatFileExtensionToImageSourceConverterItem.ImageSource>
            <FontImageSource FontFamily="{Static telerik:TelerikFont.Name}"
                             Glyph="{Static telerik:TelerikFont.IconImage}"
                             Size="16"
                             Color="#80CBC4" />
        </telerik:ChatFileExtensionToImageSourceConverterItem.ImageSource>
    </telerik:ChatFileExtensionToImageSourceConverterItem>
</telerik:ChatFileExtensionToImageSourceConverter>
```

This is the result:

![Telerik UI for .NET MAUI Chat input area with a styled attached navigation image and blue send button](https://www.telerik.com/maui-ui/documentation/assets/f48b8e43aacd3212228d54b2446a361d/chat-attachedfiles-input-area-styling.png)

> For a runnable example with Styling the Chat Attachments in the Input Area, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to **Chat > Features** category.

## Style the Attachments in the Messages

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:

* `BorderStyle` (`Style` with target type `RadBorder`)—Defines the style of the border of the message with the attachments.
* `LabelStyle` (`Style` with target type `Label`)—Defines the style of the label in the attached messages.
* `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:
  * `DownloadAllButtonStyle` (`Style` with target type `RadTemplatedButton`)—Defines the style for the Download All button used to download all attached files in the message.
  * `AttachmentStyle` (`Style` with target type `ChatMessageAttachmentView`)—Defines the style of the entire attachment view in the attachments message.
    * `ImageStyle` (`Style` with target type `Image`)—Defines the style of the icon of the attached file in the message area.
    * `SubtitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the size of the attached file in the message area.
    * `TitleStyle` (`Style` with target type `Label`)—Defines the style of the label representing the name of the attached file in the message area.
    * `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:
      * `MenuButtonStyle` (`Style` with target type `Image`)—the custom image style that represents the attachment icon.

In addition, you can style the incoming and outgoing attachments messages separately targeting the following implicit styles:

* `ChatIncomingAttachmentsMessageView`—Represents all incoming attachments messages.

* `ChatIncomingFirstAttachmentsMessageView`—Represents a view that visualizes the first incoming attachments message, out of a few consecutive messages from the same author.

* `ChatIncomingMiddleAttachmentsMessageView`—Represents a view that visualizes the middle incoming attachments message, out of a few consecutive messages from the same author.

* `ChatIncomingLastAttachmentsMessageView`—Represents a view that visualizes the last incoming attachments message, out of a few consecutive messages from the same author.

* `ChatIncomingSingleAttachmentsMessageView`—Represents a view that visualizes a single incoming attachments message, out of a few consecutive messages from the same author.

* `ChatOutgoingAttachmentsMessageView`—Represents all outgoing attachments messages.

* `ChatOutgoingFirstAttachmentsMessageView`—Represents a view that visualizes the first outgoing attachments message, out of a few consecutive messages from the same author.

* `ChatOutgoingMiddleAttachmentsMessageView`—Represents a view that visualizes the middle outgoing attachments message, out of a few consecutive messages from the same author.

* `ChatOutgoingLastAttachmentsMessageView`—Represents a view that visualizes the last outgoing attachments message, out of a few consecutive messages from the same author.

* `ChatOutgoingSingleAttachmentsMessageView`—Represents a view that visualizes a single outgoing attachments message, out of a few consecutive messages from the same author.

Use the properties listed for the `ChatAttachmentsMessageView` for the customization of the incoming and outgoing attachments messages.

This is the result:

![Telerik UI for .NET MAUI Chat with styled incoming and outgoing attachment messages and Download All actions](https://www.telerik.com/maui-ui/documentation/assets/386c0f49c184417464d32a3f813df77b/chat-attachedfiles-messages.png)

> For a runnable example with Styling the Chat Attachments in the Messages, see the [SDKBrowser Demo Application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app) and go to **Chat > Features** category.

## See Also

* [Commands](https://www.telerik.com/maui-ui/documentation/controls/chat/commands)
* [Chat Items](https://www.telerik.com/maui-ui/documentation/controls/chat/items/overview)
* [MVVM Support](https://www.telerik.com/maui-ui/documentation/controls/chat/mvvm-support)