XAML to PNG Converter...

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:

The code source is attached to the post.

CodeProject