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:


image 


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 (2)

  1. Jo says:

    It doesn't work with Expression Blend 4.

  2. Jackson Silva Cruz says:

    Hi Steve,

    Im trying to bind values in the contentControl of a combobox style, it sounds crazy but there's a way of doin it? Or there's a ease way to mess up with the ContentControl?

    My combox became huge and i just want to bind two ContentControls .

    Here's what i've done. I just want a slim code.

    If you want to contact me heres the mail jackson.scruz@gmail.com

    Thanks for your time and patience.