Skip to content

Commit cc4e2a5

Browse files
LakshminatarajanLakshminatarajan
authored
Merge pull request #3564 from syncfusion-content/Templateselector
977149: Added UG for Targetable views, return base templates for .NET MAUI Chat
2 parents 9eea223 + c829c46 commit cc4e2a5

File tree

1 file changed

+217
-0
lines changed

1 file changed

+217
-0
lines changed

‎MAUI/Chat/messages.md‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1314,8 +1314,223 @@ We have loaded a custom template if the message's text contains a particular tex
13141314

13151315
![Message template in .NET MAUI Chat](images/messages/maui-chat-message-template.png)
13161316

1317+
### Using ChatMessageTemplateSelector for custom templates
1318+
1319+
Create a custom class that extends `ChatMessageTemplateSelector` and override the `OnSelectTemplate` method to return either a custom template or default templates based on the message item.
1320+
1321+
{% tabs %}
1322+
{% highlight c# tabtitle="MessageTemplateSelector.cs" %}
1323+
1324+
public class MessageTemplateSelector : ChatMessageTemplateSelector
1325+
{
1326+
private readonly DataTemplate customOutgoingMessageTemplate;
1327+
private readonly DataTemplate customIncomingMessageTemplate;
1328+
private SfChat sfChat;
1329+
1330+
public MessageTemplateSelector(SfChat sfChat) : base(sfChat)
1331+
{
1332+
this.sfChat = sfChat;
1333+
this.customOutgoingMessageTemplate = new DataTemplate(typeof(OutgoingMessageTemplate));
1334+
this.customIncomingMessageTemplate = new DataTemplate(typeof(IncomingMessageTemplate));
1335+
}
1336+
1337+
protected override DataTemplate? OnSelectTemplate(object item, BindableObject container)
1338+
{
1339+
var message = item! as IMessage;
1340+
if (message == null)
1341+
{
1342+
return null;
1343+
}
1344+
if (item as ITextMessage != null)
1345+
{
1346+
if (message.Author == sfChat.CurrentUser && (item as ITextMessage)!.Text == "Thank you")
1347+
{
1348+
return customOutgoingMessageTemplate;
1349+
}
1350+
else if ((item as ITextMessage)!.Text == "How would you rate your interaction with our travel bot?")
1351+
{
1352+
return customIncomingMessageTemplate;
1353+
}
1354+
else
1355+
{
1356+
// Returns the default incoming or outgoing message templates based on the type of message.
1357+
return base.OnSelectTemplate(item, container);
1358+
}
1359+
}
1360+
else
1361+
{
1362+
return null;
1363+
}
1364+
}
1365+
}
1366+
}
1367+
1368+
{% endhighlight %}
1369+
{% endtabs %}
1370+
13171371
N> [View sample in GitHub](https://github.com/SyncfusionExamples/message-template-.net-maui-chat)
13181372

1373+
## Customizable views
1374+
1375+
The `SfChat` allows you to target and fully customize views within the chat control. The following views can be targeted and customized:
1376+
- `IncomingMessageContentView` - Represents the incoming content view of the messages.
1377+
- `IncomingMessageAuthorView` - Represents incoming message author name area.
1378+
- `IncomingMessageAvatarView` - Represents incoming message avatar area.
1379+
- `IncomingMessageTimestampView` - Represents incoming message timestamp area.
1380+
- `OutgoingMessageContentView` - Represents the outgoing content view of the messages.
1381+
- `OutgoingMessageAuthorView` - Represents outgoing message author name area.
1382+
- `OutgoingMessageAvatarView` - Represents outgoing message avatar area.
1383+
- `OutgoingMessageTimestampView` - Represents outgoing message timestamp area.
1384+
- `CardButtonView` - Represents a class which contains the information about an card action button.
1385+
- `ChatImageView` - Represents the image view of the Image message.
1386+
- `MessageSuggestionView` - Represents a list view for displaying suggestions view specific to a message.
1387+
- `ChatSuggestionView` - Represents a list view for displaying chat suggestions.
1388+
1389+
{% tabs %}
1390+
{% highlight xaml hl_lines="15 31" %}
1391+
1392+
<?xml version="1.0" encoding="utf-8" ?>
1393+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
1394+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
1395+
xmlns:sfChat="clr-namespace:Syncfusion.Maui.Chat;assembly=Syncfusion.Maui.Chat"
1396+
xmlns:local="clr-namespace:MauiChat"
1397+
x:Class="MauiChat.MainPage">
1398+
1399+
<ContentPage.BindingContext>
1400+
<local:ViewModel/>
1401+
</ContentPage.BindingContext>
1402+
1403+
<ContentPage.Resources>
1404+
<ResourceDictionary>
1405+
<!-- IncomingContentView Style -->
1406+
<Style TargetType="sfChat:IncomingMessageContentView">
1407+
<Setter Property="ControlTemplate">
1408+
<Setter.Value>
1409+
<ControlTemplate>
1410+
<Grid>
1411+
<Label Text="{Binding Text}"
1412+
Padding="10"
1413+
FontSize="12"
1414+
FontAttributes="Italic" />
1415+
</Grid>
1416+
</ControlTemplate>
1417+
</Setter.Value>
1418+
</Setter>
1419+
</Style>
1420+
1421+
<!-- OutgoingContentView Style -->
1422+
<Style TargetType="sfChat:OutgoingMessageContentView">
1423+
<Setter Property="ControlTemplate">
1424+
<Setter.Value>
1425+
<ControlTemplate>
1426+
<Grid>
1427+
<Label Padding="10,10,10,40"
1428+
FontSize="12"
1429+
FontAttributes="Italic"
1430+
Text="{Binding Text}" />
1431+
</Grid>
1432+
</ControlTemplate>
1433+
</Setter.Value>
1434+
</Setter>
1435+
</Style>
1436+
...
1437+
</ResourceDictionary>
1438+
</ContentPage.Resources>
1439+
1440+
<ContentPage.Content>
1441+
<sfChat:SfChat x:Name="sfChat"
1442+
Messages="{Binding Messages}"
1443+
CurrentUser="{Binding CurrentUser}" />
1444+
</ContentPage.Content>
1445+
</ContentPage>
1446+
1447+
{% endhighlight %}
1448+
{% highlight c# hl_lines="23 48" %}
1449+
1450+
using Syncfusion.Maui.Chat;
1451+
1452+
namespace MauiChat
1453+
1454+
public partial class ContentViews : ContentPage
1455+
{
1456+
SfChat sfChat;
1457+
ViewModel viewModel;
1458+
1459+
public ContentViews()
1460+
{
1461+
InitializeComponent();
1462+
1463+
viewModel = new ViewModel();
1464+
sfChat = new SfChat
1465+
{
1466+
Messages = viewModel.Messages,
1467+
CurrentUser = viewModel.CurrentUser
1468+
};
1469+
1470+
Resources = new ResourceDictionary();
1471+
1472+
var incomingStyle = new Style(typeof(IncomingMessageContentView))
1473+
{
1474+
Setters =
1475+
{
1476+
new Setter
1477+
{
1478+
Property = IncomingMessageContentView.ControlTemplateProperty,
1479+
Value = new ControlTemplate(() =>
1480+
{
1481+
var grid = new Grid();
1482+
var label = new Label
1483+
{
1484+
Padding = new Thickness(10),
1485+
BackgroundColor = Colors.LightGoldenrodYellow,
1486+
FontSize = 12,
1487+
FontAttributes = FontAttributes.Italic
1488+
};
1489+
label.SetBinding(Label.TextProperty, "Text");
1490+
grid.Children.Add(label);
1491+
return grid;
1492+
})
1493+
}
1494+
}
1495+
};
1496+
1497+
var outgoingStyle = new Style(typeof(OutgoingMessageContentView))
1498+
{
1499+
Setters =
1500+
{
1501+
new Setter
1502+
{
1503+
Property = OutgoingMessageContentView.ControlTemplateProperty,
1504+
Value = new ControlTemplate(() =>
1505+
{
1506+
var grid = new Grid();
1507+
var label = new Label
1508+
{
1509+
Padding = new Thickness(10, 10, 10, 40),
1510+
FontSize = 12,
1511+
BackgroundColor = Colors.LightGoldenrodYellow,
1512+
FontAttributes = FontAttributes.Italic
1513+
};
1514+
label.SetBinding(Label.TextProperty, "Text");
1515+
grid.Children.Add(label);
1516+
return grid;
1517+
})
1518+
}
1519+
}
1520+
};
1521+
...
1522+
1523+
Resources.Add(incomingStyle);
1524+
Resources.Add(outgoingStyle);
1525+
1526+
Content = sfChat;
1527+
BindingContext = viewModel;
1528+
}
1529+
}
1530+
1531+
{% endhighlight %}
1532+
{% endtabs %}
1533+
13191534
## Spacing between messages
13201535

13211536
`SfChat` allows to change the vertical spacing between the messages in view using [MessageSpacing](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_MessageSpacing) property. The default value is `8`.
@@ -1601,6 +1816,8 @@ By default, the author’s name and avatar are displayed for the incoming messag
16011816

16021817
![Hide incoming avatar and author visibility in .NET MAUI Chat](images/messages/maui-chat-hide-avatar.png)
16031818

1819+
N> In SfChat, when no avatar image is set, the author's initials are shown automatically based on their name.
1820+
16041821
## MessageTimestampFormat for incoming and outgoing messages
16051822

16061823
The `SfChat` allows you specify the format in which timestamps are shown for outgoing and incoming messages. The date and time representation can be customized using the [IncomingMessageTimestampFormat](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_IncomingMessageTimestampFormat) and [OutgoingMessageTimestampFormat](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Chat.SfChat.html#Syncfusion_Maui_Chat_SfChat_OutgoingMessageTimestampFormat) properties.

0 commit comments

Comments
 (0)