Tab doesn't show contents

[Mikhail]

I have a Telerik TabView which has Telerik ListView in one of the tabs.

The first time page with tabs is opened the list view does not show or shows truncated as in the picture below (tab1.png).

When I navigate to another tab and go back to first tab the content is then shown, as seen in the second picture (tab2.png).

<ContentPage.Content>
            <telerikPrimitives:RadTabView x:Name="TabView">
                <telerikPrimitives:RadTabView.Items>
                    <telerikPrimitives:TabViewItem HeaderText="Home">
                        <telerikPrimitives:TabViewItem.Content>

                            <telerikDataControls:RadListView x:Name="PeopleListView"
                                                             ItemsSource="{Binding}"
                                                             IsItemSwipeEnabled="True"
                                                             SwipeOffset="150, 0, 0, 0"
                                                             SwipeThreshold="10">
                            <!-- ... -->
                            </telerikDataControls:RadListView>

                        </telerikPrimitives:TabViewItem.Content>
                    </telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem HeaderText="Folder">
                        <telerikPrimitives:TabViewItem.Content>
                            <Label Margin="10" Text="This is the content of the Folder tab" />
                        </telerikPrimitives:TabViewItem.Content>
                    </telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem HeaderText="View">
                        <telerikPrimitives:TabViewItem.Content>
                            <Label Margin="10" Text="This is the content of the View tab" />
                        </telerikPrimitives:TabViewItem.Content>
                    </telerikPrimitives:TabViewItem>
                </telerikPrimitives:RadTabView.Items>
            </telerikPrimitives:RadTabView>

    </ContentPage.Content>

[Stefan Nenchev]

Hello Mikhail,

I tried to replicate the behavior you are reporting but was not able to. Can you provide the ListView ItemTemplate that you have set at your end? Is the behavior present each time you run the application or it appears on a random basis?  I have attached the sample for your reference. If convenient, please try modifying it so that the issue is present so we can have a more detailed look.

Have a great rest of the week.

Regards,
Stefan Nenchev
Progress Telerik

[Mikhail]

Hi Stefan,

thank you for the reply. I modified your project and was not able to replicate the problem. I will have to look into my project. My content page was as follows

 

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"

             xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

             xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"

             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

             xmlns:telerikGauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"

             xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"

             xmlns:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

             x:Class="TelerikXamarin.Portable.StartPage">

    <ContentPage.Resources>

        <ResourceDictionary>

             

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.Content>

        <telerikPrimitives:RadTabView x:Name="TabView">

            <telerikPrimitives:RadTabView.Items>

                <telerikPrimitives:TabViewItem HeaderText="Home">

                    <telerikPrimitives:TabViewItem.Content>

 

                        <telerikDataControls:RadListView x:Name="PeopleListView"

                                                             ItemsSource="{Binding}"

                                                             IsItemSwipeEnabled="True"

                                                             SwipeOffset="150, 0, 0, 0"

                                                             SwipeThreshold="10">

                            <telerikDataControls:RadListView.ItemTemplate>

                                <DataTemplate>

                                    <telerikListView:ListViewTemplateCell>

                                        <telerikListView:ListViewTemplateCell.View>

 

 

                                            <Grid Margin="5">

                                                <Grid.ColumnDefinitions>

                                                    <ColumnDefinition Width="Auto"></ColumnDefinition>

                                                    <ColumnDefinition Width="*"></ColumnDefinition>

                                                    <ColumnDefinition Width="Auto"></ColumnDefinition>

                                                </Grid.ColumnDefinitions>

                                                <Grid.RowDefinitions>

                                                    <RowDefinition Height="Auto"></RowDefinition>

                                                    <RowDefinition></RowDefinition>

                                                </Grid.RowDefinitions>

                                                <abstractions:CircleImage

                                                WidthRequest="70"

                                                HeightRequest="70"

                                                Source="{Binding ProfilePictureUrl}"

                                                Aspect="AspectFit"

                                                Grid.RowSpan="2"

                                                Grid.Column="0"

                                                Margin="5">

                                                </abstractions:CircleImage>

                                                <Label Grid.Column="1" Grid.Row="0"

                                                   FontSize="Medium" Text="{Binding Name}"></Label>

                                                <Label Grid.Column="1" Grid.Row="1"

                                                   VerticalTextAlignment="Start" VerticalOptions="Start"

                                                   Text="{Binding Description}"></Label>

                                                <Image Grid.RowSpan="2" Grid.Column="2"

                                                   VerticalOptions="Center" Source="ic_people_outline" WidthRequest="50"

                                                   HeightRequest="50" Opacity="0.35"></Image>

                                            </Grid>

 

 

                                        </telerikListView:ListViewTemplateCell.View>

                                    </telerikListView:ListViewTemplateCell>

                                </DataTemplate>

                            </telerikDataControls:RadListView.ItemTemplate>

 

                            <telerikDataControls:RadListView.ItemSwipeContentTemplate>

                                <DataTemplate>

                                    <Grid Margin="0"

                                      Padding="0"

                                      ColumnSpacing="0"

                                      RowSpacing="0">

                                        <Grid.ColumnDefinitions>

                                            <ColumnDefinition Width="150" />

                                            <ColumnDefinition Width="*" />

                                        </Grid.ColumnDefinitions>

                                        <StackLayout Orientation="Horizontal">

                                            <Button

                                            Margin="0"

                                            BackgroundColor="Red"

                                            BorderRadius="0"

                                            Clicked="SampleClickHandler"

                                            Image="location.png"

                                            WidthRequest="50" />

                                            <Button

                                            Margin="0"

                                            BackgroundColor="Blue"

                                            BorderRadius="0"

                                            Clicked="SampleClickHandler"

                                            Image="mail.png"

                                            WidthRequest="50" />

                                            <Button

                                            Margin="0"

                                            BackgroundColor="Azure"

                                            BorderRadius="0"

                                            Clicked="SampleClickHandler"

                                            Image="phone.png"

                                            WidthRequest="50" />

                                        </StackLayout>

 

                                    </Grid>

                                </DataTemplate>

                            </telerikDataControls:RadListView.ItemSwipeContentTemplate>

                        </telerikDataControls:RadListView>

 

                    </telerikPrimitives:TabViewItem.Content>

                </telerikPrimitives:TabViewItem>

                <telerikPrimitives:TabViewItem HeaderText="Folder">

                    <telerikPrimitives:TabViewItem.Content>

                        <Label Margin="10" Text="This is the content of the Folder tab" />

                    </telerikPrimitives:TabViewItem.Content>

                </telerikPrimitives:TabViewItem>

                <telerikPrimitives:TabViewItem HeaderText="View">

                    <telerikPrimitives:TabViewItem.Content>

                        <Label Margin="10" Text="This is the content of the View tab" />

                    </telerikPrimitives:TabViewItem.Content>

                </telerikPrimitives:TabViewItem>

            </telerikPrimitives:RadTabView.Items>

        </telerikPrimitives:RadTabView>

    </ContentPage.Content>

</ContentPage>

 

The view model was as follows.

 

public class PersonViewModel
{
    public int PersonId { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public string ProfilePictureUrl { get; set; }
}

[Stefan Nenchev]

Hello Mikhail,

I have tested the scenario with a setup similar to yours, according to your latest update, but was still not able to observe the behavior. Did you have the chance to investigate the issue further?  Sharing some additional information, if you have such, will be appreciated.

Regards,
Stefan Nenchev
Progress Telerik