Skip to content

Commit 3cde8f4

Browse files
RavikumarAkuthotaSf4250RavikumarAkuthotaSf4250
committed
Revamp in-built message templates and views to reuse in sample
1 parent 3609bbb commit 3cde8f4

File tree

1 file changed

+212
-0
lines changed

1 file changed

+212
-0
lines changed

‎MAUI/Chat/messages.md‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1314,8 +1314,218 @@ 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+
### Template Selector to return base template
1318+
1319+
Create a custom class that inherits from `ChatMessageTemplateSelector`, and override the OnSelectTemplate method to return the base template for that item.
1320+
1321+
{% tabs %}
1322+
{% highlight c# tabtitle="MessageTemplateSelector.cs" %}
1323+
1324+
public class MessageTemplateSelector : ChatMessageTemplateSelector
1325+
{
1326+
public DataTemplate customOutgoingMessageTemplate;
1327+
public DataTemplate customIncomingMessageTemplate;
1328+
1329+
public MessageTemplateSelector(SfChat sfChat) : base(sfChat)
1330+
{
1331+
this.customOutgoingMessageTemplate = new DataTemplate(typeof(CustomOutgoingMessageTemplate));
1332+
this.customIncomingMessageTemplate = new DataTemplate(typeof(CustomIncomingMessageTemplate));
1333+
}
1334+
1335+
protected override DataTemplate? OnSelectTemplate(object item, BindableObject container)
1336+
{
1337+
var message = item! as IMessage;
1338+
if (message == null)
1339+
{
1340+
return null;
1341+
}
1342+
if (item as ITextMessage != null)
1343+
{
1344+
if ((item as ITextMessage)!.Text == "Hi guys, good morning! I'm very delighted to share with you the news that our team is going to launch a new mobile application.")
1345+
{
1346+
return customOutgoingMessageTemplate;
1347+
}
1348+
else if ((item as ITextMessage)!.Text == "Oh! That's great.")
1349+
{
1350+
return customIncomingMessageTemplate;
1351+
}
1352+
else
1353+
{
1354+
return base.OnSelectTemplate(item, container);
1355+
}
1356+
}
1357+
else
1358+
{
1359+
return null;
1360+
}
1361+
}
1362+
}
1363+
}
1364+
1365+
{% endhighlight %}
1366+
{% endtabs %}
1367+
13171368
N> [View sample in GitHub](https://github.com/SyncfusionExamples/message-template-.net-maui-chat)
13181369

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

13211531
`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 +1811,8 @@ By default, the author’s name and avatar are displayed for the incoming messag
16011811

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

1814+
N> In `SfChat`, when only the author's name is provided and no avatar image is set, the control automatically displays the author's initials.
1815+
16041816
## MessageTimestampFormat for incoming and outgoing messages
16051817

16061818
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)