Yet another blog about WPF, Surface, SL, MVVM, NUI....

Hello,

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)
            {
               _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 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(
               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 putted inside a layout control...
Here is some screenShot of the app running :

The code source is attached to the post.