Vector graphics in silverlight

Question

Hi Folks,

I am new to Silverlight. Just created my first application that shows deepzoom images.

Looking for some pointers how to display vector graphics in Silverligth. The graphics are all in 2D and is a series of lines (x1y1, x2y2), points (xy), basic shapes. The data is available in ASCII text files.

What is the way(s) to read the data from files and draw in SL? Do I need to convert / translate the vector objects into images (XAML) first? Where to start?

The ideal case is that all vector obects should be selectable either programmatically or by user actions.

Thanks, Val

Answer 1

There is no direct drawing API to my knoweldge, but you can add the values seperately by adding various shapes to the visual tree.

The code you are looking for will likely involve the Path class and, in turn, PathFigure and PolyLineSegment (or possibly LineSegment).

Below is some code that draws a square:

PolyLineSegment segment = new PolyLineSegment();   
segment.Points.Add(new Point(0, 50));   
segment.Points.Add(new Point(50, 50));   
segment.Points.Add(new Point(50, 0));   
segment.Points.Add(new Point(0, 0));   

PathFigure figure = new PathFigure()
{
    StartPoint = new Point(0, 0)
};
figure.Segments.Add(segment);

PathGeometry geometry = new PathGeometry()
{
    Figures.Add(pathFigure)
};

Path path = new Path()
{
    Stroke = new SolidColorBrush(Colors.Black),
    StrokeThickness = 2,
    Data = pathGeometry
};

// To render, the Path needs to be added to the visual tree
LayoutRoot.Children.Add(path);

Edit If the data in the ASCII text files cannot change at runtime, it might be worth investigating writing a script that transforms the files into XAML so it can be compiled.

Answer 2

First of you have the issue of actually getting access to the files.

Getting the file content

If you have these files held somewhere serverside then you would use WebClient to fetch the file using DownloadStringAsync.

On the other hand if the user is to open a file locally then you need use the OpenFileDialog class to ask them to open the file and then use OpenText on the FileInfo object that OpenFileDialog provides to read the string data.

Parsing

Well its your format so you'll have to code that yourself.

_Generating UI elements

You will not have to convert it to Xaml. Since you want these vector items to be individually selectable elements then you probably want to use the set of Shape types found in the System.Windows.Shapes namely, Elipse, Line, Path, Polygon, Polyline and Rectangle.

No doubt the format in question has someway to define the position of these elements relative to a fixed 0,0 point. Hence the best panel to use to display these is a Canvas.

You would read through each Vectored item, select create an instance of one of the appropriate shapes set its properties based on the data in the item. You would need to determine its correct location within a Canvas and use the Canvas.Left and Canvas.Top attached properties. The add the shape to the Children collection of the Canvas.