redchilliworx's Blog

Tips For Designers For Translating Your Comps Into XAML

Pre-Tip: Work in Blend
All of these tips are assuming that designers are building comps with another design tool like Illustrator or Photoshop and then moving the comps into Blend. If you’re not using Blend, you should be. I am not suggesting that you change your design tools or that you design differently. These are just tips for the translation process.

Tip 1: Two layers of semi-transparent gradients is fine. Twelve layers of semi-transparent gradients is not
Whenever you add a transparency layer, you add another run of rendering to all the pixels in that layer. Doing that once or twice is fine… most machines can handle that. But when you have a bunch of them, you’re begging to bring the machine to a crawl. Look at the two gradients below…

The one on the right is a solid background with two transparent gradients (a light one at the top and a dark one on the bottom). The one on the left is a single gradient. The one on the right required three passes to render. The one on the left requires one.

This does not mean that you can never have transparency in your application. But if you can figure out an economy of layers when using transparency, you’ll save yourself from from developers who are willing to make the design trade off to speed up the application.

Tip 2: The Grid layout is your new best friend. Understand it. Use it. Love it.
I once worked with a designer who used Blend and made the most beautiful screens in Blend. But when it came to implement his designs, the developers ended up ditching most of his work because every element was inside a layout inside a layout inside a layout… etc. This ends up being a huge performance killer because every layout means another set of layout calculations for the layout manager.

Instead, make creative use of the Grid layout. Within the Grid layout, you can create columns and rows with the following options:

Auto (with Min/Max options) - This column will ask the items inside it how much room they need and will expand or contract to give them exactly the room they need and no more (within the min/max limits).
Fixed Width/Height (”80″) - A fixed height or width will take exactly that many pixels of space. Easy enough.
Star (”*”) (with Min/Max options ) - this can be used as a decimal or a percentage… “.8*” or “80*”. It asks the container holding it how much room it has. After the Auto and Fixed columns or rows allocate their needed space, the “*” ones take up all the remaining available space unless hindered by the min/max limits.
A single grid can use any number of rows and columns using any combination of Auto, Fixed and Star. You would be shocked at how flexible this is. (Click here to see that flexibility in action.) You can build whole screens using a single grid. I don’t recommend that, but keep the idea of fewer layouts in mind when you are translating designs. Not every element in the project needs to be inside its own layout.

Tip 3: Use Borders, not Rectangles
Borders play nice with pretty much anything you want to do with the added benefit of being able to put stuff in it. Additionally, they are really simple layouts, so they don’t use much overhead. Take a border and put a Grid into it and you have a visually compelling and flexible combination.

Tip 4: Draw simple vector art inside Blend.
Mike Swanson has a fantastic Adobe Illustrator-to-XAML plug-in. I’ve heard that some people can use Expression Design quite well. But unless your project is extremely visual in an artsy kind of way, you should just draw simple vector art inside Blend. Not only will you save yourself the exporting-importing trouble, your XAML will look nicer and be easier to change later on.

I usually draw with the pen tool inside a Grid layout and then use the direct selection tool to make the tweaks I need.

Tip 5: (Silverlight Only) Plan on using only a few fonts
Most of my experience with fonts in Silverlight have been somewhat painful. Hopefully we’ll see that change in Silverlight 3, but in the meantime it is something that I’ve seen even experienced developers fight with. Watch this video by Tim Heuer… it will help. () And put this blog on your RSS feed… I’m working on a step-by-step tutorial for this geared at non-developers.

Tip 6: Work in “Split” mode in Blend and goof around with the XAML every now and again
Blend as a drag-and-drop design tool is absurdly powerful. Using Blend, you could build an interactive wireframe prototype in 15 minutes and never touch a line of code.

But as awesome as it is, it will be necessary from time to time to go into the XAML and tweak this or that or comment something out or copy-paste something else. Simply put, understanding XAML will make transitioning your designs a breeze and having Blend in “Split” mode will let you know just what your work in the design space is doing to the XAML. It’s a pretty painless way to start the XAML learning process.

If you’re interested in getting into the XAML a little more, I would recommend using Visual Studio 2008 in tandem with Blend. It offers intellisense (auto-complete for code) and integrates extremely well with Blend.

Hope that helps… If anyone has any questions, feel free to post them here.

