Imagine the following:
1.) Draw the whole user interface or just some of its elements of your WPF application
in your favorite vector drawing application - Adobe® Illustrator®, CorelDRAW®,
Inkscape, etc.
2.) Save your drawing into svg file format.
3.) Import your svg file into ViewerSvg and convert it into xaml. Or you can use
a Ab2d.ReaderSvg library and import svg file into your
WPF application at runtime.
Simple as that!
What is SVG?
SVG (Scalable Vector Graphics) is a W3C standard file format for describing two-dimensional
graphics in XML. Because it is one of the most commonly used file format for storing
2D vector images almost all vector drawing programs support importing or exporting
from and into it.
There are also compressed SVG files (svgz) that are typically 50 to 80 percent smaller than original svg files and are therefore ideal for online content.
ViewerSvg is using the Ab2d.ReaderSvg library that
imports objects from svg and svgz files into xaml for WPF or Silverlight applications.
So if you wish to load svg or svgz files at runtime,
this can be done very simply with Ab2d.ReaderSvg. There
is also a great sample application
(available with full source code) that demonstrates how to create great looking
user interfaces and achieve great visual effects with ease.
For example the following XAML reads myClipart.svg (see Ab2d.ReaderSvg for more):
<ab2d:SvgViewbox Source="samples/myClipart.svg"/>
Export Dialog - showing the xaml text and all the export options.
See also links to get great free online svg clip art libraries.
Usage hints:
1. Double click on an item in Named objects tree view to rename the element.
2. You can also open a svg file with dragging and dropping it from windows explorer.
3. After opening a svg file, the structure of its objects is displayed in a Tree
View on the right side of the application. The Tree View displays all the objects
from svg file in a hierarchical form. Objects that have their Name set are displayed
with the name, other objects by its type enclosed into []. If you double click on
a tree view item you can change or set the name of an object. That can be very useful
if you would like to access just parts of the svg objects.
4. If the svg file is shown properly, but there are some problems with the exported
xaml, you can use a XamlWriter option in Export dialog. The problem with this option
is that you will lose all defined Names but the xaml should be exported correctly.
5. If the svg file is not opened correctly or it is not opened at all, you can try
to open it in another application like Adobe Illustrator(R) or Inscape and save
it into an older SVG format.
ViewerSvg is also used in the Silverlight EU Countries tutorial.
New in version 1.3
- Added support for Silverlight 1.0 and 2..
- Added object selection with mouse.
- Added export dialog with xaml text and preview tabs.
- Added selecting number of decimals in the exoported xaml (useful for optimizing the size of exported xaml).
- Added possibility to export only selected elements.
- Rename objects with double clicking on them
- Show the whole image when opened (before the left lower part of the image was hidden by the ViewerSvg buttons)
New in version 1.2
  DOWNLOAD All Ab2d tools, libraries and samples (1.13 MB) [1 Apr 2008]
(Paste2Xaml, ViewerSvg, Ab2d.ReaderWmf, Ab2d.ReaderSvg, ReaderSvg sample app.)
System requirements:
Windows XP, Windows Vista (recommended)
.Net Framework 3.0 (also works with 3.5)
Visual Studio 2005 (can be imported into VS 2008) - for samples
Note: Subscribe to RSS feed or submit your email on downloads
section to be informed about new content on the site.
|