The last item is cut in the listview

[Pierre]

Hi there, I use an radListView in my master page like a menu.

<StackLayout x:Name="MasterStack" BackgroundColor="{StaticResource SideBgColor}" VerticalOptions="FillAndExpand">
    <StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource SideBgColorLogo}" HeightRequest="60"  Padding="10,0,0,0">
        <Image Source="tc.png" Aspect="AspectFit" WidthRequest="25" HeightRequest="25" HorizontalOptions="Start"></Image>
        <Label Text="TechCenter V2" Style="{StaticResource MenuLabel}" VerticalTextAlignment="Center" HeightRequest="25"></Label>
    </StackLayout>
    <telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding MenuItems}" SelectedItem="{Binding SelectedMenu}" SelectionMode="Single" VerticalOptions="Fill">
        <!--<telerikDataControls:RadListView.Behaviors>
            <behaviors:EventToCommandBehavior EventName="ItemTapped" Command="{Binding SelectionChangedCommand, Mode=TwoWay}" Converter="{StaticResource ItemTappedConverter}" />
        </telerikDataControls:RadListView.Behaviors>-->
        <telerikDataControls:RadListView.SelectedItemStyle>
            <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource SideItemSelBgColor}" BorderWidth="3" BorderLocation="Bottom"/>
        </telerikDataControls:RadListView.SelectedItemStyle>
        <telerikDataControls:RadListView.ItemStyle>
            <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource SideBgColor}"></telerikListView:ListViewItemStyle>
        </telerikDataControls:RadListView.ItemStyle>
        <telerikDataControls:RadListView.ItemTemplate>
            <DataTemplate>
                <telerikListView:ListViewTemplateCell>
                    <telerikListView:ListViewTemplateCell.View>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding Icon}" WidthRequest="30" HeightRequest="30" Aspect="AspectFit" VerticalOptions="Center" />
                            <Label Grid.Column="1" Text="{Binding Title}" HeightRequest="30" Style="{StaticResource MenuItemLabel}" VerticalOptions="Center"/>
                        </Grid>
                    </telerikListView:ListViewTemplateCell.View>
                </telerikListView:ListViewTemplateCell>
            </DataTemplate>
        </telerikDataControls:RadListView.ItemTemplate>
    </telerikDataControls:RadListView>
</StackLayout>

 

On Androi and UWP the rendering is correct, but in IOS, the last item are Cut. If I add many menu items sometime the last one is hidded completely, or half cut or 1/4 cut. Any idea?

[Lance | Senior Manager Technical Support]

Hi Pierre,

You shouldn't be putting the RadListView inside a StackLayout (or any control that measure an edge to infinity) because the RadListView leverages UI virtualization.

Instead, you can do the following to achieve the same result, but allow for proper item measurement:

<Grid BackgroundColor="#03A9F4">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <StackLayout>
        <!-- Your header stuff -->
    </StackLayout>

    <RadListView Grid.Row="1" />

</Grid>

Let me know if you're still seeing the clipping effect after making that change.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik