RadCartesianChart sizing issues with RadTabView and RadSegmentedControl

[Angus]

There seems to be an issue with the size of a chart when used with a RadTabView and a RadSegmentedControl. If using the code below, we click into "Tab 2", the chart in "Option 1" is properly sized. However, if we then click into "Option 2" then back out to "Tab 1", and back into "Tab 2", the chart in "Option 1" becomes tiny. This is an issue even when trying all sorts of layout options and it only seems to be a problem in Android (works fine in iOS).

 

 

Below is the XAML:

<?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:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="ChartBug.MainPage"
             x:Name="Self"

             >



    <ContentPage.Content>
        <telerikPrimitives:RadTabView>
            <telerikPrimitives:RadTabView.Items>
                <telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem.Header>
                        <telerikPrimitives:TabViewHeaderItem Text="Tab 1" />
                    </telerikPrimitives:TabViewItem.Header>

                </telerikPrimitives:TabViewItem>
                <telerikPrimitives:TabViewItem>
                    <telerikPrimitives:TabViewItem.Header>
                        <telerikPrimitives:TabViewHeaderItem Text="Tab 2" />
                    </telerikPrimitives:TabViewItem.Header>
                    <telerikPrimitives:TabViewItem.Content>
                        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                            <telerikInput:RadSegmentedControl SelectedIndex="{Binding SelectedIndex, Mode=TwoWay, Source={x:Reference Self}}"
                                 HorizontalOptions="FillAndExpand">
                                <telerikInput:RadSegmentedControl.ItemsSource >
                                    <x:Array Type="{x:Type x:String}">
                                        <x:String>Option 1</x:String>
                                        <x:String>Option 2</x:String>
                                    </x:Array>
                                </telerikInput:RadSegmentedControl.ItemsSource>
                            </telerikInput:RadSegmentedControl>
                            <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                <Grid AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <StackLayout x:Name="Questions">

                                    </StackLayout>


                                    <Grid  x:Name="ChartGrid" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                        <telerikChart:RadCartesianChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                            <telerikChart:RadCartesianChart.HorizontalAxis>
                                                <telerikChart:CategoricalAxis/>
                                            </telerikChart:RadCartesianChart.HorizontalAxis>
                                            <telerikChart:RadCartesianChart.VerticalAxis>
                                                <telerikChart:NumericalAxis/>
                                            </telerikChart:RadCartesianChart.VerticalAxis>
                                        </telerikChart:RadCartesianChart>
                                    </Grid>
                                </Grid>
                            </AbsoluteLayout>
                        </StackLayout>
                    </telerikPrimitives:TabViewItem.Content>
                </telerikPrimitives:TabViewItem>
            </telerikPrimitives:RadTabView.Items>

        </telerikPrimitives:RadTabView>
    </ContentPage.Content>
</ContentPage>

 

And this is the code-behind:

public partial class MainPage : ContentPage, INotifyPropertyChanged
    {

        public new event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string prop)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
        }


        int _selectedIndex = 0;
        public int SelectedIndex
        {
            get => _selectedIndex;
            set
            {
                if (value != _selectedIndex)
                {
                    _selectedIndex = value;
                    ChartGrid.IsVisible = _selectedIndex == 0;
                    Questions.IsVisible = _selectedIndex == 1;
                    RaisePropertyChanged(nameof(SelectedIndex));
                }
            }
        }



        public MainPage()
        {
            InitializeComponent();

            ChartGrid.IsVisible = _selectedIndex == 0;
            Questions.IsVisible = _selectedIndex == 1;
        }


    }

 

[Didi]

Hi Angus,

I have tested the provided code and reproduced the behavior with the chart visualization. The behavior is expected as when switching the TabView items, the visual state of the components is reset. In order to prevent this, you will need to set the TabView.IsContentPreserved property to True. For more details about this please check the TabView KeyFeatures topic: https://docs.telerik.com/devtools/xamarin/controls/tabview/tabview-key-features 

The definition of the IsContenPreserved is as follow:

• IsContentPreserved: This property could be used to preserve the tabs content when switching them. In this way, the visual state of the components inside each tab wouldn't be reset. When IsContentPreserved is set to True, the tabview does not unload/reload the tabs' content. By default the property is False.

Example: 

 <telerikPrimitives:RadTabView IsContentPreserved="True">

Regards,
Didi
Progress Telerik