Telerik Forums / UI for Xamarin Forum / TabView /

Tab doesn't show contents

4 posts, 1 answers

Mikhail

12 posts

Member since:
Jul 2017
Posted 17 Jul Link to this post

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>

tab1.png

tab2.png
Answer
Stefan Nenchev
Admin

503 posts
Posted 18 Jul Link to this post

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
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

TabViewHeaderTest.zip
Mikhail

12 posts

Member since:
Jul 2017

Posted 18 Jul Link to this post

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; }

}

Have a great week,

Mikhail
Stefan Nenchev
Admin

503 posts

Posted 21 Jul Link to this post

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
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

Tab doesn't show contents

Mikhail

Stefan Nenchev

Mikhail

Stefan Nenchev