Image from a “not visible” chart control

Hi there,

I'm trying to get image from a “not visible” chart control, here's the code:

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

using Mindscape.WpfElements.Charting;

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            Image myImage = new Image();
            myImage.Source = GetBitmap();

            Grid myStackPanel = new Grid();
            myStackPanel.Children.Add(myImage);
            this.Content = myStackPanel;
        }

        public RenderTargetBitmap GetBitmap()
        {
            int height, width;
            height = 800;
            width = 800;
            var size = new Size(height, width);

            Grid mainContainer = new Grid();
            mainContainer.HorizontalAlignment = HorizontalAlignment.Stretch;
            mainContainer.VerticalAlignment = VerticalAlignment.Stretch;

            Chart ch = new Chart();
            ch.HorizontalAlignment = HorizontalAlignment.Stretch;
            ch.VerticalAlignment = VerticalAlignment.Stretch;

            var d = new LineSeries();
            var ps = new List<Point>();
            ps.Add(new Point(0, 0));
            ps.Add(new Point(10, 10));
            ps.Add(new Point(20, 20));
            d.ItemsSource = ps;         
            ch.Series.Add(d);
            ch.Title = "Test";
            mainContainer.Children.Add(ch);

            mainContainer.Measure(size);    
            mainContainer.Arrange(new Rect(size));

            PngBitmapEncoder encoder = new PngBitmapEncoder();
            RenderTargetBitmap render = new RenderTargetBitmap(width,height,96,96,PixelFormats.Pbgra32);
            render.Render(mainContainer);

            return render;
        }    
    }
}

But i got empty image with legend and title only,

How to make the graph visible too?

Hello Slavik

This will be because some of parts of the Chart control require the control to be loaded for the axes to be updated and the data to be rendered. An internal dispatcher call we use for improved performance may also be affecting this. One option to work around this will be to load the chart in a near-invisible window to cause it to load. Next week I will look to see if there is a better solution. If not, I'll try provide sample code to use this window technique.

Jason Fauchelle

Hi Jason

I will hope to better solution and sample code does not prevent, thanks.

Slavik

Hello

Here is some sample code that uses an invisible window to fully load the chart and then create an image from it.

public MainWindow()
{
  InitializeComponent();

  ExportChart();
}

private int _width = 800;
private int _height = 800;
private Chart _chart;
private Window _window;

private void ExportChart()
{
  var size = new Size(_height, _width);

  _chart = new Chart();
  _chart.Width = _width;
  _chart.Height = _height;

  var d = new LineSeries();
  var ps = new List<Point>();
  ps.Add(new Point(0, 0));
  ps.Add(new Point(10, 10));
  ps.Add(new Point(20, 20));
  d.ItemsSource = ps;
  _chart.Series.Add(d);
  _chart.Title = "Test";

  _chart.Arrange(new Rect(size));
  ForceRender(_chart);

  Dispatcher.BeginInvoke(new Action(CreateImage), DispatcherPriority.ApplicationIdle);
}

private void CreateImage()
{
  RenderTargetBitmap render = new RenderTargetBitmap(_width, _height, 96, 96, PixelFormats.Pbgra32);
  render.Render(_chart);

  Image myImage = new Image();
  myImage.Source = render;

  Grid myStackPanel = new Grid();
  myStackPanel.Children.Add(myImage);
  this.Content = myStackPanel;
  _window.Close();
}

private void ForceRender(FrameworkElement chart)
{
  ScrollViewer panel = new ScrollViewer();
  panel.Content = chart;
  panel.HorizontalScrollBarVisibility = ScrollBarVisibility.Visible;
  _window = new Window() { Content = panel };
  _window.WindowStyle = WindowStyle.None;
  _window.AllowsTransparency = true;
  _window.Opacity = 0.001;
  _window.ShowInTaskbar = false;
  _window.Width = chart.Width;
  _window.Height = chart.Height;
  _window.Show();
}

The ExportChart method starts by creating the chart just like you did. Then it calls the ForceRender method which creates the invisible window to load the chart. Next I use a Dispatcher to call a method that creates the RenderTargetBitmap and uses it to create the image. At the end of this method I then close the invisible window.

Jason Fauchelle

Hello, Jason

Thank you for help, this is what I need.

Best regards, Slavik