RedChilliWorX Top NEWS

07.Apr.2008
RedChilliWorx is one of the silverlight starter, Microsoft added the Redchilliworx.com for using and implementing his new technology Silverlight on their site and rated as 4.5 out of 5. India's Top Web Designer and professional person is engaged into Creating Silverlight Websites and Applications. >> View more
18.Jan.2008
OasisGraphic.com is owned by redchilliworx.com Microsoft added the Oasisgraphic.com for using and implementing Silverlight on their site and rated as 4.5 out of 5. >> View more

Thanks for such a good effort guys.
Regard's
Ritesh Niranjan

Silverlight 2.0 Deep Zoom using MultiScaleImage Control

MultiScaleImage Control
This is my first Silverlight 2.0 tutorial. I have seen MIX keynote yesterday and was really impressed with Hard Rock's Memorabilia sample http://memorabilia.hardrock.com/. I tried to reproduce the sample but could not find any documentation about Deep Zoom. After some search, I found a tool released by Microsoft called "Deep Zoom Composer". You can download the tool from here . And you can get the user's guide from here. The composer is very simple, you will import your images, arrange your photos, then export. These steps went smoothly, but I didn't know what I am supposed to do with the exported output, but after some hacking I could display the image, zoom in and out, and move the canvas. So I decided to share how I accomplished these tasks.Displaying Deep Zoom ContentThis is the simplest task, all you need to do is inserting a MultiScaleImage control and set its Source property. But there are a couple of tricks here, first you need to copy the folder that "Deep Zoom Composer" generated to your clientbin folder. The second is that the Source property should refer to your items.bin file if you exported your content with "Create Collection" option selected, or info.bin file otherwise.ZoomingYou can zoom either by using ViewPortWidth property, or better using ZoomAboutLogicalPoint method, the method takes zooming factor, and logical x, y co-ordinates to zoom around. The following code sample shows how to use this method
if (!isCtrlDown) this.DeepZoom.ZoomAboutLogicalPoint(1.5, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y); else this.DeepZoom.ZoomAboutLogicalPoint(0.75, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).X, this.DeepZoom.ElementToLogicalPoint(e.GetPosition(this.DeepZoom)).Y);The isCtrlDown field is set in the KeyDown, KeyUp events of the root canvas. I have tried setting the events on the MultiScaleImage control, but it did not fire, not sure why, here is the code private void DeepZoom_KeyDown(object sender, KeyEventArgs e) { if (e.Key == Key.Ctrl) isCtrlDown = true; } private void DeepZoom_KeyUp(object sender, KeyEventArgs e) { if (e.Key == Key.Ctrl) isCtrlDown = false; }
Moving ContentThis is the most tricky part because of the logic needed to handle dragging. But when it comes to the MuliScaleImage control, it is relatively easy and require only one line of code to modify the ViewportOrigin property, here is some sample code if (isDragging) { Point newOrigin = new Point(); newOrigin.X = this.DeepZoom.ViewportOrigin.X - ((e.GetPosition(this.DeepZoom).X - lastMousePosition.X)/this.DeepZoom.ActualWidth); newOrigin.Y = this.DeepZoom.ViewportOrigin.Y - ((e.GetPosition(this.DeepZoom).Y - lastMousePosition.Y) / this.DeepZoom.ActualHeight); this.DeepZoom.ViewportOrigin = newOrigin; }You can download the complete sample project with source code from here

Silverlight XAML

Overview
Extensible Application Markup Language (XAML) is an XML based declarative language that is used in the Windows Presentation Foundation (WPF) and Silverlight to define the user interface and animations. Silverlight implements a subset of features that are available in the .NET Framework 3.0. Thus, certain features used with WPF, such as markup extensions using the curly braces ({ and }), are not available in Silverlight.
The goal of this document is to highlight the main differences from other XML formats you may be familiar with and the syntax you will need to understand to read and create XAML files.
Syntax
Namespaces
The following table lists the namespaces used by Silverlight XAML.
Namespace
Description
http://schemas.microsoft.com/winfx/2006/xaml
The general XAML namespace, usually prefixed with "x".
http://schemas.microsoft.com/client/2007
The Silverlight specific namespace. Note that this is different from WPF even though they share some of the same elements.
Silverlight 1.0 requires that the root node of the document be a <canvas> element. The following example shows a minimal XAML document.
<canvas <br=""/> xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</canvas>
<canvas<br/>xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

