How do I setup MAUI RadListView ItemTemplate, ItemsSource in C# instead of XAML

[David]

All my efforts so far generate errors outside my code.

Here is sample (EntityEntry is a struct with Name and Id properties, Entries is a list of them):

            foreach(string key in dictionary.Keys)
            {
                Entries.Add(new EntityEntry { Name = key, Id = dictionary[key] });
            }

            Grid grid = new Grid();
            Label label = new Label
            {
                FontSize = 15D,
                FontAttributes = FontAttributes.Bold,
            };
            label.SetBinding(Label.TextProperty, "Name");
            grid.Children.Add(label);
            ListViewTemplateCell lt = new ListViewTemplateCell() { View = grid};
            DataTemplate dt = new DataTemplate(() => lt.View);

            EntitiesLv = new RadListView
            {
                Background = Colors.PaleTurquoise,
                HorizontalOptions = LayoutOptions.Fill,
                IsItemsReorderEnabled = false,
                ItemTemplate = dt,
                ItemsSource = Entries,
                LayoutDefinition = new ListViewGridLayout
                {
                    HorizontalItemSpacing = 5D,
                    VerticalItemSpacing = 5D
                },
                LoadOnDemandBufferItemsCount = 5,
                LoadOnDemandMode = LoadOnDemandMode.Automatic,
                Margin = new Thickness(10, 10),
                SelectionMode = SelectionMode.Single,
                VerticalOptions = LayoutOptions.Fill,
                VerticalScrollBarVisibility = ScrollBarVisibility.Default,
            };
            EntitiesLv.GestureRecognizers.Add(new TapGestureRecognizer { Command = ListTapped, NumberOfTapsRequired = 1 });
            EntitiesLv.SelectionChanged += EntitiesLvOnSelectionChanged;

Error occurs if ItemTemplate and ItemsSource are both set, but not if just one is.

All help appreciated.

 

 

[Antoan]

Hello David,

Thank you for your interest in Telerik UI for .NET MAUI.

To solve the issue, the DataTemplate should always return a new View, in this case a Grid.

You can try the code below:

ItemTemplate = new DataTemplate(() =>
{
  return new ListViewTemplateCell
  {
    View = GetCellContent()
  };
}),

public View GetCellContent()
{
  Grid grid = new Grid();

  Label label = new Label
  {
    FontSize = 15D,
    FontAttributes = FontAttributes.Bold,
    Text = "Random Text"
  };

  grid.Children.Add(label);
  return grid;
}

 

You can find more information about the DataTemplate and ListViewTemplateCell from our documentation below:

https://docs.telerik.com/devtools/maui/controls/listview/cells/listview-templatecell

I hope this sheds some light on this case. Let me know if I can provide any further assistance.

Regards,
Antoan
Progress Telerik

[David]

Honestly, I fail to see much difference in the two above approaches for a DataTemplate, as the latter just moves some of the former's logic to a separate procedure (and messes with the item's text). But I do appreciate seeing any and all suggestions. Thank you.

I got around the DataTemplate problem by including these ItemStyle and SelectedItemStyle styles within my App.xaml Style for RadListPicker ("telData is my reference "xmlns:telData="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.Maui.Controls.Compatibility":

                <Setter Property="ItemStyle">
                    <Setter.Value>
                        <Style TargetType="telData:SpinnerItemView">
                            <Setter Property="BackgroundColor" Value="White"/>
                            <Setter Property="FontAttributes" Value="Bold" />
                            <Setter Property="FontFamily" Value="OpenSansRegular" />
                            <Setter Property="FontSize">
                                <Setter.Value>
                                    <OnIdiom x:TypeArguments="x:Double" Phone="10" Desktop="24" Default="16" />
                                </Setter.Value>
                            </Setter>
                            <Setter Property="TextColor" Value="Green"/>
                        </Style>
                    </Setter.Value>
                </Setter>

                <Setter Property="SelectedItemStyle">
                    <Setter.Value>
                        <Style TargetType="telData:SpinnerItemView">
                            <Setter Property="BackgroundColor" Value="AliceBlue"/>
                            <Setter Property="FontAttributes" Value="Bold" />
                            <Setter Property="FontFamily" Value="OpenSansRegular" />
                            <Setter Property="FontSize">
                                <Setter.Value>
                                    <OnIdiom x:TypeArguments="x:Double" Phone="14" Desktop="30" Default="20" />
                                </Setter.Value>
                            </Setter>
                            <Setter Property="TextColor" Value="Red"/>
                        </Style>
                    </Setter.Value>
                </Setter>

David Pressman