Import 3D models from almost any 3D file with new major update of Ab3d.PowerToys library

by abenedik 27. November 2014 23:43

I am really happy that after a long development all great new features of Ab3d.PowerToys library are now available.

The biggest new feature is that now it is possible to import 3D models into WPF or WinForms application from almost any 3D file – including Collada, fbx, blend, dxf, ase, lwg and many more (see http://assimp.sourceforge.net/main_features_formats.html).

This is possible with help of Open Source Assimp importer library and a new Ab3d.PowerToys.Assimp helper library that converts Assimp’s Scene object into WPF 3D objects.

For example the following XAML imports a Collada duck.dae file:

<assimpVisuals:AssimpModelVisual3D Source="/Resources/duck.dae" 
                            Position="0 0 0" PositionType="Center"
                            SizeX="100"//>

And the result is of course the standard Collada duck 3D model:

Collada duck model opened with Ab3d.PowerToys.Assimp

And what is more, just as Assimp importer is free to use, the new Ab3d.PowerToys.Assimp library is also free to use without need to purchase a commercial version of Ab3d.PowerToys (when not used with commercial version of Ab3d.PowerToys, Ab3d.PowerToys.Assimp is distributed under MIT license).

 

And today I have many other very good news for you.

 

Let’s continue with presenting you a whole new sample project – Ab3d.PowerToys.AssimpViewer.

This project uses Assimp library to import 3D models from file and show 3D model in the application. What makes it very interesting is that it has some advanced features like:

  • Shows objects names and hierarchies 
  • Shows detailed information about 3D objects
  • Allows object selection with mouse
  • Showing bounding box, normals and triangles for selected object.

For example the following image shows selected duck model with bounding box, triangles and normals:

AssimpViewer with shown bounding box, normals and triangles

This makes it similar to what is possible with Viewer3ds application. The main difference is that for AssimpViewer you can see the whole source code.

This application also demonstrates a new ModelDecoratorVisual3D class that makes showing selected object incredibly simple – for example:

<visuals1:ModelDecoratorVisual3D x:Name="SelectedModelDecorator" 
                                     ShowBoundingBox="False" BoundingBoxLineColor="Red" BoundingBoxLineThickness="2"
                                     ShowNormals="True" NormalsLineColor="Blue" NormalsLineThickness="1"
                                     ShowTriangles="True" TrianglesLineColor="Green" TrianglesLineThickness="1"
                                     TargetModel3D="{Binding ElementName=MyModel3D}"
                                     RootModelVisual3D="{Binding ElementName=ContentRootVisual3D}"/>

As you can see, we just set the target model (selected model), parent Visual and then decide how we want to decorate the selected model – with bounding box, with normal or with triangles. Super simple.

Another improvement from the new version of Ab3d.PowerToys library is a better and nicer CameraAxisPanel – as seen in the lower right corner the new version now shows real 3D arrows instead of 3D lines with arrows. This looks much nicer.

This sample is still under construction (version 0.8). I have big plans with it. I want to turn it into a simple 3D editor where you will be able to add multiple 3D objects from multiple files, move the models around, scale and rotate them. I know that many customers are working on some similar applications. Creating such sample application could mean a huge development time saving for many of them.

 

And now to some other new features.

Many customers are concerned about WPF 3D performance when they need to show very complex 3D models with a lot of 3D parts. One reason for performance problem can be that WPF is using DirectX 9 rendering and that it does not have an optimal rendering pipeline. But many times the reason for slow rendering is that simply too many GeometryModel3D objects are rendered.

This can cause problems because each GeometryModel3D is rendered with using its own DirectX draw call. Draw call is a low level command, that instructs graphics driver and graphics card how to draw one object. Because graphics drivers need to prepare many things before the data from draw call can be send to graphics card, draw calls are very expensive operations. This is also true for DirectX and high end 3D games – usually games tend to keep number of draw calls per frame under 3000. Higher numbers can slow down rendering regardless of the hardware.

With Ab3d.PowerToys we cannot improve the WPF 3D rendering pipeline, but with a new ModelOptimizer it is possible to significantly reduce the number of required draw calls and therefore improve rendering performance. This is done with analyzing the model and combing all models that have the same material into one model – so that only one draw call is needed instead of many.

The following image shows the ModelOptimizer sample that shows (marked with red arrow) that ModelOptimizer has reduces number of objects from 3381 to only 30. 

ModelOptimized sample

This had significant impact on performance. With optimized model the frame rate was easily at 60 FPS (on i7 3770 CPU and GeForce 560 Ti). But when the original model was shown, the FPS dropped to 14.

A drawback of using ModelOptimizer is that you loose the original object structure (but this can be solved with saving the hierarchy and individual objects data into some custom data structure before optimizing the model).

 

There have been some other improvements. 

For example showing 3D models from obj files has been simplified with adding ObjModelVisual3D that can be used in XAML. MaterialTypeConverter has also been improved so that it now Visual Studio 2013 designer can show textures on 3D models. Updating 3D lines has also been improved to allow more flexibility when the lines are updates and when not.

To simplify debugging there are now many extension methods that can be called from Visual Studio Immediate Window to show you many details of the 3D object (see “Dump and Name sample” for more info).

Now it is also very easy to set name to any Model3D object, Visual3D, MeshGeometry or Material – this can be simply done with new extension method: SetName. To get the name, you just call GetName method.

The whole list of improvements and fixes is really long. You can see it on the PowerToys web page (scroll down to versions history).

 

Finally I would like describe my future plans. I have already mentioned that I want to improve AssimpViewer sample. To do that I will add new helper objects that will make moving, rotating and scaling selected object very easy. I am also planning to add support for reading compiled 3D model files (Visual Studio 2013 can compile 3D models from fbx, dae and obj files into its own file format). This would remove the need to use Assimp importer in your projects.

And I am also working hard on a new DirectX 11 rendering engine that should eradicate rendering performance problems and will also bring improved rendering quality to WPF 3D world. I hope that I will be able to release a first open beta version in the beginning of the next year.

 

As always, the existing customers can get the latest version of Ab3d.PowerToys (and Ab3d.PowerToys.Assimp library) from their User Account pages. Others please install the new evaluation version form our Downloads page.

 

And the final great news is a reward to all of you that have read this blog post to the end – to get the reward check out our web site today!

Tags:

Ab3d.PowerToys

WPF trends in Windows UI technologies

by abenedik 1. October 2014 11:16

I have just stumbled upon Google trends web site that can show how the search terms change over time.

I thought it would be very useful to check how WPF is working (is it really dead?).

The results were very interesting. Therefore I have decided to share them with:

Google trends for WPF, XAML, WinRT and WinForms

 

As you can see the worldwide search amount for WPF has decreased a little bit in the last 2 years, but it is still very high. Also its comparison with WinForms and WinRT shows that is used very much. Especially WinRT search volume shows that this was a big fail for Microsoft.

The differences between the countries are also interesting - the decrease of WPF usage was quite high in US, but in Germany WPF search indicates that is still used as much as in its best times.

In the previous image I have excluded Silverlight from the graph. The reason for that is that Silverlight is still getting much more search terms that WPF and would therefore worsen the clarity of the results. Let's see:

Google trends for WPF, XAML, WinRT, WinForms and Silverlight

For me this is very surprising. I was not expecting so much search volume for Silverlight. Maybe the reason for that is that users how build WPF or WinForms applications are many times searching for with .Net or c# search term, but when they search for Silverlight, they use this keyword more times because of the differences between standard .Net and Silverlight's version of .Net.

 

The Google trends web site is very interesting and can show many insights into what is in. Check it by yourself - the following link shows the last graph with Silverlight included: https://www.google.com/trends/explore#q=WPF%2C%20WinRT%2C%20XAML%2C%20WinForms%2C%20Silverlight&cmpt=q

Tags:

General

New version of best svg reader for .Net comes with new WinForms samples

by abenedik 30. September 2014 22:24

I am happy to announce that a new version of Ab2d.ReaderSvg has been published.

Read svg files in WinForms application

Let's start with a screenshot:

read svg file in WinForms application

As seen from the title of the window, this screenshot shows the new sample application that show how to read svg files in WinForms application with Ab2d.ReaderSvg library.

On the right side the image shows a scaled part of svg image – notice the nicely antialiazed scaled vector graphics where all the details are preserved when scaling. This part is shown with using an ElementHost control that can host WPF content in WinForms application. The content of the ElementHost control is set to a ZoomPanel control that allows users to zoom and pan the svg content.

The sample also shows a GDI+ bitmap in the lower left part of the application. It was created with reading the svg file with Ab2d.ReaderSvg library, then calling RenderToBitmap method (implemented in this version) to get WPF's bitmap and then converting the WPF's bitmap to GDI+ bitmap.

To summarize, the sample shows that it is very easy to read svg files in WinForms applications with Ab2d.ReaderSvg library. The recommended way is to use ElementHost control to preserve the vector graphics drawn by WPF. This way it is also possible to use the ZoomPanel control. When using ElementHost is not an option, it is also possible to convert the read svg file into GDI+ bitmap and show it inside PictureBox control.

 

Svg to png converter

This release also comes with a SvgToPngConverter console application. It can be used to batch convert many svg files into png files. It allows users to specify the bitmap size. Because the application comes with source code, it is possible to adjust it in any way. With uncommenting a few lines of code, the application can be changed to svg to jpg converter.

One possible usage of the SvgToPngConverter is to use it for online svg to png converter. The reason for that is that it is not recommended to use WPF objects inside web server (because potentially there can be some memory leaks that can become problematic when the web server is running for weeks or months). To overcome this problem, it is recommended to create WPF objects in a separate AppDomain or process. And the easiest way to do that is to use console application. So in our case, when the user (or Silverlight or some other client application) would upload svg file to the web server, the web server would call the SvgToPngConverter and provide the client with the created png file.

 

Those two samples should convince you that Ab2d.ReaderSvg can very successfully used to be read svg file in non WPF platforms also.

 

New features of Ab2d.ReaderSvg v5.5

Of course, there are also some other improvements and new features in the library.

The following is the full list:

  • Added RenderToBitmap method to render the read svg image to bitmap. The method allows users to render to custom bitmap size and to specify custom background brush.
  • Added FlattenHierarchy method that flattens the hierarchy of the read svg objects so that all the objects are children on one root Canvas.
  • Correctly handle "stroke-width" attribute in text element. Also does not convert text to path when stroke is set to some value but stroke-width is set to 0.
  • Fixed using some very small values for stroke thickness and values written in scientific format (1.23E-12).
  • Improved ReaderSvg startup and reading performance with optimizing Regex objects creation.

 

As always, if you find any svg files that do not open correctly or have any feature requests, please fill free to contact me.

Tags:

ReaderSvg

Improved performance and WinForms sample in new version of Ab3d.PowerToys

by abenedik 14. September 2014 22:52

I am happy to announce that a new version of Ab3d.PowerToys has been published.

The new version has the following new features:

  • Greatly improved performance of SphereVisual3D and BoxVisual3D.
  • Fixed updating 3D lines when Viewport3D is inside TabControl or when the Viewport3D is moved from one control to another (for example in Avalon dock when the docking of Viewport3D is changed)
  • Optimized LinesUpdater to minimize the number of newly created object each rendering frame.
  • Added WinForms sample that shows how easy is to show 3D graphics in WinForms with embedded WPF and Ab3d.PowerToys

The biggest new feature is performance improvement that is achieved by caching the MeshGeometry3D for the sphere and box models. Before each time the position or size of the sphere or box was changed, the whole MeshGeometry3D was regenerated. Now all the spheres (with the same segment count) and boxes share the same MeshGeometry3D. To create the sphere and box at the specified position and size, a MatrixTransform is used.

The biggest performance gain of the new rendering is get when the spheres and boxes are animated – when the position or size is changed. Because now it is not needed to recreate the whole MeshGeometry3D the animation can be much smoother – on some computers even more than 20 times faster.

Because the new model generation algorithm reuses the MeshGeometry3D, much less data is sent to graphics card and therefore the models can be rendered much faster. On some computers more than 5 times better frame rate can be achieved. 

To test the new functionality a new sample was added to the Ab3d.PowerToys samples. The following screenshot shows the sample running and showing the number of spheres, triangles and positions and the current frame rate (on Intel i7 3770 and a more than 2 years old NVidia 560 GTX Ti):

WPF 3D performance with Ab3d.PowerToys

 

Sceptics of WPF 3D can see that when WPF 3D is used property it can have quite decent performance – animating (changing size) for 3375 spheres (more than 3 million triangles and more than 17 million positions) runs at 33 frames per second.

The new sample can be also very appealing visually – the following image shows one of such interesting screenshots (animated version is even better):

WPF 3D performance with Ab3d.PowerToys

 

Delivering the best possible performance for WPF 3D graphics have always been our goal. Therefore I am planning to add some additional performance improvement to the next version – this time improving performance of complex 3D models read with Reader3ds or some other model importer.

I would also like to say a few more things about using WPF 3D inside WinForms application. 

And now to WinForms. Surprisingly a lot of .Net developers are still using WinForms. For them I have prepared two samples that shows how easy is to add 3D graphics to WinForms. It is not needed to spend half a year to learn DirectX or some other game engine. With using ElementHost control the developers can enjoy in using the easiest 3D API: WPF 3D with Ab3d.PowerToys.

The first sample that comes with the new version of Ab3d.PowerToys library show that with a little bit more than 200 lines of c# code, it is possible to create an interesting 3D scene with dynamic objects that change color on mouse actions. The following image shows a screenshot of the sample:

WPF 3D inside WinForms

 

WinForms developer will be glad to hear that that do not need to use XAML, binding or any other new concept that is introduced by WPF. 

On the other hand the second sample shows that it is also possible to define the whole 3D scene in XAML. When using WinForms designer this scenario is very well supported: after adding ElementHost to the form, it is possible to click on a small right arrow in the upper right corner and from a drop down menu select from all the WPF’s UserControls in the solution. This way it is possible to design the scene in XAML and use Visual studio designer to preview the 3D scene.

 

I would like to conclude this blog post with the following announcement: I am already working on next major released of Ab3d.PowerToys. It will contains the already mentioned functionality to optimize the 3D models for best performance. But the biggest new feature will be added support for importing 3D models from almost all 3D file formats.

Tags:

Ab3d.PowerToys

New major release of Ab2d.ReaderWmf (metafile importer for WPF) is available

by abenedik 12. July 2014 15:56

I am happy to announce that I have just released a new major release of Ab2d.ReaderWmf library. This adds some great new features to the best metafile importer for WPF.

Metafiles are usually rendered with GDI+ rendering engine. Because there are many differences between GDI+ and WPF, some metafile features cannot be rendered in WPF. Until now such a problematic feature was usage of patterns and specific bitmap function (dwRop) in metafiles. They were used many times to darken or lighten the color of shapes. The following image shows how such metafile can look when it is imported into WPF:

Until now, this could be prevented by disabling patterns. This showed the shapes with using the original color:

But the results were quite far from the original colors. 

The new version of ReaderWmf analyzes the pattern and the used bitmap function and determines how the original color should be changed. Using this new logic produces the accurate results:

The following is another example of using pattern brushes with shadows in some Word shapes:

With new version of ReaderWmf the result is correct:

As always the new version also brings some other new features and fixes. Here is the full list:

  • Added ConvertPatternBrushesToColor to ReaderWmf - use data from pattern brush to change the color of the shape
  • Added DisableTextScaling property - in case text is wrongly scaled, user can disable scaling of text
  • Improved reading geometries when rectangle or ellipse have both Canvas position (Canvas.Left or Canvas.Top) and transformation set.
  • Improved xaml writer to prevent writing Canvas.Left = "0" and Canvas.Top = "0" (zero values can be skipped).
  • Prevented writing "Canvas.Left" and "Canvas.Top" properties in XAML two times.
  • Added IgnoreRootElementSize property to GeometrySetting - added possibility to remove the transformations or RectangleGeometry based on the size or root element.
  • Fixed problems where some separate lines were connected with additional line but they should not be.
  • Improve reading metafiles that have negative width or height specified in metafile header
  • Prevented throwing "The method or property is only available in Professional version!" under some circumstances.
  • Fixed not showing some texts under some circumstances.

Tags:

ReaderWmf

New version of Ab3d.PowerToys brings improved support for touch and better user experience when rotating the camera

by abenedik 19. June 2014 22:26

Touch and multi-touch support is becoming more and more important. The previous version of Ab3d.PowerToys had only basic touch support – it supported only those touch events that were transformed into mouse events. To get better touch support users needed to use MultiTouchMouseCameraController class that was available in a separate project.

The new version adds excellent touch and multi-touch support to the core of the Ab3d.PowerToys library. This means that without any change in your code, the users of your application that will have touch screen will be able to rotate and move the camera with touch and also use pinch to zoom in and out. New MouseCameraController has many new properties that can be used to configure the touch actions.  To get full control of touch events, you can override some methods that control the behavior of MouseCameraController. See help file for more information.

To further improve the user experience, the new version now also adds camera rotation velocity inertia. This means that if user rotates the camera and then released the mouse button (or touch), the velocity of the camera rotation is preserved and the camera’s rotation is stopped slowly. This looks much more naturally, especially when used with touch.

The new rotation easing is now also supported by StartRotation and StopRotation methods. Now it is possible to start and stop rotation with slowly accelerating / decelerating the rotation velocity.

The last new feature is related to HeightMapVisual3D. Now when the data that is set to HeightData is changed, it is possible to call the new UpdateContent method to update the 3D model of the height map.

 

I hope you and your customers will like the new features. If you have any additional requests or ideas, please do not hesitate to contact us.

Tags:

Improved version of Ab2d.ReaderSvg and Ab2d.ReaderWmf available

by abenedik 23. May 2014 21:43

I am happy to announce that a new version of Ab2d.ReaderSvg and Ab2d.ReaderWmf have been published.

I am particularly proud of adding some very interesting hierarchy optimizations to ReaderSvg. Drawings in svg files are many times defined in many groups and with using transformations. In case you do want to simply show your vector assets, than it is much more convenient to have the drawing objects compact and without the complex hierarchies. With the new version of ReaderSvg this is not very easy task. More about that later in this post.

First let me show what is new for Ab2d.ReaderWmf – metafile reader for WPF:

  • Improved reading geometries when rectangle or ellipse have both Canvas position (Canvas.Left or Canvas.Top) and transformation set.
  • Improved xaml writer to prevent writing Canvas.Left = "0" and Canvas.Top = "0" (zero values can be skipped).
  • Prevented writing "Canvas.Left" and "Canvas.Top" properties in XAML two times.
  • Added IgnoreRootElementSize property to GeometrySetting - added possibility to remove the transformations or RectangleGeometry based on the size or root element.
  • Fixed not showing some texts under some circumstances.

Most of the improvements in ReaderWmf are also available in ReaderSvg. Here is the full list:

  • Clip path now works on all elements and not just on Canvas.
  • Improved size measurement when AutoSize is set to true and some objects are hidden.
  • Added objects grouping optimizations to ReaderSvg - they can be controlled by new properties in ReaderSvg: OptimizeObjectGroups, FlattenHierarchies, TransformShapes
  • Improved transforming read objects with calling Transform method.
  • Updated SvgBounds after calling Transform method with updateLastReadViewbox set to true.
  • Prevented throwing exception in GetObjectsWithCustomProperties when svg file does not have any custom properties.
  • Added IgnoreRootElementSize property to GeometrySetting - added possibility to remove the transformations or RectangleGeometry based on the size or root element. This can produce nicer XAML.
  • Fixed using transformations on EllipseGeometry and RectGeometry when reading svg file as geometry.
  • Prevented writing "Canvas.Left" and "Canvas.Top" properties in XAML two times.
  • Improved reading geometries when rectangle or ellipse have both Canvas position (Canvas.Left or Canvas.Top) and transformation set.
  • Improved XAML writer to prevent writing Canvas.Left = "0" and Canvas.Top = "0" (zero values can be skipped).

As mentioned before ReaderSvg now support optimizing groups. The best way to describe this new functionality is to show it in action. Let’s start with the following XAML that can be get when using no optimization:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100">
    <Canvas>
        <Canvas Name="g1">
            <Rectangle Fill="Yellow" Width="200" Height="100"/>
            <Canvas Name="g2">
                <Canvas Name="g3">
                    <Ellipse Name="e1" Fill="Red" Width="20" Height="20"/>
                    <Canvas Name="g4">
                        <Canvas Name="g6" RenderTransform="2,0,0,1,-60,-10">
                            <Canvas Name="g5" Canvas.Left="50" Canvas.Top="10">
                                <Ellipse Name="e2" Fill="Green" Width="20" Height="20" Canvas.Left="10" Canvas.Top="10"/>
                                <Canvas Name="g7" RenderTransform="0.5,0,0,1,20,20">
                                    <Canvas Name="g8">
                                        <Canvas Name="e3" RenderTransform="1,0,0,2,20,0">
                                            <Ellipse Fill="Blue" Width="20" Height="20" Canvas.Left="20"/>
                                        </Canvas>
                                    </Canvas>
                                </Canvas>
                                <Canvas Name="g9" RenderTransform="5,0,0,5,0,0">
                                    <Canvas Name="g10">
                                        <Ellipse Name="e4" Fill="Orange" Width="4" Height="4" Canvas.Left="11" Canvas.Top="3"/>
                                    </Canvas>
                                </Canvas>
                                <Canvas Name="g11" Canvas.Left="-10" Canvas.Top="30">
                                    <Polygon Name="p1" Points="10,10 30,10 20,20" Fill="Lime" StrokeThickness="1"/>
                                    <Canvas Name="g12" RenderTransform="1.5,0,0,1,0,10">
                                        <Polygon Name="p2" Points="10,10 30,10 20,20" Fill="Aqua" StrokeThickness="1"/>
                                        <Canvas Name="g13" RenderTransform="0.866025388240814,0.5,-0.5,0.866025388240814,0,0">
                                            <Polygon Name="p3" Points="10,10 30,10 20,20" Fill="Purple" StrokeThickness="1"/>
                                        </Canvas>
                                    </Canvas>
                                </Canvas>
                            </Canvas>
                        </Canvas>
                    </Canvas>
                </Canvas>
            </Canvas>
        </Canvas>
    </Canvas>
</Canvas>

The XAML shows that there are many Canvases that contains only other Canvases. In the first step we can set OptimizeObjectGroups to true. This reduces the size of XAML to:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100">
    <Canvas Name="g1">
        <Rectangle Fill="Yellow" Width="200" Height="100"/>
        <Canvas Name="g3">
            <Ellipse Name="e1" Fill="Red" Width="20" Height="20"/>
            <Canvas Name="g5" RenderTransform="2,0,0,1,40,0">
                <Ellipse Name="e2" Fill="Green" Width="20" Height="20" Canvas.Left="10" Canvas.Top="10"/>
                <Canvas Name="e3" RenderTransform="0.5,0,0,2,30,20">
                    <Ellipse Fill="Blue" Width="20" Height="20" Canvas.Left="20"/>
                </Canvas>
                <Canvas Name="g10" RenderTransform="5,0,0,5,0,0">
                    <Ellipse Name="e4" Fill="Orange" Width="4" Height="4" Canvas.Left="11" Canvas.Top="3"/>
                </Canvas>
                <Canvas Name="g11" Canvas.Left="-10" Canvas.Top="30">
                    <Polygon Name="p1" Points="10,10 30,10 20,20" Fill="Lime" StrokeThickness="1"/>
                    <Canvas Name="g12" RenderTransform="1.5,0,0,1,0,10">
                        <Polygon Name="p2" Points="10,10 30,10 20,20" Fill="Aqua" StrokeThickness="1"/>
                        <Canvas Name="g13" RenderTransform="0.866025388240814,0.5,-0.5,0.866025388240814,0,0">
                            <Polygon Name="p3" Points="10,10 30,10 20,20" Fill="Purple" StrokeThickness="1"/>
                        </Canvas>
                    </Canvas>
                </Canvas>
            </Canvas>
        </Canvas>
    </Canvas>
</Canvas>

But there are still many Canvases. A more radical step is to remove the all the hierarchies. This can be simply done with setting FlattenHierarhy to true (OptimizeObjectGroups can be set to false). The results speak for themselves:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100">
    <Rectangle Fill="Yellow" Width="200" Height="100"/>
    <Ellipse Name="e1" Fill="Red" Width="20" Height="20"/>
    <Ellipse Name="e2" Fill="Green" Width="20" Height="20" RenderTransform="2,0,0,1,40,0" Canvas.Left="20" Canvas.Top="10"/>
    <Ellipse Fill="Blue" Width="20" Height="20" RenderTransform="1,0,0,2,100,20" Canvas.Left="20"/>
    <Ellipse Name="e4" Fill="Orange" Width="4" Height="4" RenderTransform="10,0,0,5,40,0" Canvas.Left="110" Canvas.Top="15"/>
    <Polygon Name="p1" Points="10,10 30,10 20,20" Fill="Lime" StrokeThickness="1" RenderTransform="2,0,0,1,20,30"/>
    <Polygon Name="p2" Points="10,10 30,10 20,20" Fill="Aqua" StrokeThickness="1" RenderTransform="3,0,0,1,20,40"/>
    <Polygon Name="p3" Points="10,10 30,10 20,20" Fill="Purple" StrokeThickness="1" RenderTransform="2.59807616472244,0.5,-1.5,0.866025388240814,20,40"/>
</Canvas>

With using just one simple property we have come from a complex hierarchy to one simple Canvas that contain all the objects. But we can go even one more step further. As seen in the last step, almost all the objects use RenderTransform to transform them. With setting TransformShapes to true we can eliminate almost all RenderTransforms from the objects. So after setting both FlattenHierarhy and TransformShapes to true, we are left with the following XAML:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100">
    <Rectangle Fill="Yellow" Width="200" Height="100"/>
    <Ellipse Name="e1" Fill="Red" Width="20" Height="20"/>
    <Ellipse Name="e2" Fill="Green" StrokeThickness="1.414" Width="40" Height="20" Canvas.Left="60" Canvas.Top="10"/>
    <Ellipse Fill="Blue" StrokeThickness="1.414" Width="20" Height="40" Canvas.Left="120" Canvas.Top="20"/>
    <Ellipse Name="e4" Fill="Orange" StrokeThickness="7.071" Width="40" Height="20" Canvas.Left="150" Canvas.Top="15"/>
    <Polygon Name="p1" Points="40,40 80,40 60,50" Fill="Lime" StrokeThickness="1.414"/>
    <Polygon Name="p2" Points="50,50 110,50 80,60" Fill="Aqua" StrokeThickness="1.732"/>
    <Polygon Name="p3" Points="30.981,53.66 82.942,63.66 41.962,67.321" Fill="Purple" StrokeThickness="1.732"/>
</Canvas>

Nice and clean!

No more transformations. Instead the values of the shapes were transformed to give us clean and simple object model.

Note that when the Canvas defines the clipping area, than even when FlattenHierarhy is set to true, this Canvas is preserved. This way the end results are still the same as with having the whole hierarchy. 

In the same fashion, the TransformShapes could preserve some RenderTransforms. This happens when it is not possible to preserve the object with only transform the object’s values – for example if Ellipse or Rectangle is rotated with RenderTransforms,  then we cannot preserve this rotation without using transformation (with Ellipse and Rectangle we can only change the position and size).

I am sure that those new features are great for anyone that wants to use vector assets instead of bitmap. I think that using vector assets is the future. They have many advantages over bitmaps. For example they are DPI independent and can be scaled up and down without any loss. They usually take less space on disk. They can be simply manipulated – for example if you want that one icon changes color when the mouse is over it, this can be done with simply changing the Stroke or Fill color. With bitmap you need to use provide the bitmaps in all possible colors.

Therefore I am already working on a new application that will allow users to simply create ResourceDictionaries with many vector objects created from svg or metafiles. The application will allow the user to optimize and transform the objects before they are added to ResourceDictionary. For example it will be possible to create vector assets that will all have the same size and the same padding regardless from which source they are created. And what is more, the application will be available with full source code.

At the end of this post I would like to remind you, that the XAML that is created with our converter applications (ViewerSvg and Paste2Xaml) are not meant only for WPF. They can be also used for Silverlight and also for Windows Phone and Windows Store apps.

Tags: ,

ReaderSvg | ReaderWmf