What’s better than going to MIX09?  Going to MIX09 for free!

Congrats to Matthias Shapiro and Jason Alderman, two Veracity rockstars who won Tim Heuer’s having fun with Silverlight contest and scored free admissions to next month’s conference.

Going to MIX?  See you there!

When I started using Silverlight, I was moving over from Flex, and the first thing I noticed was: Where is my anchored positioning?

In some cases using a table (Grid) for a layout is not ideal, and if your moving over from Flex like I did, you may want to have something you’re familiar with. This post walks though how to simulate anchored layout in Sliverlight, using a single cell and applying alignment and margin properties to its elements.

The following example, built in Silverlight, illustrates the types of anchored positioning:

Example screen normal size

Example screen stretched

Here is the XAML for the layout of the screen above.

XAML for screen

One Cell, Many Possibilities

As you can see from the screenshots above, as the page is stretched, the elements stretch and retain their positions also. Normally this type of layout in Silverlight would require a Grid with 3 columns and 3 rows, and you would have to add the definitions for them as well as set the column and row properties for each element inside the Grid. To simplify how the page is layed out, only a single cell is needed, and instead the HorizonalAlignment, VerticalAlignment, and Margins are adjusted. A nice side effect of this type of layout, is the XAML used is significantly reduced. I’ll go through each element in turn and explain how it’s layout is simulated from Flex. On the left side of each explanation is the constraints as would be defined in Flex.

Header

Flex layout constraints for Header

The header of the page stays at the top and stretches left and right. In Flex a top, left, and right position for the Header would have been set. In Silverlight, the header of the page is anchored to the top using a VerticalAlignment of Top, and then stretches both left and right by using a HorizontalAlignment of Stretch. A fixed Height is set, and a left Margin of 100 is applied. <Border Background=”Red” Height=”50″ VerticalAlignment=”Top” HorizontalAlignment=”Stretch” Margin=”100,0,0,0″> <TextBlock Text=”Header” Style=”{StaticResource Number}” /> </Border>

Navigation

Flex layout constraints for Navigation

The navigation pane on the page stays vertically centered on the left. In Flex, the verticalCenter and left positions would be set for the Navigation. In Silverlight, VerticalAlignment is set to Stretch, and HorizontalAlignment is set to Left, with a fixed Height applied to the element. <Border Background=”Green” Width=”80″ Height=”200″ VerticalAlignment=”Stretch” HorizontalAlignment=”Left”> <TextBlock Text=”Navigation” Style=”{StaticResource Number}” /> </Border>

Body

Body layout constraints in Flex

The body of the page stretches in all directions while still leaving room for the other elements. In Flex, top, left, right, and bottom positions would be set. In Silverlight, a VerticalAlignment and HorizontalAlignment of Stretch is set, as well as Margins on all sides. <Border Background=”Orange” VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch” Margin=”100,80,80,80″> <TextBlock Text=”Body” Style=”{StaticResource Number}” /> </Border>

Buttons

Flex layout constraints for Buttons

The buttons on the page are centered horizontally on the bottom. In Flex, the positions of bottom and right would be set. In Silverlight, VerticalAlignment is set to Bottom, and HorizonalAlignment is set to Center with a fixed Width and Height on the element. <Border Background=”Blue” Width=”200″ Height=”60″ VerticalAlignment=”Bottom” HorizontalAlignment=”Stretch”> <TextBlock Text=”Buttons” Style=”{StaticResource Number}” /> </Border>

Page

Flex layout constraints for Page

The page number is in the bottom right of the page. In Flex, a position on the bottom and right would be set. In Silverlight, VerticalAlignment is set to Bottom, and HorizontalAlignment is set to Right, with a fixed Width and Height applied to the element. <Border Background=”Purple” Width=”80″ Height=”60″ VerticalAlignment=”Bottom” HorizontalAlignment=”Right”> <TextBlock Text=”Page” Style=”{StaticResource Number}” /> </Border>

Summary

