RadListView - Grid Column Width Auto doesn't size as expected

[Thoerle]

I have the followin MainPage.xaml

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dataControls="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:mauiApp8="clr-namespace:MauiApp8"
             x:Class="MauiApp8.MainPage"
             BindingContext="{Binding Source={RelativeSource Self}}">

    <Grid Margin="10"
          ColumnDefinitions="Auto, Auto, *">
        <dataControls:RadListView Grid.Column="0"
                                  ItemsSource="{Binding FooItems}">
            <dataControls:RadListView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type mauiApp8:Foo}">
                    <dataControls:ListViewTemplateCell>
                        <dataControls:ListViewTemplateCell.View>
                            <Grid ColumnDefinitions="Auto, Auto"
                                  Padding="0, 4">
                                <Label Text="{Binding Name}"
                                       TextColor="{Binding Name}" />
                                <Label Text="{Binding Description}"
                                       Grid.Column="1" />
                            </Grid>
                        </dataControls:ListViewTemplateCell.View>
                    </dataControls:ListViewTemplateCell>
                </DataTemplate>
            </dataControls:RadListView.ItemTemplate>
        </dataControls:RadListView>

        <ListView Grid.Column="1"
                  ItemsSource="{Binding FooItems}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type mauiApp8:Foo}">
                    <ViewCell>
                        <Grid ColumnDefinitions="Auto, Auto"
                              Padding="0, 4">
                            <Label Text="{Binding Name}"
                                   TextColor="{Binding Name}" />
                            <Label Text="{Binding Description}"
                                   Grid.Column="1" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Border Grid.Column="2"
                Background="Green" />
    </Grid>
</ContentPage>

Why doesn't the RadListView auto size the items correctly?

First column (red circle) is the RadListView which is cutoff.

Second column is the normal ListView which displays the text fully.

Code behind if needed is this:

 

public partial class MainPage : ContentPage
{
    public List<Foo> FooItems { get; set; }

    public MainPage()
    {
        FooItems =
        [
            new Foo("Hello", "Hello World this is a long text"),
            new Foo("Hello", "Hello World this is a very very very long text")
        ];

        InitializeComponent();
    }
}

public class Foo
{
    public string Name { get; set; }
    public string Description { get; set; }

    public Foo(string name, string description)
    {
        Name = name;
        Description = description;
    }
}

[Didi]

Hello Lori,

Thank you for the provided code and description.

I tested the case and reproduced the behavior. In general, the ListView should not be placed in a layout that does not provide enough space. Such layouts are stack and grid with auto. This is described here: https://docs.telerik.com/devtools/maui/controls/listview/getting-started#define-the-control 

I can suggest you use the new control we have - RadCollectionView. Here is the setup:

    <Grid Margin="10"
          ColumnDefinitions="Auto, Auto, *">
        <dataControls:RadCollectionView Grid.Column="0" x:Name="listview"
                                  ItemsSource="{Binding FooItems}">
            <dataControls:RadCollectionView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type local:Foo}">

                    <Grid Padding="{Binding Source={RelativeSource AncestorType={x:Type dataControls:RadCollectionViewItemView}}, Path=ActualPadding}" ColumnDefinitions="Auto, Auto"
                                  >
                                <Label Text="{Binding Name}"
                                       TextColor="{Binding Name}" />
                                <Label Text="{Binding Description}"
                                       Grid.Column="1" />
                            </Grid>
                       
                </DataTemplate>
            </dataControls:RadCollectionView.ItemTemplate>
        </dataControls:RadCollectionView>

        <ListView Grid.Column="1"
                  ItemsSource="{Binding FooItems}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="{x:Type local:Foo}">
                    <ViewCell>
                        <Grid ColumnDefinitions="Auto, Auto"
                              Padding="0, 4">
                            <Label Text="{Binding Name}"
                                   TextColor="{Binding Name}" />
                            <Label Text="{Binding Description}"
                                   Grid.Column="1" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Border Grid.Column="2"
                Background="Green" />
    </Grid>
  

and the result is attached.

Review the migration article how to migrate the RadListView to RadCollectionView: https://docs.telerik.com/devtools/maui/controls/collectionview/listview-migration 

Regards,
Didi
Progress Telerik

[Thoerle]

Is there a comparison available for RadListView vs RadCollectionView ?

The names are rather similar, List vs Collection. IMHO a list is a collection.

 

[Didi]

In my answer, I have shared the migration article: https://docs.telerik.com/devtools/maui/controls/collectionview/listview-migration The API differences are described there. 

I am not sure for what comparison you are looking for. Could you please share more details on this?

[Thoerle]

Okay, I seem to understand now, CollectionView is a replacement of ListView, thats why there is a migration articel, am I correct?

 

Thought, those are two different controls, both covering two different use cases.

And thats why I thought a comparison seems nice to have, to be able to decide when its best to use ListView and when to use CollectionView. BUT if I understood it correctly, one should use CollectionView for all cases, am I correct?

[Didi]

Yes, the CollectionView is a complete rewrite of the ListView from the ground up. CollectionView offers improved performance, enhanced features, and a modernized approach to managing lists of data. The CollectionView incorporates all key features of the ListView.

So I suggest you use the new CollectionView control. Replace the existing RadListView in your project with the RadCollectionView.