Download Project Files for AutoCompleteBox Sample Data Project

So you’re playing around with Silverlight in Blend 3 and you set up some sample data. (If you don’t know how to do that, I’ll get to that in this tutorial too.) Your sample data is all set up and you’ve attached it to your AutoComplete box… but nothing happens. You get angry and throw your computer out a window (unless it’s a MacBook, in which case you apologize to it for flirting with Microsoft technologies and take it for a little cuddle), but you eventually think you want to try again and so you go looking for the problem on the internet. Hopefully that is what brought you here.

I talk too much, I know.

Just to start out at the beginning, if you didn’t know that Silverlight 3 had an AutoCompleteBox, that’s because it isn’t a default control. You can install it and several other fantastic controls via the Silverlight Toolkit. If you don’t have this installed, do so now.

With the Silverlight Toolkit installed, let’s just make sure we have the right problem.

OK… lets create our sample data. In the top right corner of Blend, you’ll see a couple of tabs. Click on the “Data” tab and click on the “Add sample data” menu and choose “Define New Sample Data…”

Name your database something short (you’ll see why later) and rename the “Collection” collection to something less confusing, like “Sample”. Add some string properties and give them handy names. You can see my sample data as a starting point…

That’ll do for now. Now, draw an AutoCompleteBox into your UserControl and drag the Sample collection on top of it. It will set itself to be the default ItemsSource. Now, hit F5 to run your application. It should act like this one below… if you type stuff, nothing comes up… but if you type “e”, you can see (in my sample, at least), it shows a set of items labeled, “Expression.Blend.SampleData.AutoData.SampleItem”.

This is because the filter being used by default in the AutoCompleteBox takes the items and converts them directly to strings. If the item itself is an object (like this example and like most real data you’re probably using), it will convert it into the string representation of that data type.

So let’s fix it. First, we’re going to create an ItemTemplate for our AutoCompleteBox so that we can actually see the data in it. The quickest way to do this is actually kind of silly. Create a ListBox in your app and drag the data collection into it. It will auto-generate a super simple ItemTemplate. Then right-click on your AutoCompleteBox and go to “Edit Additional Templates –> Edit ItemTemplate –> Apply Resource –> [name of generated template here]”

Delete your ListBox, just to clean things up.

Now you’ll have an AutoCompleteBox that shows the data like you want it, but it’s still looking at the “Expression.Blend.SampleData.SampleItem” when you type in the box, so it’s not acting the way we want. In order to do that, we just have to override the “ToString()” method in the AutoData. Open up “AutoData.xaml.cs”

Scroll down to the “SampleItem” class and make the beginning of that class look like this:

public class SampleItem : System.ComponentModel.INotifyPropertyChanged
{
    public override string ToString()
    {
        return Name;
    }

If you want to use another property as your text return, just use that property name instead of Name. If you want to use a combination of properties, you could do something like this:

return Name + " - " + CompanyName;

Although, if you want it to look at two fields, you should change the FilterMode to “Contains”

And… tada! You’re done… unless you want to give it some styling to better enhance the user experience (like putting the name at the top so that it draws the eye).

Also valuable, check out Tim Heuer’s post on turning the AutoCompleteBox into an editable ComboBox.

Download ComboBox TextWrapping Tutorial Project

Sometimes you just want stuff to work the way you want it to work. I want a property on the Silverlight ComboBox that says “WrapText”. But alas there is not one, so I have to do it myself.

So your ComboBox looks like this:

and you want it to look like this:

Let’s make that happen.

First, we need to make sure that the DataTemplate is going to act in such a way that it is compatible to having the data inside it wrap.

So… right-click on your ComboBox and go to: “Edit Additional Templates –> Edit Generated Items (Item Template) –> Edit Current”

If that option isn’t available, go to “Create Empty” The DataTemplate in my sample looks like this:

Hopefully, you have the binding information available for your data. If not, check out this post on creating sample data for the purpose of styling things. Make sure all the Widths and Heights (but especially the Widths) are set to “Auto”.

And make sure your TextBox or TextBlock has TextWrapping=”Wrap”

So now your ComboBox wraps in the main section… which is awesome, but you still have this happen when you open up the DropDown (PopUp)

If you want that to wrap as well, the solution isn’t hard so we’ll deal with it here instead of giving it another post.

First,change the HorizontalContentAlignment on the ComboBox to be “Stretch”.

Next, right click on the ComboBox and go to “Edit Additional Templates –> Edit Generated Item Container (ItemContainerStyle) –> Edit a Copy…”

What is happening is that the ItemContainerStyle element is requesting all the space in the world from it’s parent and since the parent with the ultimate authority is a PopUp, it sees no reason to constrict the ItemContainerStyle with irritating constraints, so the text element finds no reason to start wrapping. So, we’re going to tell the ItemContainerStyle that it can only request a certain amount of space. In this particular case, we’re going to set MaxWidth=”200”

And we get this:

And we’re happy.

Or at least I hope we’re happy. If you’re not happy, mention your problem in the comments and I’ll try to get back to you with any tweaks or updates you need.

Download ComboBox Styling Project Files

This post is meant to be a center point for topics related to styling the Silverlight 3 ComboBox. It will go over the basic about ComboBox styling and will also get updated with links to tutorials about common design problems with the ComboBox.

So, let’s get started…

If you want to change the look of the main ComboBox or the ComboBox drop down (popup),

you’re going to want to change the main template of the ComboBox.

As an aside, in order to make this as simple as possible, we’re not going to connect out ComboBox to any data… we’re just going to add a bunch of ComboBoxItems to it. To do this, click on the double-arrow at the bottom of the toolbar and type “combo” into the search field.

Click on the ComboBoxItem and draw it into the ComboBox a couple times. This will give your items some weird heights and widths, so change those if that bothers you. We now have enough items to be able to see the drop down for the purposes of styling it.

OK… let’s get started with actually working on the ComboBox template. Right click on the ComboBox and going to “Edit Template –> Edit a Copy…”

This will dump a copy of the default ComboBox style and template into your resources that you can play around with.

Let’s say we want to do something as simple as changing the corners in the main comboBox and the drop down to make them a little more rounded.

When we look at the template, we should see something that looks like this:

Let’s start with rounding the corners of the pop-up, since we can do that from right here. On the PopupBorder element, let’s change the CornerRadius to “0,0,16,16”. And let’s change the border color and thickness just cause we wanna. We end up with something like this:

Now, lets work on changing the corners on the rest of the ComboBox. As it turns out, most of the visual elements in the ComboBox are in the DropDownToggle ToggleButton and go to ControlTemplate by right clicking on it and going to “Edit Template –> Edit Current”

Now, we can see 8 rectangles that make up the design of the ComboBox. If you wanted to simplify the design, you could get rid of them and put something else in, but we’re going to assume for the moment that you just want to change the corners. Go through the rectangles and if RadiusX and RadiusY are 3, change them to 16 an if they are 2, change them to 15.

  becomes

And you have something that is… not that attractive, but it is definitely different.

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

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.