Today a post about creating a PNG from a XAML file. Easy some will says 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 a XAMLReader, and create a visual from the XAML and the put it inside you 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)
               MessageBox.Show("Cannot load the UiElement from the XAML.", "Error", MessageBoxButton.OK);

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 sooner in this blog.

The tips 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(
         // Indicate which control to render in the image
         Stream oStream = new FileStream("out.png", FileMode.Create);
         PngBitmapEncoder encoder = new PngBitmapEncoder();

The resulting app

There is a little drawback: the xaml visual you load must be configured to stretch when putted inside a layout control...
Here is some screenShot of the app running :

Xaml To Png Exporter

The code source is attached to the post.

kick it on DotNetKicks.com