Mix:UK 07: Building Rich Client Applications with Blend, WPF & Silverlight.

Presented by Jon Harris. May I start by noticing that all the laptops in the room are a MacBook Pro or another. And to answer the question of why I attend this session and not the .net development one, it's because I want to have a better insight at the workflow a designer goes through, whereas the .net part I can fairly easily teach myself on the net.

Jon used to work at Macromedia, and is a User Experience Evangelist. Concentrating on the workflow between blend, WPF and silverlight.

The video showed in the keynote being split in the jiggsaw puzzle was not 70 video files but only one split dynamically in 70 bits.

Build components, data binding, 3d stuff, are all things that we're going to do, and all this with no code.

Look at 3D first. Running the 3.5 beta framework because there are new improvements for 3d.

We start by seeing how we can change the look and feel of a button. Simple animation with a normal windows gray button. Copy a button and drag the copy. By default a guide helps dragging the button aligned with the previous one. Because the text is so small when you switch to a huge screen, the workspace zoom lets you resize the whole UI in the application. The whole panels of Blend can be put away when you need more space.

The first time you use Blend you can be overwhelmed by the amount of properties each component has. Using the filter list on top of the properties you can search for different tools. On the left you have objects, timelines and event management.

Click on a button, choose the button click, what do you do? The UI shows When button_Copy Click is raised, choose a new animation to create a new storyboard / timeline / animation [Edit: 3 names for one concept is a bit weird]. If you ever used Flash before, a new timeline was created, there's a red light which shows the timeline is animated.You turn it on and off by clicking on the red button.

Grab the body of the bird object, move in the timeline, move the bird and create a key frame. There's a faint dotted line showing the animation that is being created.

When clicking the button on the left, the animation moves the bird to the left, with the right button it animates to the right. If you click too fast though, suddently the animation jumps. That's because of the use of key frames.

Blend has this idea of hand-off timelines to do an animation from wherever an object is done to the keyframe. You remove the start key frame and only keep the end key frame. Now when you click the animation, even when clicking fast, the animation moves from wherever it is to the keyframe rather than from one key frame to another.

The buttons still look ugly though. A button is split between the code of how it works and how it looks. You can right click the button and edit a template for the button. A button is made up of a Grid, with a border, and a ContentPresenter that can contains anything. You can grab the border and delete it. It's not going to look better, it's going to look different. Use an ellipse, change the fill, change the stroke. In Blend you can click and drag on the stroke size and it adjusts in realtime. You can add an opacity mask to add a gradient.

The button looks have been changed. It's still a button. This confuses developers, giving the rollodex that is in fact a listbox. Only the style has been changed.

If you want to do a rollover for the button, you have options to trigger things based on when the mouse is over or not. Click Add a new timeline, select the new time on the timeline, and add a rotation transform. Add an option to repeat forever.

As soon as you put the mouse over, the whole circle keeps on circling around, even when you leave. Add a new action for deactivate, select the previous timeline and ask it to stop. Whenever the mouse leaves, the animation leaves.

Question: When you roll out does it reset the animation or stops where it was? If you choose stop as we did it goes back to the original position, if you click pause the animation will pause.

On the right you have a resource panel. You can modify all the styles that have been done. Choose an existing style, drag and drop it to the button, and suddenly the button changes styles but don't change any behavior. Same happens if you choose a 3d flower.

But as you saved the previous style, you can drag and drop it back on the button.

Another example used in Blend is for a bathroom with color wheels on the right. The control that shows the colors is a control. Let's see how it's done.

Create a new control in Blend. You have an empty application and put a yellow background. There's a whole list of controls you can use. Whenever you drag and drop it, it is just the default gray look. You create a new UserControl and set it to the correct size.

Add a Rectangle, round the corners. With vector tools, you do round corners and when you resize so do the corners. They stay to the same size in Blend. Add a fill color, and create a gradient in that rounded corners rectangle. Create a circle, as soon as it gets close to the edge it gets magnetted at a user-defined distance from the border, move it a bit more and it sticks on the border itself.

The original example had a few colors, so if you want to show a list of colors, you use a listbox. It's the default one which is a white box. Remove the background, remove the border, and keep the text black. How do we get data in the listbox? Go to the data window, and choose an xml data. The developer export data in an xml document, the designer uses this, and when the app gets released the developer re-hooks it to the database. Now that it opens you see the content of the xml. You can drag and drop the color list on the list box and shows the create Data Template window.

