# .NET MAUI Chat Attachments Templates

The Telerik UI for .NET MAUI Chat control allows you to customize the appearance of the attachments in both the input area and the messages by changing the default template of the `ChatInputAreaAttachedFileItemView`.

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

## Customize the Attachments Template in the Input Area

To customize the appearance of the attachments in the input area, you can define a custom `ControlTemplate` for the `ChatInputAreaAttachedFileItemView`.

## Customize the Attachments Template in the Messages

To customize the appearance of the attachments in the messages, you can define a custom `ControlTemplate` in the `ChatMessageAttachmentView`. Below is an example of how to create a custom template for the attachments in the messages:

```XAML
<Style TargetType="telerik:ChatMessageAttachmentView">
	<Setter Property="ControlTemplate">
		<Setter.Value>
			<ControlTemplate>
				<telerik:RadBorder BorderColor="Black" BorderThickness="1" CornerRadius="5">
					<HorizontalStackLayout Spacing="5" Padding="2">
						<Image>
							<Image.Source>
								<FontImageSource FontFamily="{Static telerik:TelerikFont.Name}"
												 Glyph="{Static telerik:TelerikFont.IconFile}"
												 Size="16"
												 Color="Black" />
							</Image.Source>
						</Image>
						<telerik:RadTemplatedButton Content="Download"
													Command="{Binding DownloadAttachmentsCommand, Source={RelativeSource AncestorType={Type telerik:RadChat}}}"
													CommandParameter="{TemplateBinding Attachment}" />
						<telerik:RadTemplatedButton Content="Share"
													Command="{Binding ShareAttachmentsCommand, Source={RelativeSource AncestorType={Type telerik:RadChat}}}"
													CommandParameter="{TemplateBinding Attachment}" />
						<Label Text="{TemplateBinding Attachment.FileName}"
							   VerticalTextAlignment="Center"/>
					</HorizontalStackLayout>
				</telerik:RadBorder>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
```

And the final result:

![Telerik UI for .NET MAUI Chat custom attachment template with Download and Share buttons for incoming and outgoing files](https://www.telerik.com/maui-ui/documentation/assets/23ba173bb3558086c61039d727ecfcba/chat-attachments-custom-template.png)

### Customize the Attachment Actions Template

You can also customize the actions template of the attachments in the messages by defining a custom `ControlTemplate` for the `ChatMessageAttachmentActionsView`.

Here is an example of how to create a custom actions template for the attachments in the messages:

```XAML
<Style TargetType="telerik:ChatMessageAttachmentActionsView">
	<Setter Property="ControlTemplate">
		<Setter.Value>
			<ControlTemplate>
				<telerik:RadBorder BackgroundColor="#00796B" CornerRadius="5">
					<HorizontalStackLayout Spacing="5" Padding="2">
						<telerik:RadTemplatedButton Content="Download"
													Command="{Binding DownloadAttachmentsCommand, Source={RelativeSource AncestorType={Type telerik:RadChat}}}"
													CommandParameter="{TemplateBinding Attachment}" />
						<telerik:RadTemplatedButton Content="Share"
													Command="{Binding ShareAttachmentsCommand, Source={RelativeSource AncestorType={Type telerik:RadChat}}}"
													CommandParameter="{TemplateBinding Attachment}" />
					</HorizontalStackLayout>
				</telerik:RadBorder>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>
```

And the final result:

![Telerik UI for .NET MAUI Chat custom attachment actions template with Download and Share buttons](https://www.telerik.com/maui-ui/documentation/assets/2a9ecf06a72563e788e753a3cfaa404f/chat-attachments-actions-custom-template.png)

> For a runnable example with the Chat Attachments Template, 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)