Setting up your first use of the Animation library in WinJS

The WinJS Animation library provides some pre-scripted animation functions that allow you to easily reproduce the signature animations of Metro-style apps.  Since there is no “Animated Application” template (and I don’t think there should be).  I thought I’d share the first couple of steps needed to use the library in your own application.

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. In default.html, add an element to be animated.  I chose a header taking advantage of the provided classes of the theme CSS.

3. Next add a reference to the Animation library which is defined in the “animations.js” file under the “winjs/js” folder.  Additionally if you open this file, you will find in the comments at the top that this library is dependent on the “base.js” file and the “ui.js” file.  The first file is already referenced but “ui.js” needs to be added.  Add the references to your default.html file, like the following:

4. Switch over to default.js, and in the onmainwindowactivated method add the following code to locate the element and run the page enter animation.

Its important to notice the namespace is “Animation” and not “Animations”.  One reason I was prompted to write this post is because the Windows 8 dev center example code erroneously uses “Animations”. Certinaly frustrating when you’re just getting started.

Run. Run the example and you should see after the app starts up, the page title slides into view with a short animation.

What about chaining a second animation after this first animation? Since animation functions return promises its very easy to do so.  Check it out.

5. Add another element below your first in default.html. Let’s use the fadeIn function this time, so set the opacity to “0”.

6. Now go back to default.js and add a then call on enterPage. Inside define a function that locates the second element and calls fadeIn.

Run.  Now when you run the app, after the page title slides in, the paragraph below should fade in to view.

And that’s it to getting started! If you look at the WinJS.UI.Animation namespace you’ll find the other available scripted animations.

Looking through the “animations.js” file, I found it interesting to note that the available functions actually make a call to the Win.UI.executeTransition function, so if you’re looking to run some custom animations you can do that too.

I’m sure I’ll be posting more about the Animations library soon.  I’m not sure what everything does yet, but it sure is fun to poke around.

No Alert in WinJS! Use console or MessageDialog instead

Please excuse the superfluous exclamation point in the title, this is not a true emergency.

Most JavaScript developers have moved on from debugging with the alert function, but sometimes the quick and very dirty function comes up as an old instinct. This instinct will be squashed if you attempt to use alert or its siblings, confirm or prompt, when beginning your Windows 8/WinJS education.  A call to one of these functions will cause the Visual Studio debugger to break and throw an undefined exception.

Thankfully there is a JavaScript console available in Visual Studio so you can simply call console.log(). The following steps will take you that far:

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. Add an element to your default.html page providing something to click on. You could go with boring old text, but I went for a leaf image (pictured above, download) and i gave it an ID of “leafImage”.

3. Next add an event handler in the onmainwindowactivated function in default.js. You can remove the ActivationKind check as it doesn’t matter for this sample.  Now when adding the eventHandler I skipped over ‘click’ and instead attached to ‘MSPointerDown’ fully embracing the new Input system of Windows 8:

Run. Now if you run this code, you will see your text or image and once you click it with a mouse or tap it with your finger the event will fire. Alt-tabbing over to VS you should see the text logged in your JavaScript Console.

This does mean you need to alt-tab to see the information, but what about showing the info in the app?  You could use the other method of a debug div element sitting in your HTML that you can write to.  That still works perfectly fine.

Another option available is the MessageDialog, especially if this info is not just debug info but rather some information you want to share with user.  Possibly even allowing the user to make a choice or give their opinion. To use the Message Dialog you can use the following code:

And now let’s break it down.

4. (Line 5) Notice the MessageDialog is from the Windows namespace and not WinJS. This is an example of the native WinRT-integrated-frameworks-in-action.

5. (Line 10-15) a UICommand is added for each child of the resultOptions array.  Adding the label in invoked handler can also be set in the constructor.

6. (Line 18) Notice the use of the promise object with the then function.  This is how asynchronous methods are handled in WinJS, which is already an existing popular JS pattern in libraries like jQuery for example.

7. (Line 19) For some reason the event arg c is always equal to the last UICommand added to the collection, resulting in the need for the separate result variable.  Based on the documentation I’m not sure if this is an error, but it seems like it should return the selected UICommand instead.

