Skip Navigation LinksHome / Articles / View Article

The ComboBox control in Silverlight 2

+ Add to SilverlightShow Favorites
3 comments   /   posted by Denislav Savkov on Oct 13, 2008
(3 votes)
Tags: Silverlight , ComboBox , DropDown
Categories: Controls

Introduction

With the Silverlight RC0 arrived three new controls: PasswordBox, ProgressBar and ComboBox.  In this article we are going to explore some of the features of the ComboBox. Also we change the look of the control using a few templates based on the default control templates. You can see all the source code here.

Download source.

ComboBox and ListBox

The ComboBox control is very similar to the ListBox control. It derives from ItemsControl and Selector, it has ItemContainer property but it also has a few additional things that are connected with the drop down items menu. Using the events DropDownClosed, DropDownOpened and IsDropDownOpen(bool) you can keep track of it. MaxDropDownHeight limits the height of the drop down area. IsSelectionBoxHighlighted indicates weather the control has focus and the drop down menu is opened. Except SelectedItems and SelectedIndex ComboBox has SelectionBoxItem and SelectionBoxItemTemplate that give you access to the selected item that is displayed outside the drop down menu.

Making templates for the ComboBox

ComboBox has 5 states and 4 parts. To work properly you need to create a template that has all of them. However, hat's not all. To fully customize the ComboBox you also need to make template for ToggleButton, ComboBoxItem(ContentControl) and ScrollViewer. So there are plenty of templates you need to create. To make things a little simpler we didn't make template for the ScrollViewer as it is not always necessary to place the items in ScrollViewer and is not defined as "TemplatePart" of the ComboBox.

Here is a list of all the states and parts you need to define in XAML to create fully operational templates. We took the library templates and slightly modified them.

ComboBox

States:

  • FocusStates
    • Unfocused
    • Focused
    • FocusedDropDown
  • CommonStates
    • Disabled
    • Normal
    • MouseOver

