ChatPicker Overview
The RadChat
component offers different pickers allowing you to present the user a selection of choices either as a part of the conversation, or over the messages' view.
Depending on the information that is presented and the choice that have to be made, the pickers can be one of the types listed below.
The Chat Pickers is part of Telerik UI for .NET MAUI, the most comprehensive UI suite for .NET MAUI! To try it out, sign up for a free 30-day trial and kickstart your cross-platform app development today.
-
DatePicker
—Displays a Calendar to choose a date. -
TimePicker
—Displays a clock view to choose a time. -
ItemPicker
—Displays a list of suggestions the end user can choose from. -
CardPicker
—Displays a list of cards with structured layout.
Each of these pickers is a part of the RadChatPicker
control and is defined through the corresponding PickerContext
property, namely DatePickerContext
, TimePickerContext
, ItemPickerContext
, etc.
You can use RadChatPicker
in three different ways:
-
Inline as a part of the conversation–Through a
PickerItem
added to the Chat’s Items collection. - Inside the Chat but not as a part of the conversation–The picker is placed between the entry and the conversation–implemented through the Chat’s Picker property.
- As a separate Chat Picker control–Shown outside the
RadChat
control.
Inline as Part of the Conversation
In this case, you need to create an item of type PickerItem
that derives from the ChatItem
. Set its Context
, and add it to the Items
collection of the Chat.
The following example demonstrates how to use the RadChatPicker
inline as a part of the conversation:
DatePickerContext context = new DatePickerContext
{
MinDate = new DateTime(2019, 1, 1),
MaxDate = new DateTime(2019, 2, 2),
SelectedDate = new DateTime(2019, 1, 16)
};
PickerItem pickerItem = new PickerItem { Context = context };
chat.Items.Add(new TextMessage { Text = "Select a date", Author = chat.Author });
chat.Items.Add(pickerItem);
context.PropertyChanged += (s, e) =>
{
if (e.PropertyName == "SelectedDate")
{
if (context.SelectedDate != null)
{
chat.Items.Remove(pickerItem);
chat.Items.Add(new TextMessage { Author = chat.Author, Text = "" + context.SelectedDate });
}
}
};
When the user makes a selection, you can add a new TextMessage
with the SelectedDate
and remove the PickerItem
from the conversation.
Inside the Chat - Not Part of the Conversation
If you choose this approach, you need to create a RadChatPicker
instance and set it to the Picker
property of the Chat:
<telerik:RadChat x:Name="chat">
<telerik:RadChat.Picker>
<telerik:RadChatPicker x:Name="picker"
IsOkButtonVisible="False"
IsCancelButtonVisible="False"
BackgroundColor="LightGray" />
</telerik:RadChat.Picker>
</telerik:RadChat>
Then, when you need to display any of the available pickers, you set the Context
property of the ChatPicker
. The next example shows how to achieve this with DatePickerContext
:
DatePickerContext context = new DatePickerContext
{
MinDate = new DateTime(2019, 1, 1),
MaxDate = new DateTime(2019, 2, 2),
SelectedDate = new DateTime(2019, 1, 16)
};
context.PropertyChanged += (s, e) =>
{
if (e.PropertyName == "SelectedDate")
{
if (context.SelectedDate != null)
{
chat.Items.Add(new TextMessage { Author = this.chat.Author, Text = "" + context.SelectedDate });
(chat.Picker as RadChatPicker).IsVisible = false;
}
}
};
(chat.Picker as RadChatPicker).Context = context;
When the user selects a date, the Context
is reset to null
and a new TextMessage
with the SelectedDate
can be added to the conversation. The IsVisible
property of the picker can also be set to false
.
In the example above, RadChatPicker
is used for immediate selection by setting its IsOkButtonVisible
and IsCancelButtonVisible
to false. You can also show OK and Cancel buttons and use the provided events/commands to handle the selection.