Basic Library for WPF and Silverlight | ComponentOne
WPF and Silverlight Edition Basic Library / Drop Down / DropDown Elements / Creating Drop Down
In This Topic
    Creating Drop Down
    In This Topic

    To create a C1DropDown control using XAML markup, complete the following steps:

    1. In the Visual Studio Solution Explorer, right-click the References folder in the project files list. In the context menu choose Add Reference, select the C1.WPF.4.dll assembly, and click OK.
    2. Add a XAML namespace to your project by adding xmlns:c1="http://schemas.componentone.com/wpf/Basic" to the initial <Window> tag. It will appear similar to the following:
    XAML
    Copy Code
    <Window x:Class="C1WPFPropertyGridCS102809.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="288" Width="418" xmlns:c1="http://schemas.componentone.com/wpf/Basic">
    
    1. Add a <c1:C1DropDown> tag to your project within the <Grid> tag to create a C1DropDown control. The markup will appear similar to the following:
    XAML
    Copy Code
    <Grid>
        <c1:C1DropDown Height="30" Name="C1DropDown1" Width="100"/>
    </Grid>
    

    This markup will create an empty C1DropDown control named "C1DropDown1" and set the control's size.

    1. In the Visual Studio Solution Explorer, right-click the References folder in the project files list. In the context menu choose Add Reference, select the C1.Silverlight.dll assembly, and click OK.
    2. Add a XAML namespace to your project by adding xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" to the initial <UserControl> tag. It will appear similar to the following:
    XAML
    Copy Code
    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="clr-namespace:C1.Silverlight;assembly=C1.Silverlight" x:Class="C1DropDown.MainPage" Width="640" Height="480">
    
    1. Add a <c1:C1DropDown> tag to your project within the <Grid> tag to create a C1DropDown control. The markup will appear similar to the following:
    XAML
    Copy Code
    <Grid x:Name="LayoutRoot" Background="White">
        <c1:C1DropDown Height="30" Name="c1dropdown1" Width="100" />
    </Grid>
    

    This markup will create an empty C1DropDown control named "c1dropdown1" and set the control's size.

    1. In the Visual Studio Solution Explorer, right-click the References folder in the project files list. In the context menu choose Add Reference, select the C1.WPF.dll assembly, and click OK.
    2. In XAML view, give the initial grid in the window a name, by updating the tag so it appears similar to the following:
      XAML
      Copy Code
      <Grid x:Name="LayoutRoot">
      
    3. Right-click within the Window1.xaml window and select View Code to switch to Code view
    4. Add the following import statements to the top of the page:
      Visual Basic
      Copy Code
      Imports C1.WPF
      

      C#
      Copy Code
      using C1.WPF;
      
    5. Add code to the page's constructor to create the C1DropDown control. It will look similar to the following:
      Visual Basic
      Copy Code
      Public Sub New()
          InitializeComponent()
          Dim c1DropDown1 as New C1DropDown
          c1DropDown1.Height = 30
          c1DropDown1.Width = 100
          LayoutRoot.Children.Add(c1DropDown1)
      End Sub
      

      C#
      Copy Code
      public Window1()
      {
          InitializeComponent();
          C1DropDown c1DropDown1 = new C1DropDown();
          c1DropDown1.Height = 30;
          c1DropDown1.Width = 100;
          LayoutRoot.Children.Add(c1DropDown1);
      }
      

    This code will create an empty C1DropDown control named "c1DropDown1", set the control's size, and add the control to the window.

    1. Add x:Name="C1ComboBox1" to the <c1:C1ComboBox> tag so that the object will have a unique identifier for you to call in code.
    2. Open the MainPage.xaml.cs page.
    3. Import the following namespace into the project:
    Visual Basic
    Copy Code
    Imports System.Collections.Generic
    

    C#
    Copy Code
    using System.Collections.Generic;
    
    1. Create your list by adding the following code beneath the InitializeComponent() method:
    Visual Basic
    Copy Code
    Dim dropDownList As New List(Of String)()
    dropDownList.Add("C1ComboBoxItem1")
    dropDownList.Add("C1ComboBoxItem2")
    dropDownList.Add("C1ComboBoxItem3")
    dropDownList.Add("C1ComboBoxItem4")
    

    C#
    Copy Code
    List<string> dropDownList = new List<string>();
    dropDownList.Add("C1ComboBoxItem1");
    dropDownList.Add("C1ComboBoxItem2");
    dropDownList.Add("C1ComboBoxItem3");
    dropDownList.Add("C1ComboBoxItem4");
    
    1. Add the list to the combo box by setting the ItemsSource property:
    Visual Basic
    Copy Code
    C1ComboBox1.ItemsSource = dropDownList
    

    C#
    Copy Code
    C1ComboBox1.ItemsSource = dropDownList;
    
    1. Run the program.
    1. Click once on the design area of the window to select it.
    2. Double-click the C1DropDown icon in the Toolbox to add the control to the panel. The C1DropDown control will now exist in your application.
    3. If you choose, you can customize the control by selecting it and setting properties in the Properties window.