Parts:

  • Name="Popup", Type=typeof(Popup)
  • Name="ContentPresenter", Type=typeof(ContentPresenter)
  • Name="ContentPresenterBorder", Type=typeof(FrameworkElement)
  • Name="DropDownToggle", Type=typeof(ToggleButton)
   1: <ControlTemplate TargetType="ComboBox" x:Key="comboTemplate">
   2:     <Grid>
   3:         <vsm:VisualStateManager.VisualStateGroups>
   4:             <vsm:VisualStateGroup x:Name="CommonStates">
   5:                 <vsm:VisualStateGroup.Transitions>
   6:                     <vsm:VisualTransition GeneratedDuration="00:00:00.1"/>
   7:                 </vsm:VisualStateGroup.Transitions>
   8:                 <vsm:VisualState x:Name="Normal"/>
   9:                 <vsm:VisualState x:Name="MouseOver"/>
  10:                 <vsm:VisualState x:Name="Disabled">
  11:                     <Storyboard>
  12:                         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement"

                                   Storyboard.TargetProperty="(UIElement.Opacity)">
  13:                             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
  14:                         </DoubleAnimationUsingKeyFrames>
  15:                     </Storyboard>
  16:                 </vsm:VisualState>
  17:             </vsm:VisualStateGroup>
  18:             <vsm:VisualStateGroup x:Name="FocusStates">
  19:                 <vsm:VisualState x:Name="Focused">
  20:                     <Storyboard>
  21:                         <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement"

                                   Storyboard.TargetProperty="(UIElement.Opacity)">
  22:                             <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
  23:                         </DoubleAnimationUsingKeyFrames>
  24:                     </Storyboard>
  25:                 </vsm:VisualState>
  26:                 <vsm:VisualState x:Name="Unfocused"/>
  27:                 <vsm:VisualState x:Name="FocusedDropDown">
  28:                     <Storyboard>
  29:                         <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="PopupBorder"

                                   Storyboard.TargetProperty="(UIElement.Visibility)">
  30:                             <DiscreteObjectKeyFrame KeyTime="00:00:00">
  31:                                 <DiscreteObjectKeyFrame.Value>
  32:                                     <Visibility>Visible</Visibility>
  33:                                 </DiscreteObjectKeyFrame.Value>
  34:                             </DiscreteObjectKeyFrame>
  35:                         </ObjectAnimationUsingKeyFrames>
  36:                     </Storyboard>
  37:                 </vsm:VisualState>
  38:             </vsm:VisualStateGroup>
  39:         </vsm:VisualStateManager.VisualStateGroups>
  40:         <Border x:Name="ContentPresenterBorder">
  41:             <Grid>
  42:                 <ToggleButton HorizontalAlignment="Stretch" 
  43:                               x:Name="DropDownToggle"
  44:                               Style="{StaticResource comboToggleStyle}" 
  45:                               VerticalAlignment="Stretch" 
  46:                               Background="{TemplateBinding Background}" 
  47:                               BorderBrush="{TemplateBinding BorderBrush}" 
  48:                               BorderThickness="{TemplateBinding BorderThickness}" >
  49:                 </ToggleButton>
  50:                 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
  51:                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
  52:                                   x:Name="ContentPresenter" >
  53:                     <TextBlock Text=" "/>
  54:                 </ContentPresenter>
  55:             </Grid>
  56:         </Border>
  57:         <Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Fill="#A5FFFFFF"/>
  58:         <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="#FF45D6FA"

                         StrokeThickness="1"/>
  59:         <Popup x:Name="Popup" Margin="-1">
  60:             <Border Height="Auto" HorizontalAlignment="Stretch"
  61:                     x:Name="PopupBorder" 
  62:                     BorderBrush="{TemplateBinding BorderBrush}"
  63:                     BorderThickness="{TemplateBinding BorderThickness}">
  64:                 <ScrollViewer x:Name="ScrollViewer" BorderThickness="0" Padding="1">
  65:                     <ScrollViewer.Background>
  66:                         <SolidColorBrush Color="{TemplateBinding Background}" Opacity="0"/>
  67:                     </ScrollViewer.Background>
  68:                     <ItemsPresenter/>
  69:                 </ScrollViewer>
  70:             </Border>
  71:         </Popup>
  72:     </Grid>
  73: </ControlTemplate>

ToggleButton States:

  • CommonStates
    • Disabled
    • Normal
    • MouseOver
    • Pressed
  • FocusStates
    • Unfocused
    • Focused

