I spend a large proportion of my time collaborating with UI designers and UI interaction designers where we work closely together to produce interactive UI’s for customers. As someone who is a novice when it comes to Adobe Illustrator and Photoshop I am very reliant on the import functionality in Blend. In this post I want to talk about a simple process that we have adopted to help with bringing those assets from AI and PS in our Xaml based projects.
Before the import features in Blend appeared we used the cool plug-in from Mike Swanson which would allow us to convert vector art work in Xaml. This was incredibility useful and mean that we reduce the time it took to convert these assets into Xaml and then modifying the Xaml in Kaxaml or in Blend. The process worked for us and we continued down this path until the import features in Blend improved and are now at a state where we can easily use the import functionality in Blend to convert these assets even easier.
But, that is not where the story ends, if you have tried out the import process on complex AI or PS visuals then you will have found that when Blend performs the import it positions each layer into a Canvas and will also import any images into the project as well. All in all this is cool however not so much when you have an existing project where you are happy with the code architecture and the folder structure of your application. And, this is what I want to dig into in this post is how to use the import functionality to your advantage.
Where do we start, ok so lets imagine that you have a project which you have setup or a developer on the team has created, its nicely structured and potentially uses MVVM or even a MVVM framework like MVVM Light. We also have a bunch of great looking designs that we need to convert into Xaml assets. We have a couple of options available at this point; we can import directly into the main solution or we can create a separate project a scratch project where we can import into. Admittedly at first I started out by importing directly into the main solution however this became a headache as the solution becomes polluted, by this I mean that when we do the import Blend will create a new folder in our project to hold the images that are referenced in the AI file however we are more than likely have an images folder in the project where all our images live. And for me this is where the management headache begins as we have to work out which images we want to keep and the ones we want to remove, and we also have to then move these images to the right folder and change the references to these images from the Xaml. All in all not too difficult when we break them down but on a large import this can become rather sticky very quickly.
Because of these issues what I have found is that importing into a scratch project is a smoother process for creating your Xaml assets and managing what images you want to keep. So the process goes something like this.
Create a scratch project and setup the folder structure for your Resource Dictionaries and images to mirror the same structure in the main project. Then import you AI or PS file into this project.
Next start to clean up your imported Xaml, the majority of the time you will want to ungroup the visual elements from their containing canvas as the visual elements will have been relatively positioned to mirror the layout defined in AI or PS. You will also find that the designer will have used a number of different layers to create the final appearance of an element. For example the designer may have used 4 different layers in order to create the colour of an element. In these cases my approach is to use the colour picker in Blend to find out what the colour is of the topmost layer, create this colour as a resource in your Resource Dictionary and then remove all the underlying layers until your left with the topmost then apply your newly created colour resource so that the visual element looks like the original. We could leave the visual elements as is however there are performance issues that we may encounter when doing this, in that if you have a list and you are planning on using this visual a number of times then those hidden layers are going to be present in the visual tree which means that the framework will render these and will have an impact on the performance of the application.
Other items to look out for are drop shadows on elements, when performing the import the drop shadows will be translated in a png images. In the majority of cases removing these images and replacing them with a drop shadow effect is the best mechanism, however there are some cases where the png works better. These situations are related to interaction design and occur when you are either; animating the visual elements on screen from one position to another; or you animating the drop shadow effect itself; in these circumstances then leaving the png is desirable and you may also consider using the EnableGPUAcceleration param at the plugin level along with setting the Bitmap Caching mode on your Xaml element.
By this stage you should now have cleansed your import and are ready to start styling and templating the imported visual elements into controls. There are two options available to you at this stage and they are related to your experience and confidence around the templating of the controls.
The first option is to group up the different visual layers that you want to make into the control, the majority of the time grouping them into a Grid or a Canvas will work for you. From here you can then right click on the layout panel that you created and select “Make into Control” option where you can select from the popup dialog the control that you want to create a style for. From here you can start to assign the visual elements to the parts associated with that template.
The second option is to drag onto the art board the control that you want to style and template and size the control to be the same as the visual elements. Right click on the control and select the “Create a Copy” sub menu option located under “Edit Template” option. This will then provide you with a default template which you can then start to modify so that it takes on the appearance of the visual.
The first option works well if you have intermit knowledge of the template you are creating, it can also work well when you know that you are creating styles and templates for controls which are of a fixed height and width. However, if this is not the case then the second option is a preferred route.
The styles, templates, colour and brush resources that you are using need to be added into the correct Resource Dictionaries. By following this approach you can then pick up the visual elements and merge them into your main solution along with the modifications to the Resource Dictionaries and moving any images that you are using into your images folder.
I hope this insight helps both designers who are creating assets using Adobe products to think about some best practices on how you construct your designs and for the Blend folks this should help with cleaning up the imported Xaml.
As always please let me know your thoughts and also what you have found works best for you.