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.
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:
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.
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:
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>
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.
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:
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.
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.