Adding Child Controls to a ComboBox Items in Silverlight using VB.NET

Adding Child Controls to a ComboBox

I am building a Project Survival Forecaster application in Silverlight 4 that forecasts the chances of surviving a software project. In this application, I need a ComboBox control to host other child controls.

This article demonstrates how to host various child controls within a ComboBox control in Silverlight.

Adding child controls to a ComboBox is similar to adding any item to a ComboBox. The ComboBox.Items represents a collection of items of a ComboBox. We can use ComboBox.Items.Add() method to add an object to a ComboBox. This object item can be a text, control or any other object.

The code snippet in Listing 1 adds a string, a Button, a TextBlock, a DateTime, a Rectangle, and a Panel with child controls to a ComboBox.

   Private Sub UserControl_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded

        ' Add a String

        ComboBox1.Items.Add("ComboBox with Child Controls")

        ' Add a Button

        Dim btn As New Button()

        btn.Height = 50

        btn.Width = 150

        btn.Content = "Click ME"

        btn.Background = New SolidColorBrush(Colors.Orange)

        btn.Foreground = New SolidColorBrush(Colors.Black)

        ComboBox1.Items.Add(btn)

        ' Create a TextBlock and Add it to ComboBox

        Dim textBlockItem As New TextBlock()

        textBlockItem.TextAlignment = TextAlignment.Center

        textBlockItem.FontFamily = New FontFamily("Georgia")

        textBlockItem.FontSize = 14

        textBlockItem.FontWeight = FontWeights.ExtraBold

        textBlockItem.Text = "Hello! I am a text block."

        ' Add TextBlock to ComboBox

        ComboBox1.Items.Add(textBlockItem)

        ' Add a DateTime to a ComboBox

        Dim dateTime1 As New DateTime(2010, 10, 12, 8, 15, 55)

        ComboBox1.Items.Add(dateTime1)

        ' Add a Rectangle to a ComboBox

        Dim rect1 As New Rectangle()

        rect1.Width = 50

        rect1.Height = 50

        rect1.Fill = New SolidColorBrush(Colors.Red)

        ComboBox1.Items.Add(rect1)

        ' Add a panel that contains child controls

        Dim textBlock1 As New TextBlock()

        textBlock1.TextAlignment = TextAlignment.Center

        textBlock1.Text = "Panel with child controls"

        Dim ellipse1 As New Ellipse()

        ellipse1.Width = 50

        ellipse1.Height = 50

        ellipse1.Fill = New SolidColorBrush(Colors.Green)

        Dim comboBoxPanel As New StackPanel()

        comboBoxPanel.Width = 200

        comboBoxPanel.Background = New SolidColorBrush(Colors.Yellow)

        comboBoxPanel.Children.Add(textBlock1)

        comboBoxPanel.Children.Add(ellipse1)

        ' Add Panel to ComboBox

        ComboBox1.Items.Add(comboBoxPanel)

        ComboBox1.SelectedIndex = 0

        ComboBox1.Padding = New Thickness(0)

        ComboBox1.MaxWidth = 200

    End Sub

Listing 1

The output of Listing 1 looks like Figure 1.

Figure 1

Further Readings