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.