Run. Running the app and clicking the image I found two different results. The left image is run from VS and shows the MessageDialog with a black background.  The right image is the app run in Interactive Mode in Blend showing the MessageDialog with a green (and I believe the correct) background.

Additionally while running the app in Blend I noticed that there was no JavaScript console there.  Let’s hope one is added before Blend 5 ships, as that will make debugging across the tools simpler.

Overall it is just a “Developer Preview”, but so far exploring Windows 8 has been a lot of fun. Expect more posts in the future.  This stuff is not well documented and I’m happy to share and get feedback on how things currently work.

New Windows Phone “How Do I” Video Series

Working on a few WP7 videos

“How do I…do something new in and cool in Windows Phone ‘Mango’? This is Adam Kinney for Microsoft and today we’re going to answer that question by…”

If you are new to Windows Phone 7 Development or you want to get a look at on e of the new features in action check out the new Windows Phone “How Do I” Video Series

Each 10-15 minute video focuses on a single topic and walks through an example of code. I had a lot of fun putting these together and I think the “Mango” update will be huge for Windows Phone 7 developers and users. They’ve thrown in some really nice new features in there like deep linking tiles, flipping notification tiles, sockets, local database and more OS integration with new tasks and access to contacts and appointments data.

Here’s the full list of videos:

Metro List View double line – from PSD to Silverlight

I was recently working on a Windows Phone 7 application where one of the goals was to be very true to the Metro design guidelines. Like many applications we were using the trusty ListBox to show items with titles and subtitles, which all works pretty smoothly until that title starts wrapping. Then it quickly becomes apparent how much work is need to adjust the Silverlight templates to match the PSD Design Templates.

We did get very close to parity with the design templates and I thought I’d share the process for those interested in matching the native layout of the — List View double line.

Obtain the PSD Design Templates

If you don’t have them already download the Design Templates for Windows Phone 7. After extracting the files open the enclosed PDF which will act as a guide to the contents of the many large PSD files.  Each files focuses on design and layout of different native WP7 components, not all components have a directly related Silverlight control, but its pretty simple to find something similar.

For a full walkthrough of the Design Templates check out this video screencast on the .toolbox site.

Locate the Target Layout

Open the “ListView_PSD.psd” file and you’ll see six different templates for the List view.  The target is the view in the center of the top row — Double Line.

In order to create a lightweight image to use for comparison, I quickly grabbed and flattened the target.

  1. Expand the “DoubleLine_Wrapped” layer group
  2. Toggle the “Redline copy 5” layer into view
  3. Crop and save.

Matching the Layout in Silverlight

Now the goal is just to create the matching XAML and templates which can be reused within real applications.  Thankfully Expression Blend has a project template that gets us more than halfway there.

  1. Open Expression Blend (free with Windows Phone Dev Tools)
  2. Create a new “Windows Phone Databound Application” project and name it “ListviewDoubleLine”

And right away, MainPage is loaded with a ListBox which includes some runtime and designtime data and a similiar data. The image to the right is an overlay of our target and current layout.

Change the Data to Match the Target

In order to use the target as a guide it will be much easier if the text is the same.

  1. For design-time values edit the SampleData/MainViewModelSampleData.xaml file
  2. For run-time values edit the ViewModels/MainViewModel.cs file
  3. In each file change the LineOne and LineTwo properties of the first six items to match the values used in the target

To avoid all the typing, you can download the edited files here.

Update the Header

Even though our focus is the ListBox, layout starts at the top of the page so we need to get that right first.

  1. ApplicationTitle – move to 17pt font size from 15pt
  2. TitlePanel – one less pixel in margin left and top (12,17 to 11,16)
  3. PageTitle – three less pixels in margin left and top (9,-7 to 6,-10)

Now other than the tracking of -10 on the PageTitle we’re set. Unfortunately adjusting font tracking in Silverlight 4 is not possible, but it is planned for Silverlight 5!

Update the ListBox

Now that the header is looking good its time to address the list items.  We’ll do this first by adjusting the position of the ListBox which acts the origin for all items.

  1. MainListBox – three less pixels in margin left and two less pixels in margin top (0,0 to -3,-2)

The first list item looks good now, other than the aforementioned tracking issue.

Update the ListBox ItemTemplate

