This is a migrated thread and some comments may be shown as answers.

The last item is cut in the listview

1 Answer 145 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Pierre asked on 13 Oct 2017, 06:19 PM

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>
    <telerikDataControls:RadListView x:Name="listView" ItemsSource="{Binding MenuItems}" SelectedItem="{Binding SelectedMenu}" SelectionMode="Single" VerticalOptions="Fill">
            <behaviors:EventToCommandBehavior EventName="ItemTapped" Command="{Binding SelectionChangedCommand, Mode=TwoWay}" Converter="{StaticResource ItemTappedConverter}" />
            <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource SideItemSelBgColor}" BorderWidth="3" BorderLocation="Bottom"/>
            <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource SideBgColor}"></telerikListView:ListViewItemStyle>
                        <Grid Padding="5,10">
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            <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"/>


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?

1 Answer, 1 is accepted

Sort by
Lance | Manager Technical Support
Telerik team
answered on 13 Oct 2017, 08:51 PM
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">
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <!-- Your header stuff -->
    <RadListView Grid.Row="1" />

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

Lance | Tech Support Engineer, Sr.
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Top achievements
Rank 2
Answers by
Lance | Manager Technical Support
Telerik team
Share this question