Thursday, January 10, 2008


Welcome to my XAML graphics blog.

XAML is a relatively new markup language for creating and describing user-interface elements in .NET framework applications (WPF programs, XBAP browser applications, and Silverlight pages). XAML is based on XML, and is the primary format for vector graphics in the latest generation of application interfaces. There are already many sites dedicated to the coding side .NET programming, but not many about designing XAML elements to be used with the code. I will continue to post tips and tutorials as I progress through my various XAML endeavors.

Now that you know what XAML is, you may be wondering why someone would want to use XAML. The main reason for using XAML is that it allows you to create vector-based interfaces for use on any .NET 3 capable platform. Traditional user-interfaces were created using raster images (you probably know several types, such as .bmp, .jpeg, and .png files). These images are all essentially rectangular grids of dots (pixels). Raster images create some problems as images often need to be resized for different types of monitors, different sized buttons, different places on a webpage, or different sized icons. As the image is specified as a grid of dots, enlarging the image simply enlarges the dots. Vector images are composed of mathematical equations that describe the contours of each shape, meaning that they can be resized without any loss in quality. Resizing a vector image makes larger (but equally smooth) curves.

As you can see above, vector images scale much more smoothly. In the case of the vector image, the star is described as a set of ten orange lines, filled with yellow. Resizing this simply draws ten larger orange lines, and fills the shape with yellow. The raster image is a grid of sixteen by sixteen colored dots. Resizing this grid makes a larger grid of sixteen by sixteen dots, barely resembling a star anymore. Using vector images for user interfaces means never having to create multiple copies of an image at different sizes, and never getting ugly blocky images when you resize your application.

No comments: