1 Answer, 1 is accepted
Hello Nauman,
You can add a context menu to a RadListView Item using a custom implementation. This scenario could be achieved for example, with RadButton, RadPopup controls.
The result:
And the implementation:
Let's create a business model for the items:
public class DataItem : Telerik.Maui.Controls.NotifyPropertyChangedBase
{
private string name;
private bool isPopupOpen;
public DataItem(string personName)
{
Name = personName;
}
public string Name
{
get => name;
set => UpdateValue(ref name, value);
}
public bool IsPopupOpen
{
get => isPopupOpen;
set => UpdateValue(ref isPopupOpen, value);
}
}
Then, in the view model, let's create some sample names to populate the data source and a command that will toggle the IsPopupOpen property of that item (the command opens the context menu):
public class ViewModel
{
public ViewModel()
{
this.People = new ObservableCollection<DataItem>()
{
new DataItem("Freda Curtis"),
new DataItem("Jeffery Francis"),
new DataItem("Eva Lawson"),
new DataItem("Emmett Santos"),
new DataItem("Theresa Bryan"),
new DataItem("Jenny Fuller")
};
OpenContextMenuCommand = new Command<DataItem>(item => item.IsPopupOpen = !item.IsPopupOpen);
}
public ObservableCollection<DataItem> People { get; set; }
public Command<DataItem> OpenContextMenuCommand { get; }
}
the XAML, uses a RadPopup in the ItemTemplate with a slight offset. Here are the important takeaways:
- The control's IsOpen property is bound to the model's IsPopupOpen property.
- The RadButton Command uses x:Reference to get to the view model command property.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:local="clr-namespace:TESTNet7"
x:Class="TESTNet7.MainPage">
<ContentPage.BindingContext>
<local:ViewModel x:Name="PageViewModel" />
</ContentPage.BindingContext>
<Grid>
<telerik:RadListView x:Name="listView"
ItemsSource="{Binding People}"
SelectionMode="None">
<telerik:RadListView.ItemTemplate>
<DataTemplate>
<telerik:ListViewTemplateCell>
<Grid x:Name="ItemGrid"
BackgroundColor="WhiteSmoke"
HeightRequest="70">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<Label x:Name="ListItemDisplayLabel"
Text="{Binding Name}"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="18" />
<BoxView x:Name="ItemSpacerBoxView"
HorizontalOptions="Fill"
VerticalOptions="End"
HeightRequest="1" />
<!-- If you want just the ellipsis to open the context menu, use a Button instead.
Since the command is in the page's ViewModel, so we use x:Reference to escape the BindingContext of the DataTemplate -->
<Button Text=":"
Command="{Binding BindingContext.OpenContextMenuCommand, Source={x:Reference listView}}"
CommandParameter="{Binding}"
TextColor="DarkGray"
BackgroundColor="Transparent"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Column="1">
<telerik:RadPopup.Popup>
<!-- The BindingContext of the popup is the item, so we can bind to IsPopupOpen and Name. -->
<telerik:RadPopup IsOpen="{Binding IsPopupOpen}"
HorizontalOffset="-25">
<StackLayout BackgroundColor="White"
Padding="10"
Spacing="5">
<Label Text="Menu" FontAttributes="Bold"/>
<Label Text="{Binding Name, StringFormat='Name: {0}'}" />
</StackLayout>
</telerik:RadPopup>
</telerik:RadPopup.Popup>
</Button>
</Grid>
</telerik:ListViewTemplateCell>
</DataTemplate>
</telerik:RadListView.ItemTemplate>
</telerik:RadListView>
</Grid>
</ContentPage>
Regards,
Didi
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.