The last item is cut in the listview

2 posts, 0 answers
  1. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 13 Oct Link to this post

    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?

  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    488 posts

    Posted 13 Oct Link to this post

    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
    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
Back to Top