title: Render image from UserControl that has LiveChart
body: <p>I kept rendering a black/blank image of a UserControl not shown in window. The UserControl contains LiveChart's CartesianChart and few UIElements. First I borrowed solutions from <a href="https://stackoverflow.com/questions/46932672/c-sharp-chart-to-image-with-livecharts">SO: C# chart to image with LiveCharts
  </a> and <a href="https://github.com/Live-Charts/Live-Charts/blob/master/Examples/Wpf/CartesianChart/Chart%20to%20Image/ChartToImageSample.xaml.cs" rel="nofollow noreferrer">Github: Live-Charts/ChartToImageSample.xaml.cs</a> and apply <code>SaveToPng</code> and <code>EncodeVisual</code> on a simple UIControl generated in runtime (not added or shown in window), which works.</p>
  
  <pre><code>Canvas control = new Canvas() { Width=100, Height=100, Background = new SolidColorBrush(Colors.Pink)};
  control.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
  control.Arrange(new Rect(0, 0, control.DesiredSize.Width, control.DesiredSize.Height));
  control.UpdateLayout();
  SaveToPng(control, @"C:\Foo.png");
  
  private void SaveToPng(FrameworkElement visual, string fileName)
  {
      PngBitmapEncoder encoder = new PngBitmapEncoder();
      EncodeVisual(visual, fileName, encoder);
  }
  
  private static void EncodeVisual(FrameworkElement visual, string fileName, BitmapEncoder encoder)
  {
      RenderTargetBitmap bitmap = new RenderTargetBitmap((int)visual.ActualWidth, (int)visual.ActualHeight, 96, 96, PixelFormats.Pbgra32);
      bitmap.Render(visual);
      BitmapFrame frame = BitmapFrame.Create(bitmap);
      encoder.Frames.Add(frame);
      using (FileStream stream = File.Create(fileName)) encoder.Save(stream);
  }
  </code></pre>
  
  <p>But when I applied the same logic to a UserControl</p>
  
  <pre><code>UserControl control = new UserControl(params)
  // canvas.Children.Add(control);  &lt;-- if comment out, output blank/black image
  control.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
  control.Arrange(new Rect(0, 0, control.DesiredSize.Width, control.DesiredSize.Height));
  foreach (CartesianChart cc in FindVisualChildren&lt;CartesianChart&gt;(control))
  {
      cc.Update(true, true); //force chart redraw
  }
  control.UpdateLayout();
  SaveToPng(control, @"C:\Foo.png");
  
  &lt;!-- UserControl XAML --&gt;
  &lt;UserControl&gt;
     &lt;Grid&gt;
        &lt;Border&gt;
           &lt;Grid&gt;
              &lt;Label&gt;&lt;/Label&gt;
              &lt;Label&gt;&lt;/Label&gt;
              &lt;Label&gt;&lt;/Label&gt;
              &lt;CartesianChart DisableAnimations="True"&gt;&lt;/CartesianChart&gt;
           &lt;/Grid&gt;
        &lt;/Border&gt;
     &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>That output a blank/black image. And only when I add UserControl into a UIControl existed and visible on the window/XAML will the UserControl gets rendered properly to an image (e.g. <code>canvas.Children.Add(lc)</code>). I then also tried the solution described in <a href="https://stackoverflow.com/questions/5189139/how-to-render-a-wpf-usercontrol-to-a-bitmap-without-creating-a-window">SO: How to render a WPF UserControl to a bitmap without creating a window</a>, but I get the identical result - that is I need to first add this UserControl to a visible UIControl, whether or not I perform <code>UpdateLayout</code> on the UserControl.</p>
  
  <p>Why the first example (Canvas) gets rendered, but not the second example (UserControl)? What are the difference and how can I fix this?</p>