Silverlight 4 toolkit, charting and lineSeries is null

Question

Hi,

I create a Silverlight Chart, with the Silverlight 4 toolkit, the April release.

Consider the following chart:

 <Grid x:Name="LayoutRoot" Background="White">
  <Charting:Chart Title="Chart to test" Name="MySuperChart">
   <Charting:LineSeries x:Name="MyLineSeries" Title="Something" />
  </Charting:Chart>
 </Grid>

So far so good. I can access the Series in the chart by MySuperChart.Series[0] But when I try to reference MyLineSeries, it appears to be null. Full view

Answer 1

This is an interesting little gotcha. It helps if you look a bit under the hood at how the variable MyLineSeries is created and assigned. Navigate to the definition of the InitializeComponent method. You will end up at the MainPage.g.cs generated file. It will contain this field:-

internal System.Windows.Controls.DataVisualization.Charting.LineSeries MyLineSeries;

and in the InitializeComponent you will find this line:-

this.MyLineSeries = ((System.Windows.Controls.DataVisualization.Charting.LineSeries)(this.FindName("MyLineSeries")));

So on the surface of it by the time the call to InitializeComponent in your constructor has completed the MyLineSeries should have been assigned a value. However as you can see its still null, hence it can be concluded that FindName("MyLineSeries") failed to find the series. So the question is why did it fail?

Why Doesn't FindName Work?

FindName searches what is refered to in the documentation as the "object tree", looking for an object that has the name specified (there are added complications of what are known as namescopes but that is not at play here). Typically objects end up in the "object tree" through common base types like Panel or ContentControl which have propeties such as Children and Child respectively. These properties are specified in the ContentProperty attribute on the classes which allows for the UI structure to be described more naturally. E.g.:-

<Button x:Name="MyButton">
  <Image x:Name="MyImage" ... />
</Button>

Instead of

<Button x:Name="MyButton">
  <Button.Child>
    <Image x:Name="MyImage" ... />
  </Button.Child>
</Button>

The Chart control, on the other hand, is not a simple Panel derivative and has a lot more work to do to build its UI. In the case of the Chart the ContentPropertyAttribute specifies the Series collection parameter. This allows your more natural Xaml:-

<Charting:Chart Title="Chart to test" Name="MySuperChart">
  <Charting:LineSeries x:Name="MyLineSeries" Title="Something" />
</Charting:Chart>

However because Chart has a lot of extra work in order do determine what exactly should be in the "object tree" that will represent its final UI the series collection items don't immediately become part of the "object tree". As result the FindName in the InitializeComponent simply doesn't find them.

Work Around - Option 1

You could use your knowledge of the ordinal position of "MyLineSeries" in the chart to handle the assignment of a MyLineSeries variable in the constructor. Remove the x:Name="MyLineSeries" from the Xaml then in code:-

public partial MainPage : UserControl
{
  private LineSeries MyLineSeries;

  public MainPage()
  {
    InitializeComponent();
    MyLineSeries = (LineSeries)MySuperChart.Series[0];
  }
}

Work Around - Option 2

You could wait until the series is available in the "object tree" which is true once the containing UserControl has fired its Loaded event:-

public partial MainPage : UserControl
{
  public MainPage()
  {
    InitializeComponent();
    Loaded += (s, args) =>
    {
      MyLineSeries = (LineSeries)FindName("MyLineSeries");
    }
  }
}