Beginning XAML

Monday, November 09, 2009 / Posted by Luke Puplett /

This week I’ve begun to get somewhere with XAML after almost crying with frustration and sleep deprivation last week! Starting from scratch with an unfamiliar technology is like crawling around naked in a blackened room in which large pans of boiling water are lying around.

Its true that I have held off using Silverlight for as long as possible while I coded up the server application, but there’s no more I can do on that phase so I have turned to the user experience for my client application, at least so I can get something out there for my test users.

As soon as Companies House (the government department in the UK that oversees business trading entities) approves my company name change I can register on the Microsoft MPower scheme and get MSDN again after my last one expired just before SL3 RTM.

Clip Joint

That means I’m still on SL2 and Expression Blend 2.0 which, in my opinion, were transitional releases with many functionality holes. One of them being the fact that the PathGeometry.Figures property doesn’t work and results in the following error message even though the similar Path.Data is supported.

The TypeConverter for "PathFigureCollection" does not support converting from a string.

Instead, you have to specify the components of the path using loads of LineSegment objects, which is frankly impossible if you’re working with a 26-line piece of mini path markup syntax exported from your favourite drawing application.

- OR -

Specify the mini mark-up within the Clip attached property directly:

<Image Clip="M 286,55 C276.24915,55.9..." [...] />

CorelDRAW to Expression Blend 2.0

My favourite drawing application happens to be CorelDRAW X3. When I was a teenager still at school I practically lived in Corel’s drawing suite so it wasn’t a difficult decision when it came to buying a decent vector drawing tool for UI work. Especially when faced with the extortionate price of Adobe’s market-leading equivalent.

Below are some of my logo designs. The first one is for my consulting company from which I will ‘host’ the new vuPlan web product, providing this complies with BizSpark rules.

But before I get to the logos, here’s how to get complex shapes out of CorelDRAW and into Expression Blend 2.0. – in 3.0 you’d export from Corel to an AI file and then pull in the artwork using Blend’s new import features.

  1. From CorelDRAW, select the asset that you wish to use in Expression Blend.
  2. Click through File and Print... tick to print Selected Only.
  3. Choose the Microsoft XPS Document Writer*
  4. Change the options to reposition the output to top left.
  5. Print the document and provide a filename.xps
  6. In Windows, rename the .xps file to .zip
  7. Extract the zip contents to a folder.
  8. Browse the folder structure and find Documents\1\Pages\1.fpage
  9. Rename and change the file extension to .xaml
  10. Open it in Notepad and pull out the content within the FixedPage element.
  11. Paste the mark-up into your Expression Blend project.

*I believe that the XPS writer is installed as part of Microsoft Office 2003 or later and forms part of Microsoft’s Metro initiative, or OpenXPS.

Logos

The first logo is for my company Evoq Limited, once its renamed. In colour theory, blue conveys trust and loyalty and is popular with large companies. The swoosh, or flame rises to emulate a subtle tick or positive connotations with rising stock charts.

 

EvoqAlphaBack

 

At the time of writing, I have not purchased the rights to the typeface (until the company name is set) but it was designed by Benoit Sjoholm of Calame Design in France.

My original logo ideas (on flickr) had smaller flames, but after rescaling it to use the Golden Ratio (1.618) of the text length it feels more unified.

The second logo is for the web service I’m working on and is below. Its this logo that I’ve recently been working on in CorelDRAW and Expression Blend – see flickr link above where I have uploaded some wireframes. CorelDRAW now has a very nice snapping system allowing the nodes along a line to be snapped over lines of other (guide) objects.

 

Master Logo Edition 2 - 200px

 

Interestingly, the PNG output by Corel doesn’t seem to be as well anti-aliased into the transparent alpha channel than my ancient copy of Photoshop seems to achieve.

Now I don’t know if I’m enjoying myself or just being too finicky but time seems to be absolutely flying past when I’m doing the visuals. My old art teacher would tell me its because I am working in my right-hemisphere and its the other side of the brain that maintains the concept of time.

I’ve enjoyed this process and as of 4am this morning I now have them in my Silverlight test project.

Labels: , ,

0 comments:

Post a Comment