Sketchflow – Combo Box with header

 

When you add a Sketch style combo box with multiple items, the header is emtpy by default.  After you select an item, that item it is populated in the header.

I wanted to be able  to mock up a combo box that has a title ex: “Choose Port” that is not visible when you select an item  ex: “Seattle”.

If you use the first combobox item as the header, and set the selected index of the combobox to 0, like this:

<ComboBox x:Name=”Choose_Port” Style=”{StaticResource ComboBox-Sketch}” IsDropDownOpen=”False” SelectedIndex=”0″>
   <ComboBoxItem Content=” – Choose Port – ” Style=”{StaticResource ComboBoxItem-Sketch}”/>
   <ComboBoxItem Content=”    Shanghai” Style=”{StaticResource ComboBoxItem-Sketch}”/>
   <ComboBoxItem Content=”    Hong Kong” Style=”{StaticResource ComboBoxItem-Sketch}”/>
   <ComboBoxItem Content=”    Rotterdam” Style=”{StaticResource ComboBoxItem-Sketch}”/>
   <ComboBoxItem Content=”    Miami” Style=”{StaticResource ComboBoxItem-Sketch}”/>
   <ComboBoxItem Content=”    Sydney” Style=”{StaticResource ComboBoxItem-Sketch}”/>
   <ComboBoxItem Content=”    Seattle” Style=”{StaticResource ComboBoxItem-Sketch}”/>
   <ComboBoxItem Content=”    New York” Style=”{StaticResource ComboBoxItem-Sketch}”/>
  </ComboBox>

Problem solved!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s