XAML

   1: <Style TargetType="ToggleButton" x:Name="comboToggleStyle">
   2:     <Setter Property="Foreground" Value="#FF333333"/>
   3:     <Setter Property="Background" Value="#441F3B53"/>
   4:     <Setter Property="BorderBrush">
   5:         <Setter.Value>
   6:             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
   7:                 <GradientStop Color="#FFA3AEB9" Offset="0"/>
   8:                 <GradientStop Color="#FF8399A9" Offset="0.375"/>
   9:                 <GradientStop Color="#FF718597" Offset="0.375"/>
  10:                 <GradientStop Color="#FF617584" Offset="1"/>
  11:             </LinearGradientBrush>
  12:         </Setter.Value>
  13:     </Setter>
  14:     <Setter Property="BorderThickness" Value="1"/>
  15:     <Setter Property="Padding" Value="3"/>
  16:     <Setter Property="Template">
  17:         <Setter.Value>
  18:             <ControlTemplate TargetType="ToggleButton">
  19:                 <Grid>
  20:                     <vsm:VisualStateManager.VisualStateGroups>
  21:                         <vsm:VisualStateGroup x:Name="CommonStates">
  22:                             <vsm:VisualStateGroup.Transitions>
  23:                                 <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
  24:                                 <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
  25:                             </vsm:VisualStateGroup.Transitions>
  26:                             <vsm:VisualState x:Name="Normal"/>
  27:                             <vsm:VisualState x:Name="MouseOver">
  28:                                 <Storyboard>
  29:                                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay"

                                               Storyboard.TargetProperty="Opacity">
  30:                                         <SplineDoubleKeyFrame KeyTime="0" Value=".4"/>
  31:                                     </DoubleAnimationUsingKeyFrames>
  32:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
  33:                                         <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
  34:                                     </ColorAnimationUsingKeyFrames>
  35:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
  36:                                         <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
  37:                                     </ColorAnimationUsingKeyFrames>
  38:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
  39:                                         <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
  40:                                     </ColorAnimationUsingKeyFrames>
  41:                                 </Storyboard>
  42:                             </vsm:VisualState>
  43:                             <vsm:VisualState x:Name="Pressed">
  44:                                 <Storyboard>
  45:                                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay2"                                                 Storyboard.TargetProperty="Opacity">
  46:                                         <SplineDoubleKeyFrame KeyTime="0" Value="1" />
  47:                                     </DoubleAnimationUsingKeyFrames>
  48:                                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" 
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
  49:                                         <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
  50:                                     </DoubleAnimationUsingKeyFrames>
  51:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
  52:                                         <SplineColorKeyFrame KeyTime="0" Value="#E5FFFFFF"/>
  53:                                     </ColorAnimationUsingKeyFrames>
  54:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
  55:                                         <SplineColorKeyFrame KeyTime="0" Value="#BCFFFFFF"/>
  56:                                     </ColorAnimationUsingKeyFrames>
  57:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
  58:                                         <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>
  59:                                     </ColorAnimationUsingKeyFrames>
  60:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
  61:                                         <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
  62:                                     </ColorAnimationUsingKeyFrames>
  63:                                 </Storyboard>
  64:                             </vsm:VisualState>
  65:                             <vsm:VisualState x:Name="Disabled">
  66:                                 <Storyboard>
  67:                                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement"                                                 Storyboard.TargetProperty="(UIElement.Opacity)">
  68:                                         <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
  69:                                     </DoubleAnimationUsingKeyFrames>
  70:                                 </Storyboard>
  71:                             </vsm:VisualState>
  72:                         </vsm:VisualStateGroup>
  73:                         <vsm:VisualStateGroup x:Name="CheckStates">
  74:                             <vsm:VisualState x:Name="Checked">
  75:                                 <Storyboard>
  76:                                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay3"                                                 Storyboard.TargetProperty="(UIElement.Opacity)">
  77:                                         <SplineDoubleKeyFrame KeyTime="0" Value="0.4"/>
  78:                                     </DoubleAnimationUsingKeyFrames>
  79:                                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" 
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
  80:                                         <SplineDoubleKeyFrame KeyTime="0" Value="0.4"/>
  81:                                     </DoubleAnimationUsingKeyFrames>
  82:                                     <DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2"                                                 Storyboard.TargetProperty="(UIElement.Opacity)">
  83:                                         <SplineDoubleKeyFrame KeyTime="0" Value="0.4"/>
  84:                                     </DoubleAnimationUsingKeyFrames>
  85:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2"                                                 Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
  86:                                         <SplineColorKeyFrame KeyTime="0" Value="#E5FFFFFF"/>
  87:                                     </ColorAnimationUsingKeyFrames>
  88:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2"

                                               Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
  89:                                         <SplineColorKeyFrame KeyTime="0" Value="#BCFFFFFF"/>
  90:                                     </ColorAnimationUsingKeyFrames>
  91:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2"

      Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
  92:                                         <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>
  93:                                     </ColorAnimationUsingKeyFrames>
  94:                                     <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient2"

      Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
  95:                                         <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
  96:                                     </ColorAnimationUsingKeyFrames>
  97:                                 </Storyboard>
  98:                             </vsm:VisualState>
  99:                             <vsm:VisualState x:Name="Unchecked"/>
 100:                         </vsm:VisualStateGroup>
 101:                         <vsm:VisualStateGroup x:Name="FocusStates">
 102:                             <vsm:VisualState x:Name="Focused">
 103:                                 <Storyboard>
 104:                                     <ObjectAnimationUsingKeyFrames Duration="0"

                                    Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
 105:                                         <DiscreteObjectKeyFrame KeyTime="0">
 106:                                             <DiscreteObjectKeyFrame.Value>
 107:                                                 <Visibility>Visible</Visibility>
 108:                                             </DiscreteObjectKeyFrame.Value>
 109:                                         </DiscreteObjectKeyFrame>
 110:                                     </ObjectAnimationUsingKeyFrames>
 111:                                 </Storyboard>
 112:                             </vsm:VisualState>
 113:                             <vsm:VisualState x:Name="Unfocused"/>
 114:                         </vsm:VisualStateGroup>
 115:                     </vsm:VisualStateManager.VisualStateGroups>
 116:                     <Rectangle x:Name="Background" RadiusX="3" RadiusY="3" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
 117:                     <Rectangle x:Name="BackgroundOverlay" Opacity="0" RadiusX="3" RadiusY="3" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}"/>
 118:                     <Rectangle x:Name="BackgroundOverlay2" Opacity="0" RadiusX="3" RadiusY="3" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}"/>
 119:                     <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="BackgroundGradient" RadiusX="2" RadiusY="2" Stroke="#FFFFFFFF" StrokeThickness="1">
 120:                         <Rectangle.Fill>
 121:                             <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
 122:                                 <GradientStop Color="#AAFFFFFF" Offset="0"/>
 123:                                 <GradientStop Color="#88FFFFFF" Offset="0.375"/>
 124:                                 <GradientStop Color="#55FFFFFF" Offset="0.625"/>
 125:                                 <GradientStop Color="#33FFFFFF" Offset="1"/>
 126:                             </LinearGradientBrush>
 127:                         </Rectangle.Fill>
 128:                     </Rectangle>
 129:                     <Rectangle x:Name="BackgroundOverlay3" Opacity="0" RadiusX="3" RadiusY="3" Fill="#FF448DCA" Stroke="#00000000" StrokeThickness="{TemplateBinding BorderThickness}"/>
 130:                     <Rectangle Margin="{TemplateBinding BorderThickness}" x:Name="BackgroundGradient2" Opacity="0" RadiusX="2" RadiusY="2" Stroke="#FFFFFFFF" StrokeThickness="1">
 131:                         <Rectangle.Fill>
 132:                             <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
 133:                                 <GradientStop Color="#FFFFFFFF" Offset="0"/>
 134:                                 <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
 135:                                 <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
 136:                                 <GradientStop Color="#C6FFFFFF" Offset="1"/>
 137:                             </LinearGradientBrush>
 138:                         </Rectangle.Fill>
 139:                     </Rectangle>
 140:                     <Rectangle Margin="{TemplateBinding BorderThickness}"
 141:                                x:Name="Highlight"
 142:                                IsHitTestVisible="false"
 143:                                Opacity="0" 
 144:                                RadiusX="2" RadiusY="2"
 145:                                Stroke="#FF45D6FA" StrokeThickness="1"/>
 146:                     <ContentPresenter 
 147:                                       x:Name="contentPresenter"
 148:                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 149:                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 150:                                       Content="{TemplateBinding Content}"
 151:                                       ContentTemplate="{TemplateBinding ContentTemplate}"/>
 152:                     <Rectangle x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" RadiusX="3" RadiusY="3" Fill="#A5FFFFFF"/>
 153:                     <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" RadiusX="3.5" RadiusY="3.5" Stroke="#FF45D6FA" StrokeThickness="1"/>
 154:                 </Grid>
 155:             </ControlTemplate>
 156:         </Setter.Value>
 157:     </Setter>
 158: </Style>