Although the text is now lining up properly for the first and second items, you may notice that the subtitle of the second item is breaking when it shouldn’t.

The StackPanel used as the container element for the ItemTemplate is not wide enough, although looking at the default width of 432 it matches the redlines in the target.

480 device width minus 24 pixels on each side equals 432, so where’s the disconnect?  Its in the default styling of the title text box and in the visual vs hit target.  Setting the background of the StackPanel to red highlights the answer.  The StackPanel is 9 pixels away from the edge and not 24 as it appears to be.

We need to increase the width to account for this, as well as address the TextBlock spacing for the subtitle

  1. StackPanel – increase width from 432 to 459
  2. – decrease margin bottom from 17 to 1
  3. – set the MinHeight to 94
  4. LineTwo TextBlock – decrease the margin right from 12 to 0
  5. – change TextWrapping to NoWrap.

Matching the LineHeight for Text Wrapping

And now for the final feat and the most advanced bit of trickery, adjusting the template to accommodate for the wrapping behavior. In Silverlight we do have control over Line Height but you must first change the lesser known LineStackingStartegy property.

  1. LineOne TextBlock – set LineStackingStrategy to BlockLineHeight
  2. – LineHeight to 43
  3. – set Margin explicitly to 12,9,12,0 replacing the inherited 12, 0, 12, 0
  4. StackingPanel – remove MinHeight setting
  5. LineTwo TextBlock – increase margin top from -6 to -3
  6. – increase margin bottom from 0 to 17

To explain the previous steps, after setting the LineStackingStrategy for the title, we found a height that matched the target and then adjusted the margins accordingly. Then realizing that the MinHeight value is not going to work for the wrapped title items we shifted to adding a margin bottom to the subtitle.

Final match

Although it takes a little extra fine-tuning you can see that it is possible to get pretty close to the Metro design templates for your WP7 apps.

The one big thing missing is font tracking, but that will show up in Silverlight 5 as a Character Spacing property on text controls. Since the upcoming WP7 “Mango” release will bring the phoen up to Silverlight 4, I’m guessing I’ll revisit this post summer 2012 around when Silverlight 5 makes it to the phone.  Then we can finally rest and reproduce a perfect match.

Until then, this little project is going on the shelf.

You can download the final source code here.

Golf Tracker and DailyAwesome – New WP7 tutorials on the Toolbox Site

The Microsoft Toolbox site has been updated with extra credit. The new material covers Widnows Phone 7 and includes 4 apps with source code, video and written tutorials.

You can see a few shots from Andy Beaulieu’s Air Hockey app, and below you’ll find apps from the two tutorials I worked on – Daily Awesome (a hard rock to do list) and Golf Tracker (a Metro extreme app).

DailyAwesome Screenshot

GolfTracker Screenshot

You can find all the material and the rest of the free, design-oriented training content on Microsoft Toolbox.

New Windows Phone 7 tutorials for Designers on toolbox!

One of my recent focuses has been diving into the topic of designing applications for Windows Phone 7.  Although simple upon first glance, the Metro design language has strong guidelines and can make a real impact on the design of your own applications.

I was lucky enough to become part of the effort with Avlade to update the Microsoft design Toolbox site with Windows Phone 7 content. After a good amount of time digesting the Metro design language, the Blend for Windows Phone add-in and the experience overall, we’ve come up with 7 tutorials for designers beginning their own WP7 journey.

Metro Design Language of Windows Phone 7
Metro Design Language of Windows Phone 7

Metro is the name of the new design language created for the Windows Phone 7 interface. When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface.

Windows Phone 7: Starting to Design an Application
Windows Phone 7: Starting to Design an Application

Microsoft Expression Blend offers a feature rich environment for designing highly interactive experiences on Windows Phone 7.

Design Tips and Tricks for Windows Phone 7
Design Tips and Tricks for Windows Phone 7

The following list of tips and tricks will help you design and develop Windows Phone 7 applications.

Layout Tips and Tricks of Windows Phone 7
Layout Tips and Tricks of Windows Phone 7

One of the more powerful features that Silverlight offers you is an array of container controls providing a simple way to accomplish the layout of your dynamic applications.

Taking Advantage of Photoshop Templates
Taking Advantage of Photoshop Templates

