ListView Width value changed

0 Answers 304 Views
ListView
Allen
Top achievements
Rank 1
Iron
Iron
Allen asked on 01 Aug 2022, 11:06 AM

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.

Lance | Senior Manager Technical Support
Telerik team
commented on 01 Aug 2022, 05:09 PM

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

Allen
Top achievements
Rank 1
Iron
Iron
commented on 02 Aug 2022, 01:31 AM

Hey Lance, I tested as what you said, there is no issue on it, and the Grid width is 305. 
Antoan
Telerik team
commented on 02 Aug 2022, 02:00 PM

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

Allen
Top achievements
Rank 1
Iron
Iron
commented on 03 Aug 2022, 08:56 AM | edited

Hey Antoan, 

I did a sample project with running screenshot, For details you can review it.(MAUI 419 + Telerik Trial: 2.1.0 )

Antoan
Telerik team
commented on 05 Aug 2022, 02:32 PM

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.

No answers yet. Maybe you can help?

Tags
ListView
Asked by
Allen
Top achievements
Rank 1
Iron
Iron
Share this question
or