When having a nested grid layouts with auto and definitive row heights, the content in the ListView ItemTemplate is not property sized only on iOS. On Android, MacCatalyst and WinUI the content is property sized.
Solution:
1. Using only auto-sized grid rows,
2. Using grouping and simplifying the layout, removing nested grid layouts, and using a vertical stack.
Having ContentViews for left and right item swipe
- Remove an Item from the List View Collection using right swipe content (The Item Source is then re-initialized as a new Observable Collection)
- Attempt to perform a Swipe Gesture on any list view item.
The ListView crashes
I used RadListView in a Grid, Grid has ColumnSpacing,
for example:
<Grid
RowSpacing="1"
ColumnSpacing="1"
WidthRequest="305"
HeightRequest="303"
BackgroundColor="#FF454545">
<Grid.RowDefinitions>
<RowDefinition Height="36"/>
<RowDefinition Height="28"/>
<RowDefinition Height="82"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="152"/>
<ColumnDefinition Width="152"/>
</Grid.ColumnDefinitions>
<telerik:RadListView x:Name="listView" Grid.Row="5" Grid.ColumnSpan="2" WidthRequest="305">
<telerik:RadListView.ItemTemplate>
<DataTemplate>
<telerik:ListViewTemplateCell>
<telerik:ListViewTemplateCell.View>
<Grid BackgroundColor="Gray">
<Label Margin="10" Text="{Binding Name}" />
</Grid>
</telerik:ListViewTemplateCell.View>
</telerik:ListViewTemplateCell>
</DataTemplate>
</telerik:RadListView.ItemTemplate>
</telerik:RadListView>
</Grid>I found the RadListView.Width is 304(ColumnDefinition plus), not 305.
https://docs.telerik.com/devtools/maui/controls/listview/styling/group-header
Imagine we have additional field in City class (CountryFlag as Image)
public class City
{
public string Name { get; set; }
public string Country { get; set; }
public Image CountryFlag { get; set; }
}
There is a slow performance when scrolling, expand/collapse items when the ListView Groups are sticky and GroupHeaderTemplate is used.
Workaround:
1. Set IsGroupHeaderStickty to false.
or
2.. Use the default group header template
Currently the LoadOnDemandCollection accepts a callback of the following format in the constructor:
public LoadOnDemandCollection(Func<CancellationToken, IEnumerable> action)It is a very common scenario to populate the items asynchronously. In its current form the collection would require blocking the current thread to populate the results:
ItemsSource = new ListViewLoadOnDemandCollection((cancelationToken) =>
{
var result = new List<ItemsModel>();
try
{
var items = dataService.GetItemsAsync().Result;
// TODO: Handle the result.
return result;
}
catch (Exception e)
{
// TODO: Handle the exception.
return null;
}
});This is not desired, as using Task.Result blocks the current thread and is considered an anti-pattern, in general.
A better approach would be to add a second overload of the constructor, allowing asynchronous calls:
public LoadOnDemandCollection(Func<CancellationToken, Task<IEnumerable>> action)This way we can use async and await in the callback instead:
ItemsSource = new ListViewLoadOnDemandCollection(async (cancelationToken) =>
{
var result = new List<ItemsModel>();
try
{
var items = await dataService.GetItemsAsync();
// TODO: Handle the result.
return result;
}
catch (Exception e)
{
// TODO: Handle the exception.
return null;
}
});According to my tests, the first blocking approach is not a problem, as the ListViewLoadOnDemandCollection starts a thread internally. That behavior is not obvious however, and using Task.Result is somewhat counterintuitive, so the second approach is much better from the user's perspective.
Hi Team,
In the current RadListView implementation, the RadListView will start with all the groups expanded. The only way to have any form of preference is to programmatically interact with the Dataview after-the-fact https://docs.telerik.com/devtools/maui/controls/listview/grouping/expand-collapse
This is problematic because I need to take a wild guess as to how long it takes for the data to load in the RadListView.Loaded event and then manually collapse them.
Even if I time this perfectly... this results in visual flash for the user because the ListView starts expanded and immediately collapses.
Requested Feature
A better approach that I am requesting a feature for is to have a property available for the RadListView that sets this value ahead of time.
For example, you could add it as a BindableProperty on the GroupDescriptorBase class.
// THE OFFICIAL BASE CLASS
public abstract class GroupDescriptorBase : OrderedDescriptorBase, IKeyLookup
{
public object GetKey(object item) => this.GetKeyCore(item);
protected abstract object GetKeyCore(object item);
protected virtual object GetDefaultKey(object item) => item;
// SUGGESTED IMPROVEMENT
public bool IsExpanded
{
get => (bool)GetValue(IsExpandedProperty);
set => SetValue(IsExpandedProperty, value);
}
public static readonly BindableProperty IsExpandedProperty = BindableProperty.Create(
nameof(IsExpanded),
typeof(bool),
typeof(GroupDescriptorBase),
true, // the default right now is true... do not change that because no breaking changes
propertyChanged: OnIsExpandedChanged);
static void OnIsExpandedChanged(BindableObject bindable, object oldValue, object newValue)
{
if (bindable is GroupDescriptorBase self)
{
if (!(bool)newValue)
{
// PLEASE DO NOT START WITH GROUPS EXPANDED
}
}
}
}
Or you could even put it a little lower, next to the BindableProperty SortOrder:
Thank you for your consideration,
Jian
on the GroupDefinition is to have a IsExap
Hi Team,
When I use a RadEntry or Entry in the RadListView, it is fine when rendering flat data. However, when the items are grouped, the app has a native WinUI unhandled exception (that needs a 2nd instance of VS2022 to catch).
The only way to stop it was to not use an entry-like control like a Label.
Here is code to reproduce it, I've attached a runnable example
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.Maui.Controls.Compatibility"
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.Maui.Controls.Compatibility"
x:Class="EntryTests.MainPage">
<Grid>
<telerikDataControls:RadListView x:Name="rulesListView"
ItemsSource="{Binding Clients}"
VerticalScrollBarVisibility="Always">
<telerikDataControls:RadListView.GroupDescriptors>
<telerikListView:PropertyGroupDescriptor PropertyName="Username" />
</telerikDataControls:RadListView.GroupDescriptors>
<telerikDataControls:RadListView.ItemTemplate>
<DataTemplate>
<telerikListView:ListViewTemplateCell>
<!-- WORKS -->
<!--<Label Text="{Binding Username}" FontSize="14"/>-->
<!-- HARD CRASH -->
<telerik:RadEntry Text="{Binding Username}" FontSize="14" />
</telerikListView:ListViewTemplateCell>
</DataTemplate>
</telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>
</Grid>
</ContentPage>
Version Note: The repro app is using UI for MAUI v0.9.0 because it was tested by Lance McCarthy with both 0.8.0 and 0.9.0 (this 0.9.0 was built on May 11th).
When using .net maui multi-window and adding RadListView the following exception occurs on some mac machines:
Terminating app due to uncaught exception 'NSObjectNotAvailableException', reason: 'UIAlertView is deprecated and unavailable for UIScene based applications, please use UIAlertController!'