In this tutorial, you discover how to use Photoshop Windows Phone 7 template files to create pixel-perfect application layouts for your Windows Phone 7 application.

FXG Import and Workflow
FXG Import and Workflow

FXG is an acronym for Flash XML Graphics File, and it describes an XML-based graphics interchange format created by Adobe for the Flash Platform, and is supported by Microsoft Expression Blend.

Designing for Gestures on Windows Phone 7
Designing for Gestures on Windows Phone 7

No longer do smart phones of today depend only on hardware keyboards or the stylus of the past. Windows Phone 7 devices come equipped with a capacitive touch screen that offers a smooth, accurate, multi-touch enabled experience for the user.

And there’s more on the way!

Keep an eye on the Toolbox site and Twitter account (@designtoolbox) for the latest information.

An easy way to preview your HTML in the WP7 web browser

This is an easy to preview what your HTML will look like in the version of IE used as the browser in Windows Phone 7.

There is a feature in Expression Web called SnapShot that provides a way to easily preview a static render of your HTML.  The benefit is that you don’t have to open a new window to see it, instead the preview is displayed within in a panel of Expression Web.

SlapShot is an Add-In for Expression Web 4, that extends the SnapShot functionality by making the preview interactive as well as supporting plug-ins like Silverlight and Flash. Additionally the latest version of the SlapShot Add-In can synchronize the current HTML with an instance of the Windows Phone 7 emulator.

Let’s see how this works.

  1. First, you need Expression Web (trial) and the WP7 Tools (free) installed
  2. Then download the SlapShot Add-In
  3. Open Expression Web and select the Tools -> Add-Ins option.
  4. Click Install and select the “SlapShot.xadd” file
  5. Then to open the SlapShot panel, select the Panel -> SlapShot option.

Now to meet the requirements of the Add-In you need to do a few things:

  1. First create a Site by selecting Site -> New Site. This is just a test so feel free to go with General and One Page Site in the default folder.
  2. Open the newly created “default.html” file by double clicking the file name.
  3. In the body element add some text so you can verify the page is loaded.  Something as simple as <body><h1>Hello!</h1></body> is sufficient.
  4. Select the Site -> Site Settings option and then on the Preview Tab, change the options to read “Use Microsoft Expression Development Server: For all web pages”. Hit OK.
  5. Hit F12 to start the dev server and preview the page.

The SlapShot panel should now light up and show you a preview of your page. (If it doesn’t work right away, change the Browser Resolution drop down).

Now to get this to run in the Windows Phone emulator:

  1. check the “WP7” checkbox in the SlapShotpanel
  2. Change the HTML and save it to refresh the preview.

After the emulator loads you should see something like the following:

Now every time you save your HTML, it will be reloaded on your Windows Phone and the SlapShot Panel.  Although this may not be your normal workflow, it could be handy way to fine-tune Windows Phone 7 specific CSS for your web pages.

As a more complicated example, but still simple HTML, I grabbed the source for the Labs page I’m putting together. Both rounded corners and rgba color values are being used in the CSS and you can see each view looks slightly different.

This just reaffirms for me how nice it is have tools like this so we can preview during design-time proactively and not reactively after development is done.

For more information and updates about the SlapShot Add-In checkout jdixon’s blog.

Dissecting the IE9 Fish Tank demo: PNG based sprite sheet animation with Canvas

FishIE tank

One of my favorite demos from the IE9 Test Drive site is FishIE Tank. Labeled a “Speed Demo” the FishIE Tank demonstrates hardware acceleration, canvas based image manipulation and PNG based sprite sheet animation. And watching the FPS meter on the side of the demo, with 500 fish on a wide screen monitor it still reads ~32 FPS, almost 60 fps with 250 fish. That’s worth taking a look at the code to see how its done.

I decided to recreate the demo to understand the code better.  This first part covers only the background image rendering and the sprite sheet animation.  Plus I’ve switched out the image and sprite sheet to something a little more unique.

Spinning Heads Part1

Run the first Spinning Heads demo
(for the best results run it in the IE9 Preview, Chrome isn’t too bad, Firefox is not so good)

Of course since this is just HTML, JavaScript and Canvas you can View Source and read the commented code to figure out how the demo works.  To save you some time, though, I’ll highlight the setup and the two main features.