ComboBoxItem States:

  • CommonStates
    • MouseOver
    • Normal
  • SelectionStates
    • Unselected
    • Selected
    • SelectedUnfocused
  • FocusStates
    • Focused  Note! To focus on item without MouseOver use the keyboard and not the mouse.
    • Unfocused

XAML

   1: <Style x:Key="ContainerStyle2" TargetType="ComboBoxItem">
   2:     <Style.Setters>
   3:         <Setter Property="Template">
   4:             <Setter.Value>
   5:                 <ControlTemplate TargetType="ComboBoxItem">
   6:                     <Grid >
   7:                         <!-- VisualStateManager -->
   8:                         <VisualStateManager.VisualStateGroups>
   9:  
  10:                             <!-- Common States-->
  11:                             <VisualStateGroup x:Name="CommonStates">
  12:  
  13:                                 <!-- Normal -->
  14:                                 <VisualState x:Name="Normal">
  15:                                     <Storyboard>
  16:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectNormal" Storyboard.TargetProperty="Opacity" To=".2"/>
  17:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectMouseOver" Storyboard.TargetProperty="Opacity" To="0"/>
  18:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectDisabled" Storyboard.TargetProperty="Opacity" To="0"/>
  19:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectPressed" Storyboard.TargetProperty="Opacity" To="0"/>
  20:                                     </Storyboard>
  21:                                 </VisualState>
  22:  
  23:                                 <!-- MouseOver -->
  24:                                 <VisualState x:Name="MouseOver">
  25:                                     <Storyboard>
  26:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectNormal" Storyboard.TargetProperty="Opacity" To="0"/>
  27:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectMouseOver" Storyboard.TargetProperty="Opacity" To=".7"/>
  28:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectDisabled" Storyboard.TargetProperty="Opacity" To="0"/>
  29:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectPressed" Storyboard.TargetProperty="Opacity" To="0"/>
  30:                                     </Storyboard>
  31:                                 </VisualState>
  32:  
  33:                                 <!-- Disabled -->
  34:                                 <VisualState x:Name="Disabled">
  35:                                     <Storyboard>
  36:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectNormal" Storyboard.TargetProperty="Opacity" To="0"/>
  37:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectMouseOver" Storyboard.TargetProperty="Opacity" To="0"/>
  38:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectDisabled" Storyboard.TargetProperty="Opacity" To=".7"/>
  39:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectPressed" Storyboard.TargetProperty="Opacity" To="0"/>
  40:                                     </Storyboard>
  41:                                 </VisualState>
  42:  
  43:                                 <VisualStateGroup.Transitions>
  44:                                     <VisualTransition GeneratedDuration="0:0:0.1" />
  45:                                 </VisualStateGroup.Transitions>
  46:                             </VisualStateGroup>
  47:  
  48:                             <VisualStateGroup x:Name="FocusStates">
  49:  
  50:                                 <VisualState x:Name="Focused">
  51:                                     <Storyboard>
  52:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectFocused" Storyboard.TargetProperty="Opacity" To=".5"/>
  53:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectUnfocused" Storyboard.TargetProperty="Opacity" To="0"/>
  54:                                     </Storyboard>
  55:                                 </VisualState>
  56:                                 <VisualState x:Name="Unfocused">
  57:                                     <Storyboard>
  58:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectFocused" Storyboard.TargetProperty="Opacity" To="0"/>
  59:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectUnfocused" Storyboard.TargetProperty="Opacity" To=".5"/>
  60:                                     </Storyboard>
  61:                                 </VisualState>
  62:                                 <VisualStateGroup.Transitions>
  63:                                     <VisualTransition GeneratedDuration="0:0:0.1"/>
  64:                                 </VisualStateGroup.Transitions>
  65:                             </VisualStateGroup>
  66:  
  67:  
  68:                             <VisualStateGroup x:Name="SelectionStates">
  69:                                 
  70:                                 <VisualState x:Name="Selected">
  71:                                     <Storyboard>
  72:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectSelected" Storyboard.TargetProperty="Opacity" To=".4"/>
  73:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectUnselected" Storyboard.TargetProperty="Opacity" To="0"/>
  74:                                     </Storyboard>
  75:                                 </VisualState>
  76:                                 
  77:                                 <VisualState x:Name="Unselected">
  78:                                     <Storyboard>
  79:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectSelected" Storyboard.TargetProperty="Opacity" To="0"/>
  80:                                         <DoubleAnimation Duration="0" Storyboard.TargetName="rectUnselected" Storyboard.TargetProperty="Opacity" To=".3"/>
  81:                                     </Storyboard>
  82:                                 </VisualState>
  83:                                 <VisualStateGroup.Transitions>
  84:                                     <VisualTransition GeneratedDuration="0:0:0.1"/>
  85:                                 </VisualStateGroup.Transitions>
  86:                             </VisualStateGroup>
  87:  
  88:                         </VisualStateManager.VisualStateGroups>
  89:  
  90:                         <Rectangle x:Name="rectNormal"  Fill="LightPink" Opacity="0"/>
  91:  
  92:                         <Rectangle x:Name="rectFocused"  Fill="SkyBlue" Opacity="0"/>
  93:                         <Rectangle x:Name="rectUnfocused"  Fill="Transparent"  Opacity="0"/>
  94:  
  95:                         <Rectangle x:Name="rectSelected"  Fill="LightGreen" Opacity="0"/>
  96:                         <Rectangle x:Name="rectUnselected"  Fill="White" Opacity="0"/>
  97:                         <ContentPresenter/>
  98:                         <Border x:Name="rectMouseOver"  BorderBrush="BlueViolet" BorderThickness="2">
  99:                             <Rectangle Fill="LightBlue" Opacity="0"/>
 100:                         </Border>
 101:                         <Rectangle x:Name="rectDisabled"  Fill="LightGray" Opacity="0"/>
 102:                         <Rectangle x:Name="rectPressed"  Fill="DarkBlue" Opacity="0"/>
 103:  
 104:                     </Grid>
 105:                 </ControlTemplate>
 106:             </Setter.Value>
 107:         </Setter>
 108:     </Style.Setters>
 109: </Style>

