Chart in tab control not displaying properly on first render

Nov 29, 2016 at 7:01 PM
Edited Nov 29, 2016 at 7:37 PM
When a chart control is on a tab item that is initially hidden, the chart shows the negative area when it is first displayed.

Image

Refreshing the item source renders it correctly:

Image

Looking at the source, the property Grid MainChartArea= (Grid) VisualTreeHelper.GetChild(chart, 0) throws an exception"Specified index is out of range or child at index is null" in updateChartGridProportions(). I think this is the same issue that dionesf reported in Feb.

To recreate:

<Window x:Class="WPFMetroUIChart.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPFMetroUIChart"
    xmlns:GAGraph="clr-namespace:GravityApps.Mandelkow.MetroCharts;assembly=GravityApps.Mandelkow.MetroCharts"
    mc:Ignorable="d"
    Title="MainWindow" Height="500" Width="500">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <Button Content="Chart" Click="Button_Click" Width="40" Height="20" />
    <TabControl Grid.Column="1">
        <TabItem Header="Chart1">
            <GAGraph:ClusteredColumnChart ChartTitle="Sales" ChartSubTitle="Total"  >
                <GAGraph:ClusteredColumnChart.Series>
                    <GAGraph:ChartSeries SeriesTitle="Series Title" DisplayMember="Key" ValueMember="Amount" ItemsSource="{Binding Path=Store_Sales_Chart}" />
                </GAGraph:ClusteredColumnChart.Series>
            </GAGraph:ClusteredColumnChart>
        </TabItem>
        <TabItem Header="Chart2" >
            <GAGraph:ClusteredColumnChart ChartTitle="Sales" ChartSubTitle="Total"  >
                <GAGraph:ClusteredColumnChart.Series>
                    <GAGraph:ChartSeries SeriesTitle="Series Title" DisplayMember="Key" ValueMember="Amount" ItemsSource="{Binding Path=Store_Sales_Chart}" />
                </GAGraph:ClusteredColumnChart.Series>
            </GAGraph:ClusteredColumnChart>
        </TabItem>
    </TabControl>
</Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Runtime.CompilerServices;
using System.ComponentModel;

namespace WPFMetroUIChart
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
        Populate_Sales_Chart();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Populate_Sales_Chart();
    }

    private void Populate_Sales_Chart()
    {
        Store_Sales_Chart = new ObservableCollection<ChartClass>();
        Store_Sales_Chart.Add(new ChartClass() { Key = "CW", Amount = 123.11 });
        Store_Sales_Chart.Add(new ChartClass() { Key = "LW", Amount = 134.22 });
        Store_Sales_Chart.Add(new ChartClass() { Key = "LY", Amount = 112.33 });
    }

    private ObservableCollection<ChartClass> _Store_Sales_Chart;
    public ObservableCollection<ChartClass> Store_Sales_Chart
    {
        get { return _Store_Sales_Chart; }
        set { _Store_Sales_Chart = value; OnPropertyChanged(); }
    }

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
}

public class ChartClass
{
public string Key { get; set; }
public decimal? Value { get; set; }
public double Amount { get; set; }
}