It lets you choose how you want the data being bound to your control. It now looks like a list of text, not quite right yet. We're going to do what we did with the button, and edit the template for the ListBox. There's two templates: the ControlTemplate controls what the control looks like, the grid, the border. You can choose the ItemTemplate to control how the item is bound. You can grab the content and start resizing it. You can draw a rectangle instead of having the text. Each of the properties have a small square next to it. Click on it and you have the databinding window. It hsows you the data you can bind to. Were going to databind the filling colour with the colour that was in the xml file.

Move back to the default area and draw a line on top of it, put some color with a gradient. Sets everything to white and add transparency. Copy the background and this highlight and combine them.

You can now go back to your application design view. You have to rebuild the project before the control you gave it can work. Build and your control appears, double click and the control gets added.

When you rotate it's done from the center. But if you drag the small circle in the middle of the object, you can drag and drop it to become the new rotation center point. Rotate and it now rotates from the bottom border.

Add an animation saying when a window is loaded, start a new animation, which creates a timeline, move later in the timeline, add an angle, go further, add yet another angle.

The fantastic thing is that because you used a ListBox, the keyboard behavior still works perfectly without adding any code and no work from the designer.

Question: Is there an ease-in and ease-out function? See that in a few minutes.

Introducing some layout controls in WPF and Blend. Showing a photo application that shows different group of pictures.

Change the size and the color scheme of the application. What do these things scale? Well Blend is written and designed with Blend and Visual Studio. When you move the mouse over the edges of a window, you can define slices. [EDIT: I assume he's talking about the Grid control].

You can copy and paste content between two different versions. When you move the element on the page, there's a very think line from the side of the object to the side of the application. The chain icon does the same thing to keep the object resized to the section defined earlier.

When you run the application, as you resize, the sides resize and move as expected. If you click on the lock symbol on the side of one of your slices, it preserves the size instead of resizing it, so that it's a fixed size.

You can add a Grid splitter. It lets you draw over that slice you defined. As you drag it on the surface it's default window gray style, You can restyle it. On the left of it draw a gradient. Run the application and drag and drop the splitter, and it resizes correctly.

The data has a parent / child relationship. The data is an xml file, master / details. As before, we drag a list box on the left, style it, and databind it to the gallery array from the xml file. When the Create Data Template window opens, you can remove all the content you don't want. Let's keep the gallery name and remove the pictures. Style the lsitbox to see the text and automatically it's bound and all the galleries defined in your xml file are presented.

Now the right hand side of the application is empty. We want to change the content based on the selection on the left. First, give the controls sensible names. Let's called the left hand part called menu. On the right hand side, we're going to select the DataContext and it opens the databinding. We choose to bind an element property. We choose the menu we created, and you can see all the properties you can bind to. We bind to the SelectedItem property. Now we want to decide whant we want to databind to, so we choose explicit datacontext, and choose the photo. Its only the path of the image path. You can redefine the binded value to Picture instead of text, and Blend will automatically show an Image. [EDIT: The demo didn't work for DataBinding, I still think setting the datacontext to menu.SelectedItem and binding to the object itself would've worked, or set the DataContext to the menu and choose the binding as the SelectedItem property. The presenter recovered admirably though].

You can create a VisualBrush from your application. Then create a Grid and sets its filling as the brush you just created. Do another one, turn it around and add some transparency. Whenever you change anything on the left side of the application, the right side shows the two grids and they change dynamically as you move your mouse over your main application.

You can reuse the same idea with a visual brush on a 3d sphere, and the effeect is the same.

Let's try something different, like a Video. Drag and drop it on the project, then add it to your window. Make it as a visual brush. In your 3d object, change the material to that new brush. When you test it, the video plays on the left, and the 3d object on the right is showing the video wrapped around.

Opening another sample. A couple of events are hooked up (beginning with ZAM3D) and the video plays on the screen and moves around.

Finally, to talk about designer / developer workflow. For silverlight, you need Blend 2, which look mostly the same, but there's a difference. When you create a new project, you now have the choice of Silverlight Javascript, Silverlight .net, WPF application or WPF control library.

Designers have done an application: 12 movies, all named differently.The developer has written the javascript to put them in 3d, because the designer doesn't know much about javascript. Start it, it runs in a browser. The 12 videos are playing at the same time. Went from flat to three dimensional, the designer did the look and feel, the developer did the 3d part.