</canvas>

Property Element Syntax
Standard XML lets you set values of elements using attributes or by using the content of an element. Property element syntax is a way to let you specify complex values for object properties. For example, setting a gradient with multiple color stops as a plain string would require specialized formatting that would not easily map to the underlying gradient object. It would also be extremely difficult to extend this format in the future while maintaining backwards compatibility. Property element syntax gives us an easy way to read values and an extensible mechanism that also maps to the actual objects used when manipulating the object in code.
The basic syntax is demonstrated below.
<objectname>
<objectname.propertyname>
<propertyvalue>...</propertyvalue>
</objectname.propertyname>
</objectname> <objectname>
<objectname.propertyname>
<propertyvalue>...</propertyvalue>
</objectname.propertyname>
</objectname>

Thus our gradient example would look similar to the following. Note the use of property element syntax for both Rectangle.Fill and LinearGradientBrush.GradientStops. Rectangle.Fill contains a LinearGradientBrush object and its GradientStops property contains a collection of GradientStop objects.
<rectangle>
<rectangle.fill>
<lineargradientbrush>
<lineargradientbrush.gradientstops>
<gradientstop offset="0.0" color="Red">
<gradientstop offset="0.5" color="Green">
<gradientstop offset="1.0" color="Blue">
</lineargradientbrush.gradientstops>
</lineargradientbrush>
</rectangle.fill>
</rectangle> <rectangle>
<rectangle.fill>
<lineargradientbrush>
<lineargradientbrush.gradientstops>
<gradientstop offset="0.0" color="Red">
<gradientstop offset="0.5" color="Green">
<gradientstop offset="1.0" color="Blue">
</lineargradientbrush.gradientstops>
</lineargradientbrush>
</rectangle.fill>
</rectangle>
While the resulting code required tends to be verbose, it is much more readable for humans than attempting to shrink all of the information above into a simple string. It also leaves the content of the <rectangle> element free to hold the actual visual children that it may contain.
Attached Properties
Attached properties are a way to specify properties on any element, even if element does not natively have that property. Most often you'll see this used to set properties that are related to the parent of the element.
<objectname propertyname="...">

<objectname>
<ownertype.propertyname>
<propertyvalue>...</propertyvalue>
</ownertype.propertyname>
</objectname> <objectname propertyname="...">

<objectname>
<ownertype.propertyname>
<propertyvalue>...</propertyvalue>
</ownertype.propertyname>
</objectname>

For example, setting Top and Left properties are actually dependent on the container in which the element is placed. In the following example, Top and Left are a feature of the parent <canvas> where the resides.
If the was placed within a different type of layout container, such as a <grid> (not supported in Silverlight 1.0), the Top and Left properties would have no meaning as the placement of the object would be based on the Column and Row of the parent grid.
<canvas>
Height="50" Width="50" Fill="Maroon" />
</canvas> <canvas>
Height="50" Width="50" Fill="Maroon" />
</canvas>

Another example is often seen with animations. A <storyboard> needs to know the target object and property of an <animation>. Note the use of parentheses to target an attached property.
<storyboard>
<doubleanimation storyboard.targetname="MyEllipse" storyboard.targetproperty="(Canvas.Left)" <br=""/> To="300" Duration="0:0:1"/>
</storyboard> <storyboard>
<doubleanimation storyboard.targetname="MyEllipse" storyboard.targetproperty="(Canvas.Left)" <br=""/>To="300" Duration="0:0:1"/>
</storyboard>

Events
Events are defined in XAML using attributes in a similar fashion to HTML. The following example attaches the MyCanvas_Loaded() event handler function to the Loaded event of the <canvas> element.
<canvas xmlns="http://schemas.microsoft.com/client/2007" <br=""/> xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">
</canvas> <canvas xmlns="http://schemas.microsoft.com/client/2007" <br=""/>xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="MyCanvas_Loaded">
</canvas>
It is important to note that in Silverlight 1.0 the event handler functions must be in the JavaScript global scope. As this will make it impossible to create object oriented applications, it is usually better to hook up event handlers in code to achieve better encapsulation.
Triggers are also a way to start an animation purely in XAML without the need for event handler code. See Animation Basics for details including limitations.