Can't get labels and title to show up in saved chart (C#.NET, System.Windows.Controls.DataVisualization.Charting)

Question

I'm generating a chart in my code, and displaying it on the screen, and it looks fine: a nice curve with X and Y axis labels.

But when I go to save it as an image, the labels and title are blacked out.

Here's the xaml for the chart...

                         <chartingToolkit:Chart  Name="chart"  Title="Test Results" VerticalAlignment="Top" Height="450" Width="450">
                            <chartingToolkit:LineSeries DependentValuePath="Value" IndependentValuePath="Key"  ItemsSource="{Binding}" IsSelectionEnabled="True" Title=""   Foreground="Black"  Background="Blue" BorderBrush="Blue">
                                <chartingToolkit:LineSeries.DataPointStyle>
                                    <Style TargetType="{x:Type chartingToolkit:LineDataPoint}">
                                        <Setter Property="Width" Value="2"/>
                                        <Setter Property="Height" Value="2"/>
                                    </Style>
                                </chartingToolkit:LineSeries.DataPointStyle>
                            </chartingToolkit:LineSeries>

                            <chartingToolkit:Chart.LegendStyle>
                                <Style TargetType="Control">
                                    <Setter Property="Width" Value="0"/>
                                    <Setter Property="Height" Value="0"/>
                                </Style>
                            </chartingToolkit:Chart.LegendStyle>
                        </chartingToolkit:Chart>

And the save image method:

    private void buttonSaveImage_Click(object sender, RoutedEventArgs e)
    {

        double printScale = 96;  // pixels per inch


        // RenderTargetBitmap/Render renders the GUI element in the context of the parent control.
        // The area of the parent control that is not the desired element is masked in black pixels.
        // We render the chart inside the area of the parent, then crop the area of the chart from the larger image.
        renderBitmap = new RenderTargetBitmap((int)chart.ActualWidth, (int)chart.ActualHeight, printScale, printScale, PixelFormats.Default);


        // store the rendered chart to the bitmap
        renderBitmap.Render(chart);

        BitmapEncoder encoder = new JpegBitmapEncoder();
        string filename = String.Empty;
        // pop up save file dialog, get file name & encoder type (jpg, bmp, png, etc.)
        if (TryGetGraphicFilePath(ref filename, ref encoder))  
        {
            encoder.Frames.Add(BitmapFrame.Create(renderBitmap));
            FileStream fs = new FileStream(filename, FileMode.Create);
            encoder.Save(fs);
            fs.Flush();
            fs.Close();
        }
    }

Any thoughts?

BTW, the techniques I'm using are new to me; I'm pretty far out on the thin ice. I've tried googling, but I'm coming up empty. I would certainly appreciate any help. Thanks!

Answer 1

Try wrapping the chart element in grid with a white background, then in buttonSaveImage_Click try to render the grid instead of the chart.

Hope it works