Two canvas layers created during SetupSpinning Heads Part1 Diagram

When the page loads, the setup function is called and two canvas elements are created and added to the page. Pointers to the drawing context are then saved for reuse during the drawBackground and draw functions.  With CSS, the spriteCanvas is absolutely positioned so the heads appear over the background.

Drawing the background image

On load and when the window is resized the drawBackground function is called:

The main thing to point out here is the flip variable used to mirror every other background tile to create a smoother horizontally repeating background image, no matter what image is used. Vertically the image is stretched to match the height of the window.

Drawing the Sprites

During the setup, the sprites or Head objects in the case, are created with the createHeads function. A loop is then created using the setInterval function to call the draw function every 36 milliseconds. During the draw function each Head object is told to spin, effectively moving the next step through the sprite sheet.

Important to note here that in the draw method, if the context is not cleared first, artifacts from previous “frames” will remain. This is not a retained mode graphics system, we’re just creating a big set of pixels that all share the same layer.

The next bit of code to call out here is within the spin method a call to save() and restore() is used to manually add and remove the translate and scale transforms.  This way the transforms are unique to each Head.  Otherwise the transforms by default are cumulative and each successive Head would be moved further and further off the screen.  This is similiar to pushMatrix and popMatrix in Processing.

And finally the real magic, each successive draw call increments (or decrements when going in reverse) the cell variable which offsets the drawImage call so that the appropriate section of the sprite sheet is called.

So that’s it for the basics! If you’re familiar with procedural based animation the techniques should look pretty familiar to you. The biggest difference here is that there’s no plug-in or applet, just JavaScript and a modern browser.

Import Art from Photoshop and Make into Silverlight Controls

One of my favorite features of Silverlight is the ability to completely redefine the visual elements of a control. By editing templates and visual states you can reuse the functionality of controls without having to write any custom classes or logic.

In this tutorial, we’ll take graphics created in Adobe Photoshop and Illustrator, import them into Expression Blend and then quickly turn the visual assets into interactive Silverlight controls.
Download the Assets for this tutorial

Import a Photoshop file into Expression Blend

If you open the “cmanlogin_unmerged.psd” file, included with the tutorial assets, you will see an image similar to the thumbnail shown here.

Here we have a thin hairless caveman which will be used as the login screen for a website. Notice the two rounded rectangles which represent a focused and unfocused textbox for username and password entry. Also check out the cave man’s spear, which we’ll turn into a working torch after the textboxes are ready.

Let’s begin. The following steps are based on Expression Blend 4 and Silverlight 4.

  1. Open Blend and create a new “Silverlight Application” and name it “ImportArtSample”.
  2. From the menu at the top select the File -> Import Adobe Photoshop File option.
  3. In the dialog, navigate to “cmanlogin_unmerged.psd” file, included with the tutorial assets and click Open.
  4. Once opened the Import Preview dialog should look like the picture below. Examine the preview and you will notice the following bits of information:

    1. Preview of the composed image – no need to have Photoshop on the machine doing the import work.
    2. Select a Text layer and at the bottom of the dialog you will see the options to Import the layer as editable content (TextBlock control) or a flattened bitmap (Image control).
    3. Select a Shape layer and at the bottom of the dialog you will see the options to Import the layer as editable content (Path control) or a flattened bitmap (Image control).
    4. The “fx” icon denotes that Blend is able to reproduce the Drop Shadow effect in Silverlight and will not “flatten” the Layer Style.
    5. The only option for raster layers is to be imported as Image controls.
    6. The “i” icon lets you know that the “Multiply” Blend Mode from Photoshop is not supported in Silverlight, so you should merge those layers before importing to get the same effect.
  5. On the Import Preview dialog, hit Cancel. We need to fix the Blend mode issue first. In Photoshop merge the “shadows” and “caveman” layers and save the file or use the “cmanlogin.psd” file included with the tutorial assets for the next step.
  6. From the menu at the top select the File -> Import Adobe Photoshop File option and navigate to the merged “cmanlogin.psd” file, and click Open.
  7. Uncheck “Layer 1”, since we do not need the background layer and click OK.
  8. In the Objects panel, expand the cmanlogin Canvas to explore the results of the Import:

    1. First glance at the Artboard – the results look exactly the same as the layers in Photoshop.
    2. The imported elements are contained within a Canvas control named cmanlogin after the imported file name. The Canvas provides absolute xy positioning like Photoshop allowing for a high-fidelity import in regards to positioning.
    3. The caveman Image control is used to display the raster “caveman” layer. You can find the PNG file in the Projects panel under the “cmanlogin_Images” folder.
    4. The password Path is the yellow rounded rectangle shape. Notice the DropShadow Effect applied in place of the layer effect.
    5. Both text layers have been imported as TextBlocks with the custom font at the correct size. Additionally if you check out the ScaleX and ScaleY properties of the ROCK_ TextBlock you find it has maintained its horizontal and vertical stretching.
  9. Now let’s stretch out the elements to take up the full space. Click and drag the ROCK_ TextBlock to align horizontally with the Brought_the TextBlock. Notice that a clip has been applied to the cmanlogin Canvas hiding elements outside of its bounds:
  10. The clip is used to hide any elements that may have been imported and positioned off screen. We don’t need to hide anything, so let’s remove the clip. Select the cmanlogin and in the Properties panel type “clip” into the Search box.
  11. Click the Advanced options square and select the Reset option. Clear the search filter by clicking the “X” in the search box.
  12. You should now see the rest the text in the ROCK_ TextBlock. (You may need to reposition the TextBlock slightly to get the drawing surface to update.)
  13. Next reposition the yellow password Path set it is above the username Path make larger to fill up the space available.

