This is a post about creating a PNG from an XAML file. Easy, some will say, but we will see some more tips:

How to create a screenshot from a control in the size you want (not the actual size)
How to load an external XAML file and display it inside your application

How to Load an External XAML

This snippet will use an XAMLReader, and create a visual from the XAML and then put it inside your application:

Microsoft.Win32|>.OpenFileDialog dialog = new Microsoft.Win32|>.OpenFileDialog();
         dialog.Title = "Select the XAML file.";
         dialog.AddExtension = true;
         dialog.CheckFileExists = true;
         dialog.DefaultExt = ".xaml";
         dialog.Filter = "Xaml files |*.xaml";
 
         if (dialog.ShowDialog() == true)
         {
            String path = dialog.FileName;
            UIElement visual = 
		XamlReader.Load(System.Xml.XmlReader.Create(path)) as UIElement;
            if (visual != null)
            {
               _docker.Children.Add(visual);
            }
            else
            {
               MessageBox.Show("Cannot load the UiElement from the XAML.", 
					"Error", MessageBoxButton.OK);
               this.Close();
            }
         }

Quite simple in fact.

How To Create a Screenshot in the Size You Want...

Then to create a sample from a control or anything which is a visual, you will use a different syntax than the one presented earlier in this blog.

The tip is to create a brush from the visual, and fill a Rectangle in a drawingContext.

Here is the code:

Visual theVisual = _docker; //Put the aimed visual here.
 
         //Get the size you wants from the UI
         double width = Convert.ToDouble(_widthTextB.Text);
         double height = Convert.ToDouble(_heightTextB.Text);
 
         if (double.IsNaN(width) || double.IsNaN(height))
         {
            throw new FormatException("You need to indicate the Width 
				and Height values of the UIElement.");
         }
         Size size = new Size(width, height);
 
         DrawingVisual drawingVisual = new DrawingVisual();
         VisualBrush vBrush = new VisualBrush(theVisual);
 
         using (DrawingContext dc = drawingVisual.RenderOpen())
         {
            dc.DrawRectangle(vBrush, null, new Rect(new Point(), size));
         }
 
         RenderTargetBitmap render = new RenderTargetBitmap(
               Convert.ToInt32(1900),
               Convert.ToInt32(1200),
               96,
               96,
               PixelFormats.Pbgra32);
         // Indicate which control to render in the image
         render.Render(drawingVisual);
         Stream oStream = new FileStream("out.png", FileMode.Create);
 
         PngBitmapEncoder encoder = new PngBitmapEncoder();
         encoder.Frames.Add(BitmapFrame.Create(render));
         encoder.Save(oStream);
         oStream.Flush();
         oStream.Close();

The Resulting App

There is a little drawback: the XAML visual you load must be configured to stretch when put inside a layout control...
Here is a screenshot of the app running:

Xaml To Png Exporter

The code source is attached to the post.

CodeProject

XAML to PNG Converter...