Hey Team,
I was wondering if it is a problem, when 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.
I want RadListView to fill all row space, but I failed because of ColumnSpacing. This issue is only existing on Windows.
HI Allen, this is interesting.
The RadListView is just going to use whatever the platform provides in the measure pass for the parent. At the end of the measure pass, it hands off a size to the children to layout. It sounds like the Grid is not including the ColumnSpacing in that measurement.
I suspect it is an issue with .NET MAUI's measurement. Please replace the RadListview with any other .NET MAUI control (i.e. use a Grid instead and give it a colored background), I suspect you'll see the same result.
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> <Grid Grid.Row="5" Grid.ColumnSpan="2" WidthRequest="305" BackgroundColor="Red"/> </Grid>Please let me know the results
Hello Allen,
I copied the code snippet and tested it in a brand new app, the ListView seemed to return Width of 305. I also tried changing the code a bit and experimenting with different scenarios but the Width still returned the expected result. This leads me to believe that the problem lies elsewhere. Could you please send a sample project where the issue is reproduced so we may investigate the issue further?
Thank you in advance.
Regards,
Antoan
Hey Antoan,
I did a sample project with running screenshot, For details you can review it.(MAUI 419 + Telerik Trial: 2.1.0 )
Hello Allen,
Thank you for the provided sample project.
I carefully examined the project and after seeing the issue I logged a bug on your behalf. You can follow it on our public feedback portal from the following link: https://feedback.telerik.com/maui/1575186-listview-width-not-measured-correctly-when-in-grid-with-columnspacing
Solution: I decided to use the layout you offered and found out that if you place the ListView in the nested Grid it fixes the issue, for reference:
<Grid x:Name="grid" Grid.Row="2" Grid.ColumnSpan="2" WidthRequest="305"> <telerik:RadListView x:Name="listView" Grid.Row="1" Grid.ColumnSpan="2" WidthRequest="305"> <telerik:RadListView.ItemTemplate> <DataTemplate> <telerik:ListViewTemplateCell> <telerik:ListViewTemplateCell.View> <Grid BackgroundColor="Gray"> <Label Text="{Binding Name}" TextColor="White" /> </Grid> </telerik:ListViewTemplateCell.View> </telerik:ListViewTemplateCell> </DataTemplate> </telerik:RadListView.ItemTemplate> <telerik:RadListView.LayoutDefinition> <telerik:ListViewLinearLayout ItemLength="20" /> </telerik:RadListView.LayoutDefinition> </telerik:RadListView> </Grid>I hope this information helps. Let me know if I can assist any further.