UWP: XAML's ComboBox Control -Part 1

Microsoft's Universal Windows Framework apps are well supported by Microsoft and you could use it for not only Windows but for other devices as well. You can also use UWP for cross-platform use.

In the Universal Windows Platform (UWP) projects there is an advantage of one code that works on different device families (phone, tablet, desktop etc.). However, the UWP projects depend on using XAML. 

ComboBox details can be seen in the Object Explorer of Visual Studio 2017 Community used in writing this post.

In this post, I will show you how you may work with this controls for a UWP project.

• Getting the ComboBox Control
• Placing ComboBox on the Design area
• Adding ComboBoxItems

We start with a Windows Universal blank C# project with the name JComboBox as shown.

You will be asked for what target and minimum versions of Windows 10 that you want. The higher the version the more feature support. The Build version 16299 is chosen for both as shown in the next two images.

Clicking OK after the selection brings creates a blank project very the same along the lines in my earlier link.

Now we would like to place controls and therefore we need to choose what controls to use from the following:

When you click on the above, you are taken to this interactive window. You are using the Windows Presentation Foundation controls.

There are quite a large with a few added by default should you choose. 

Now you drag ComboBox Control from the ToolboxItems (Using View | Toolbox in the menu ) to the Design pane shown here:

When you drop the ComboBox, the following will be displayed.

Presently the ComboBox (drop-down list, pick-list) control is empty. If you build, deploy and run the app as is, you will see a ComboBox that is empty in Design pane.

Populating the ComboBox

You can populate the ComboBox with ComboBoxItems (ListboxItems are not supported in UWP). Place three ComboBoxItems as shown. For each of them add some content as shown.

Now Build, Deploy and Run the application.

The app displays as shown.

When you click the drop handle you will see the elements you added (the three items).

This is hard coding of the ComboBoxItems and can be carried out in code as well.

To display the chosen ComboBoxItem to display, you need to add the IsSelected property to be TRUE as shown.

When you Build, Deploy and Run, you will see this in display.

In Part 2 you will write code for an app consisting of a ComboBox, a Button and a TextBox so that when you select an item in the ComboBox and click the button, the selected item appears in the TextBox.