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

RadCartesianChart sizing issues with RadTabView and RadSegmentedControl

1 Answer 9 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Angus
Top achievements
Rank 1
Angus asked on 30 Nov 2020, 08:06 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Didi
Telerik team
answered on 02 Dec 2020, 07:31 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart
Asked by
Angus
Top achievements
Rank 1
Answers by
Didi
Telerik team
Share this question
or