ComponentOne Input Library for WPF
Input Library Overview / Drop Down / Quick Start
In This Topic
    Quick Start
    In This Topic

    The following quick start guide is intended to get you up and running with DropDown for WPF. In this quick start, you'll create a new Visual Studio project with a C1DropDown control, add content to it and run the application to view the output.

    Create the Application

    In this step you'll create a WPF application using DropDown for WPF. When you add a C1DropDown control to your application, you'll have a complete, functional drop-down box interface that you can add images, controls, and other elements to. To set up your project and add a C1DropDown control to your application, complete the following steps:

    1. In Visual Studio, select File | New | Project.
    2. In the New Project dialog box, select WPF Application.
    3. Enter a Name and Location for your project and click OK to create the new application.
    4. Navigate to the Visual Studio Toolbox, and double-click the C1DropDown icon to add the control to the window.
    5. Resize the Window and reposition the C1DropDown control in the Window.
    6. Navigate to the Properties window and set the C1DropDown control’s Height to 30 and Width to 100.

    The XAML will appear similar to the following:

    XAML
    Copy Code
    <c1:C1DropDown Name="C1DropDown1" Height="30" Width="100" />
    

    The page's Design view should now look similar to the following image (with the C1DropDown control selected on the form):

    You've successfully set up your application's user interface, but if you run your application now you’ll see that the C1DropDown control currently contains no content. In the next step you'll add content to the C1DropDown control, and then you'll observe some of the run-time interactions possible with the control.

    Add Content to the Control

    In the previous step you created a WPF application and added the C1DropDown control to your project. In this step you'll add content to the C1DropDown control. To customize your project and add content to the C1DropDown control in your application, complete the following steps:

    1. Switch to XAML view. In the next steps you’ll add XAML markup to your application to add content to the drop-down box.
    2. Add markup to the C1DropDown control so that it appears similar to the following:
    XAML
    Copy Code
    <c1:C1DropDown Name="C1DropDown1" Height="30" Width="100">
        <c1:C1DropDown.Header>
            <ContentControl VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0">
                <TextBlock x:Name="selection" Text="« Pick one »" FontSize="12" Foreground="#FF3B76A2" TextAlignment="left" />
            </ContentControl>
        </c1:C1DropDown.Header>
    </c1:C1DropDown>
    
    1. Add the following markup just after the </c1:C1DropDown.Header> tag in the XAML markup you just added:
    XAML
    Copy Code
    <c1:C1DropDown.Content>
        <TreeView x:Name="treeSelection" Background="Transparent" Margin="10">
            <TreeViewItem Header="South America">
                <TreeViewItem Header="Brazil" />
                <TreeViewItem Header="Argentina" />
                <TreeViewItem Header="Uruguay" />
            </TreeViewItem>
            <TreeViewItem Header="Europe">
                <TreeViewItem Header="Italy" />
                <TreeViewItem Header="France" />
                <TreeViewItem Header="England" />
                <TreeViewItem Header="Germany" />
            </TreeViewItem>
        </TreeView>
    </c1:C1DropDown.Content>
    

    This will add a standard TreeView control to the C1DropDown control’s content area. Note that the Window should appear similar to the following image in Design view:

    In this step you added content to the C1DropDown control. In the next step you'll further customize the control and run the application to observe run-time interactions.

    Run the Application

    Now that you've created a WPF application and customized the application's appearance, the only thing left to do is run your application. To run your application and observe C1DropDown's run-time behavior, and then further customize the control, complete the following steps:

    1. From the Debug menu, select Start Debugging to view how your application will appear at run time.

    The application will appear similar to the following:

    The C1DropDown control appears as a simple drop-down box. Notice the text that you specified appears in the header of the control.

    1. Click the C1DropDown control’s drop-down arrow. Notice that the TreeView control is now visible:

    1. Expand an item in the drop-down box – notice that you can interact with the TreeView control as you might normally.

    1. Click the C1DropDown control’s drop-down arrow again:

    Observe that the drop-down box closes.

    Congratulations!

    You've completed the DropDown for WPF quick start and created a simple WPF, added and customized a DropDown for WPF control, and viewed some of the run-time capabilities of the control.