Make Into Control

Now that the elements have been imported, let’s turn them into working Silverlight controls.

First we’ll make a new TextBox Style which will give the TextBox control class new visual elements to use for display and interaction. This is done by using specific Part names for controls and specifically named Visual States. The TextBox control class will then use these named elements when displaying text, reacting to a mouse over or any other functional aspect possibly displayed in the UI.

  1. Right-click the yellow password Path and select the Make Into Control option. In the dialog, Blend will display all of the Silverlight controls that are able to be templated for you to choose from. Enter “text” into the Search box and select “TextBox”. Keep the defaults and hit OK.
  2. You have now entered the Template Editing Zone. In the Objects panel, [UserControl] has been replaced with TextBoxStyle1 (TextBox Template). This lets you know you are editing a reusable Resource, not an instance of a control. The Objects panel is displaying the tree of elements used for this template.
  3. To start with we have the password Path available as a background element, but we need a place to put the text. In the Toolbar, click and hold on the Grid tool until the container menu comes up, then select the ScrollViewer. Now double-click the ScrollViewer to add an instance to the Grid.
  4. With the ScrollViewer selected, in the Properties Panel (make sure to remove the “clip” search filter if it’s still there) Set the Margin to 8,0,8,0. In Silverlight the order goes “Left, Top, Right, Bottom” unlike CSS which is “Top, Right, Bottom, Left”.
  5. Set the HorizontalAlignment to “Stretch”, Width to “Auto” and the BorderBrush to “No brush”.
  6. Right-click the ScrollViewer and select Make Into Part of TextBox -> ContentElement. And the default text appears, right away:
  7. With the Part in place to display the text, let’s modify the Visual States to share when the TextBox has focus. Open the States Panel and you will find the Visual States created by Blend for you based on the TextBox class.
  8. First let’s create the default look of the TextBox. With the Base state selected, change the Fill property of the password Path to the gray color of the username Path. Change the Opacity of the DropShadowEffect’s Opacity to 0%.
  9. Now select the Focused state and change the password Path Fill property to a bright Yellow and set the DropShadowEffect Opacity to 80%.
  10. Hit F5 to Run the Project and test your new TextBox style. Click the TextBox to give it focus and you’ll see it change to yellow with a dropshadow. Then start typing. Pretty cool, right?

Reuse the new Style