ComboBox in the final version of Silverlight 2

The current version of the ComboBox control doesn't have much features but in the full version it is very likely that it will have auto complete and items will be editable. A strong hint for the last is the IsEditable property available in the current version that is read-only.

Conclusion

Although the current ComboBox is not rich on features it is still enough for your basic needs. If you need more features you may have to wait until the final version is released.

Share


Comments

Comments RSS RSS

  • RE: The ComboBox control in Silverlight 2  

    posted by Brijesh Patil on Jan 13, 2009 04:17

    Treeview in ComboBox is my requirement.

    The problem is I am able to display the treeview in combobox but I am not able to display the selected item from treeview to the combobox. Please let me know any clarifications

  • RE: The ComboBox control in Silverlight 2  

    posted by goldbishop on May 23, 2009 16:25
    Is there a way to put a watermark on the load of the control?  like "Select ????"

  • RE: The ComboBox control in Silverlight 2  

    posted by goldbishop on May 23, 2009 17:02
    nvm found it....thanx for the attempt if you were trying.

Add Comment

 
 

   
 
 
  
   
Please add 6 and 4 and type the answer here:

Join the free SilverlightShow webcast 'Running Silverlight Outside the Browser and with Elevated Trust'. Sept 7th, 8 am - 9 am PDT.
In this live session Chris Anderson will cover configuring and debugging OOB mode, toast notifications, elevated trust, direct file access and much more.
Learn more | Register | See more webinars (hide this)