The use of the Grid layout can be simplified and simulate Flex anchored layout by only using a single cell, and applying alignments with margins. Standard absolution positioning can also be achieved within a single cell grid by applying a VerticalAlignment of Top, a HorizontalAlignment of Left, and then using left and top margins for x and y respectively. The translation from Flex anchored layout to Silverlight can be summarized by the table below:

I’ve updated my demo of the Composite Silverlight Library I built to work with Silverlight RTW.  The P&P group has plans to ship the next version of the PRISM library (PRISM 2.0) that supports Silverlight, so I’ve started to use their bits instead of the ones that I built with this sample.  Bellow is a screenshot of the conversion.  As you can see, the default styles in Silverlight 2.0 have been changed, and the rendering is much better.

Download:  CompositeSilverlightRTW.zip

I’m in the middle of trying to update my life to Silverlight RC0. Starting in a week or so, I’ll be trying to update my samples to RC0 and I’ll be creating new Silverlight samples in RC0.

I’m putting the color picker control on hold until after PDC so that everyone is on the same Silverlight page.

Thank you for your patience.

David Anson has put up a pretty cool application for looking at the default templates for Silverlight 2 controls. It works with Silverlight 2 RC0, which was released just this last week.

This is pretty freaking awesome stuff for anyone doing design in Silverlight.  Go check it out.

A note: I would comment more about RC0 except that I’m doing alot of work with Silverlight that needs to be working with today’s plugins and it is my understanding that RC0 stuff may not work with the current plugin. If I’ve misunderstood, someone correct me please.

Super cool new thing I learned today. In WPF, we can make it so that the drop down (popup) on a ComboBox displays the data in a ListView. Because of the fact that I believe the DataGrid will eventually overtake the ListView as the gold standard for data display in WPF, we’ll do it both ways.

This tutorial is done entirely in Blend and without a line of code.

Step 0) (for the DataGrid only)

Go to Code Plex and download the WPF Toolkit. Extract to a convenient location.

Right-Click on the References folder in your project tab and click “Add Reference…”

Navigate to the location you extracted the WPFToolkit.dll file, select it and hit OK.

Step 1) Select the ComboBox you wish to change and edit the ControlTemplate by right-clicking and selecting “Edit Control Parts (Template) –> Edit a Copy…”

Step 2) Find the ItemsPresenter. This is what would normally display our ItemsSource.

We’re going to get rid of it. And the ScrollViewer for good measure.

Step 3) Where the ScrollViewer is, put in a ListView or a DataGrid, whichever one you’re using.

Now, go the properties of that ListView or DataGrid and click on the box to the right of “ItemsSource”

and, in the resulting menu, select “Template Binding –> ItemsSource”.

Set the DataContext of the ListView or DataGrid to the DataContext of the parent ComboBox using the same process.

And… you’re done! Open the ComboBox and you will see that you can select items in the ListView or DataGrid in the ComboBox dropdown and see those items change the selection of the ComboBox.

You’ll notice that this is probably not yet an ideal solution. For example, when we select an item, the dropdown doesn’t automatically close. Your best bet is to use the SelectionChanged event to trigger some logic to close the ComboBox dropdown.

Just for fun, I took my color picker and plugged into Robby Ingebretsen’s Silverlight Particle Generator. I had to make some tweaks to the XAML to alter the look to just what I wanted it to be, but you can check out the result here.

By the way, if you’d like a rock solid version of the color picker, let me know. My inclination is to re-write the whole thing as a custom control and give it support for things like two way color binding, make it a template-able control, that kind of stuff. The end result would be something faster, easier to use and more customizable, but I hesitate to put the energy into it if there is no desire for other people to use it.

So… let me know if you’re interested.

 UPDATE: I will be working on the color picker control, but because of problems with compatibility between the current Silveright plugin and the RC0 plug-in, I’m going to wait until after PDC to put the code out.

UPDATED (09/29/08): I added an event to my user control. You can now use the ColorChanged event to figure out when the color has changed and subsequently apply that color. This invalidates my problem with the slider click events. All downloads are updated appropriately.

Download Color Picker Control Only

Download Color Picker Sidebar Gadget

Download Full Source Code for Project Below

I’m working on getting a tutorial up about how I made my color picker control, but I thought that in the meantime I could at least put up the code and how to use it.