Ok so now that we’ve defined a TextBox Style as a reusable Resource, let’s reuse it.

  1. First make sure you are no longer in template editing mode, you can do this by clicking the Return to Scope icon in the Objects panel.
  2. Select the username Path and delete it.
  3. In the Toolbar, click and hold on the TextBlock tool until the text menu comes up, then select the TextBox. Then draw a new TextBox below the styled TextBox:
  4. Now right-click the new TextBox and select the Edit Template -> Apply Resource -> TextBoxStyle1 option.
  5. Since the size of the TextBox was not hard-coded into the template they may not look exactly the same. You can type in matching Width and Heights for the TextBoxes or you can also select them both and use the top menu Object -> Make Same -> Size option.
  6. Hit F5 to Run the Project and test the pair of TextBoxes in action. Switching the focus between the two TextBoxes really shows the control’s Visual States in action.

Import from Illustrator

If this were a tutorial about creating a login screen, our next step would probably be to add a button to validate the user’s credentials. Instead since this is a tutorial on importing artwork and control templates in Silverlight, we’re going to turn the caveman’s walking stick into a torch.

  1. From the menu at the top select the File -> Import Adobe Illustrator File option.
  2. In the dialog, navigate to “cmanlogin_flames.ai” file, included with the tutorial assets and click Open.
  3. In the Objects panel, expand the cmanlogin_flames Canvas to explore the results of the Import:

    1. The imported elements are contained within a Canvas control named after the imported file name, just like the Photoshop import.
    2. Each Illustrator Layer is separated into its on Canvas.
    3. Vector elements are imported as Paths.
  4. Let’s get rid of the unnecessary Layer_2 Canvas, by right-clicking on it and selecting the Ungroup option.
  5. Select both of the Paths and reposition them closer to the upper left corner of the cmanlogin_flames Canvas.
  6. Resize the cmanlogin_flames Canvas to fit the Paths. The original 800×600 size came from the Artboard size in the Illustrator document.

Reuse Functionality

The last time we made some artwork into a control, we really just provided a custom background (rounded rectangle) and a custom Visual State (bright yellow with dropshadow). That’s not too much of a stretch, so this time we’ll reuse the checked functionality of a CheckBox to create a caveman torch that clicks on and off. We’ll add custom transitions as well so we get a flicker of the flame when it turns on and off.

  1. Reposition the cmanlogin_flames Canvas so the flames look like they are emanating from the torch. You may want to reposition the cmanlogin Canvas a bit so the flames don’t go off the top of the screen.
  2. Right-click the cmanlogin_flames Canvas and select the Make Into Control option.
  3. In the dialog, select the CheckBox control and hit OK.
  4. In template editing mode, delete the ContentPresenter. Our torch doesn’t need to display any text.
  5. In the States panel with the Base state selected, set the Opacity of the cmanlogin_flames Canvas to 0%
  6. Select the Checked state and set the cmanlogin_flames Canvas Opacity to 100%. Change the Default transition of the CheckStates EasingFunction to CircleIn and the duration to 0.5 seconds.
  7. Click the Transition Preview button in the upper right of the States panel and toggle between the Unchecked and Checked states to get a preview the transition at design-time. No need to Run the project, which is nice.
  8. We’ll use the default transition as the way to “turn on” the flame, but we want the flame to flicker so let’s create a custom transition. On the Checked state, click the Add Transition button and select the Checked -> Unchecked option.
  9. Set the custom transition to a BounceOut EasingFunction and to a 1 second duration.
  10. Run the project and click the end of the torch to turn it on. Click again to turn it off. Wasn’t that easy?

Conclusion

Control templates in Silverlight are very powerful and customizable. Expression Blend makes the process of creating and editing templates much easier and the addition of the import from Adobe tools is the knockout punch. As you may have figured out by now, this process could only be made better by providing a two-way relationship between the asset design tool and Blend. The good news is this was demoed at MIX10 in the form of an
FXG Import from Illustrator. Once this add-in is released we’ll be in even better shape as Silverlight UI designer and developers, and I’ll be making another tutorial.

New tutorials on .toolbox on PathListBox and Fluid UI

We tweeted about them, but I realized this morning I haven’t blogged about the new tutorials on the .toolbox site.

 

To go along with the Expression Studio 4 launch, the team has put together a new 5-day OnRamp training course. The course introduces the Expression Studio tools and is very useful as a first step into the wild world of Expression. The fifth day of the course leads you to the .toolbox site where more advanced courses and tutorials are provided.

Here’s a list of the first two tutorial series:

PathListBox Series

Fluid UI Series

What other topics would you like to see?