Control Styling Tips: ComboBox

Hello!
In this article, I’d like to provide you with some information and tips that you’ll find useful when styling a Silverlight 3 ComboBox.

Visual states. CommonStates (Normal, MouseOver and Disabled), FocusStates (Unfocused, Focused and FocusedDropDown) and ValidationStates (Valid, InvalidUnfocused and InvalidFocused).

Template parts. ScrollViewer (ScrollViewer)

The following tips will help you out a bit:

• A combo box consists of a popup window containing a list of items, an area in which the currently selected item is displayed, and a toggle button used for opening and closing the popup.
   
• The ContentPresenter part is mandatory and its purpose is to display the current item. If you put some content inside the ContentPresenter part in the template, then that content will be displayed whenever there is no current item.
   
• Provided IsHitTestVisible is true, the ContentPresenterBorder part can be clicked to open and close the popup, and the popup will be located at the lower left corner of ContentPresenterBorder. A layout Panel is a good choice for the ContentPresenterBorder part.
   
• The DropDownToggle part is optional but you can use it as another way to open and close the popup.
   
• The Popup part is mandatory and this is the part in which the items are displayed. An ItemsPresenter is used to indicate where the items should be displayed and the ItemsPresenter should be put inside the ScrollViewer part. The Popup is opened relative to the bounds of the template’s root object.

Here’s some artwork you might want to try turning into a ListBox:

 

The XAML that resembles the artwork is: 

<Grid Height="70" Width="120">
      <Rectangle x:Name="contentarea" Fill="#FF333333" RadiusX="5" RadiusY="5" Height="20" VerticalAlignment="Top" />
      <Rectangle Fill="#FF666666" RadiusX="3" RadiusY="3" HorizontalAlignment="Right" Width="14" Height="18" Margin="0,1,1,0" VerticalAlignment="Top" />
      <Path Fill="White" Stretch="Fill" Width="8" Height="5" Data="M5.7173147,11.703464 L2.1841664,15.643844 L-1.125701,11.686405 L-3.9660852,11.703464 L1.2701876,17.179058 L3.1969538,17.162271 L8.6071014,11.686404 z" Margin="0,8,4,0" HorizontalAlignment="Right" VerticalAlignment="Top" />
      <Rectangle x:Name="popupbackground" Fill="#FF333333" Stroke="#FF4C4C4C" Margin="0,20,0,0" />
      <TextBlock Margin="5,25,0,0" Foreground="White" Text="Lorem"/>
      <TextBlock Margin="5,46,0,0" Foreground="White" Text="Ipsum"/>

</Grid>

To create a real ComboBox out your artwork, perform the following steps:

• Select [Grid] and click Tools > Make Into Control > ComboBox > OK.
   
• Select the two TextBlocks and Cut. Scope up and Paste. Reset Width and Height. Return to the ComboBox template.
   
• Select contentarea and click Object > Group Into > Grid.
   
• Click Tools > Make Into Part of ComboBox > ContentPresenterBorder.
   
• In the Parts panel, double-click ContentPresenter. Set Margin to Left:5, Right:5, Top:1, Bottom:0.
   
• Select [Rectangle] and [Path] and click Object > Group Into > Grid.
   
• Click Tools > Make Into Part of ComboBox > DropDownToggle > OK. Select [Path] and Cut. Scope up and Paste.
   
• Select [Grid] . In the Parts panel, double-click Popup. Double-click the Grid tool to create a new Grid and reset Width and Height.
   
• In the object tree, drag popupbackground into the new Grid. Reset Width, Height, Margin, HorizontalAlignment and VerticalAlignment.
   
• Drag ScrollViewer into the new Grid. Reset ScrollViewer’s Width, Height, Margin, HorizontalAlignment and VerticalAlignment.
   
• Scope up and set the ComboBox’s Height to 20.

After you have done this, you should now have a working ComboBox!

- Steve

Comments

• Anonymous
  March 11, 2011
  It doesn't work with Expression Blend 4.

• Anonymous
  April 28, 2011
  The comment has been removed