This color picker is nothing more than a simple Silverlight user control with some attached properties. You could literally just add these files to your project and then start drawing color pickers all over the place.

The control has two modes. The default mode is the one seen here. This color picker can be resized to pretty much any size you want. You could make the whole screen a color picker if that was your whim. The second mode is a “compact” mode that reduces the color picker to size of a Vista sidebar gadget (130px by 200px).

Incidentally, if you would like that gadget, you can download it here. I now have it as my constant companion on my side bar.

To switch between these modes, simply flip the “IsCompact” property. Here’s an example app so you can see both color pickers.

You can grab the color from this color picker by watching the ColorChanged event, which delivers both the new color and the old color. There is also a “SelectedColor” property that can used. ColorPickerSolution

If you’d like to see how all this is working, I have the entire source code for the above project right here.

My biggest problem right now is that, for reasons I’ve yet to discover, the slider control (the rainbow colored bar on the side) is a black hole for mouse events, which is why the button doesn’t update when I drag it. If anyone knows why, please let me know. UPDATE: This problem has been invalidated by my implementation of the “ColorChanged” event.

UPDATE: I’ve posted links to all my code here.

I apologize, but I don’t have the time right now to go over how I made this, but I did want to take the time to show it off.

Copy the following to paste this app into web page:

<iframe scrolling="no" frameBorder="0" src="http://silverlight.services.live.com/invoke/77530/ColorPicker/iframe.html" style="width: 300px; height: 200px"></iframe>

Download code for this sample

I was reading Mike Snow’s blog and he had a recent Silverlight tutorial on creating a Zooming toolbar. I looked at it and said to myself, “I think I can do that without code in Blend!” So here’s a tutorial on exactly that.

End product :

Big bonuses to this XAML-only method include:

• Much smoother animation
• Midway animation (if you fly over a button, it doesn’t need to animate all the way up before it starts to animate back down)
• Really low overhead
• Can be done and maintained entirely by a designer in Blend without any code

1) create a new Silverlight project in either Visual Studio 2008 or Blend 2.5.

2) In Blend, add a new folder for our images by right-clicking on the project and selecting “Add New Folder”

3) Pull in our images by right-clicking on our new folder and selecting “Add Existing Item…” Navigate to the images you want to use and select “OK” to bring them into the project.

4) Create the button to which you want to add the image and then double-click it in the Obejcts and Timeline pane so that it has a yellow outline around it.

5) Now, go to the image you want to insert (in the Project panel), right click on it and select “Insert”

OK… so now we have a button with an image in it. Now it’s time to make the sucker zoom.

6) Right click on the button and select “Edit Control Parts (Template) -> Edit a Copy…”

Name your custom Template and hit OK

7) In the “States” pane, you see a set of “CommonStates” (Normal, MouseOver, Pressed, and Disabled). Click on the MouseOver state and a red box will surround your composition, indicating that any changes made will be changes to the “Mouse Over” state, not to the default control.

Recording state:

8] Click on the highest level item in the template (in my case, it is a “Grid”) and go to the “Transform” section in the “Properties” pane and select the “Scale” transformation tab. Change the X and Y scales to “1.5″

If you run the project now, you’ll notice that we get a cool zoom in effect on the mouse over, but our zoom out when the mouse leaves the button is basically a snap back to the original size. Let’s fix that now.

9) Click on the the arrow icon in the MouseOver state in the States pane and select the “MouseOver -> Normal”

In the “Transition Duration” box, type “.2″

10) Extra Designer Happiness Bonus Step! - If you’d like to have a zoom effect that isn’t strictly linear, open up the timeline view with the button on the right hand of the state recording box (seen below).

Click and drag the keyframe (the light gray oval below) to the point you want it. I put mine at .3 seconds.

With the keyframe selected, you should see an “Easing” pane on the right. The default easing is linear (aka. no easing), but you can change the easing curve by just dragging the yellow dots. Here is the easing curve I’ve found works pretty well for my apps.

That’s it. Now you can just assign this template to a button and you’ll have this zooming functionality all set up.