Learn Universal Windows Programming Via Modern C++ (Combo box)

Combobox control is contains the collection of the items. It represents Drop-down list of the items. The user can select the items from the list, when the combobox is open its display all the items, once item has been selected dropdown list will close automatically.

Before reading this article, I highly recommend reading the previous parts of the series.

In this article, we are going to learn about Combobox control in Modern C++.

Combobox

Combobox is kind of a Radio button. For a small number of items, we can use the Radio button control.  If we have a large number of items, we go with Combobox control only. 

The Combobox control contains the collection of the items. It represents the Drop-down list of the items, and a user can select the items from the list. When the Combobox is open, it displays all the items. Once an item is selected, the dropdown list will close automatically.

In this article, I have covered some of the important properties of the Combobox. 

Item Property

Item (container) property is used to add the data into the combobox, whatever items have been added in this list. It will display to the user. Each item in the combobox stores as ComboBoxItem.

  1. cbBox.Items().Append(MakeString(L"Windows 7"));  
  2. cbBox.Items().Append(MakeString(L"Windows 8"));  
  3. cbBox.Items().Append(MakeString(L"Windows 10"));  
  4. cbBox.Items().Append(MakeString(L"Windows Mobile 10"));  
  5.           

SelectedIndex

SelectedIndex: SelectedIndex contains the selectedItem index position. Items stored in the combo box are zero-index based. If no item is selected, selectedIndex assigns "-1" value.

SelectionChanged Event

SelectionChanged: SelectionChanged event is fired when the item has been changed from Combobox. 

  1. cbBox.SelectedIndex(0);  


SelectionChanged Event sample code 
  1. cbBox.SelectionChanged({ this,&App::CbSelectionChanged});  
  2.   
  3. void CbSelectionChanged(IInspectable const & sender,const RoutedEventArgs &args)  
  4.     {  
  5.         ComboBox cbbox = sender.as<ComboBox>();  
  6.         auto itemSelect = cbbox.SelectedItem().as<IPropertyValue>();  
  7.         auto selectItem = itemSelect.GetString();  
  8.   
  9.     }  
SelectedItem
 
SelectedItem contains the complete Item (ComboBoxItem) information. Whenever selectionchanged event gets fired, SelectedItem is automatically changed based on the user choice.

As you have seen above in the sample code SelectedItem( ), I have used an operator to convert the ComboBoxItem to IPropertyValue, to get the string value from the Combobox item.

DropDownOpened & DropDownClosed event is fired when the Combobox opens and closes. 

  1. void CbSelectionOpend(IInspectable const & sender, const IInspectable &args)  
  2.     {  
  3.         sPanel.Background(SolidColorBrush(Colors::Yellow()));  
  4.     }  
  5.   
  6.     void CbSelectionClosed(IInspectable const & sender, const IInspectable &args)  
  7.     {  
  8.         sPanel.Background(SolidColorBrush(Colors::White()));  
  9.     }  
 

Let's see one example of how to add the items in the Combobox and display the selected item's text in the textbox 
  1. #include "pch.h"  
  2.   
  3. using namespace winrt;  
  4. using namespace Windows::ApplicationModel;  
  5. using namespace Windows::ApplicationModel::Activation;  
  6. using namespace Windows::Foundation;  
  7. using namespace Windows::UI;  
  8. using namespace Windows::UI::Xaml;  
  9. using namespace Windows::UI::Xaml::Controls;  
  10. using namespace Windows::UI::Xaml::Controls::Primitives;  
  11. using namespace Windows::UI::Xaml::Interop;  
  12. using namespace Windows::UI::Xaml::Media;  
  13. using namespace Windows::UI::Xaml::Navigation;  
  14. using namespace Windows::UI::Popups;  
  15. using namespace Windows::Storage;  
  16.   
  17. struct App :ApplicationT<App>  
  18. {  
  19. public:  
  20.     virtual ~App() = default;  
  21.     ComboBox cbBox;  
  22.     TextBlock txtStatus;  
  23.     StackPanel sPanel;  
  24.   
  25.     IInspectable MakeString(hstring captionText)  
  26.     {  
  27.         return PropertyValue::CreateString(captionText);  
  28.     }  
  29.   
  30.     Thickness CreateThickness(int top,int bottom,int left,int right)  
  31.     {  
  32.         Thickness margin;  
  33.         margin.Bottom = bottom;  
  34.         margin.Left = left;  
  35.         margin.Right = right;  
  36.         margin.Top = top;  
  37.         return margin;  
  38.     }  
  39.   
  40.     void CbSelectionChanged(IInspectable const & sender,const RoutedEventArgs &args)  
  41.     {  
  42.         ComboBox cbbox = sender.as<ComboBox>();  
  43.         auto itemSelect = cbbox.SelectedItem().as<IPropertyValue>();  
  44.         auto selectItem = itemSelect.GetString();  
  45.         txtStatus.Text(selectItem);  
  46.     }  
  47.     void CbSelectionOpend(IInspectable const & sender, const IInspectable &args)  
  48.     {  
  49.         sPanel.Background(SolidColorBrush(Colors::Yellow()));  
  50.     }  
  51.   
  52.     void CbSelectionClosed(IInspectable const & sender, const IInspectable &args)  
  53.     {  
  54.         sPanel.Background(SolidColorBrush(Colors::White()));  
  55.     }  
  56.     void OnLaunched(LaunchActivatedEventArgs const&)  
  57.     {  
  58.           
  59.         cbBox.Items().Append(MakeString(L"Windows 7"));  
  60.         cbBox.Items().Append(MakeString(L"Windows 8"));  
  61.         cbBox.Items().Append(MakeString(L"Windows 10"));  
  62.         cbBox.Items().Append(MakeString(L"Windows Mobile 10"));  
  63.         cbBox.Items().Append(MakeString(L"Linux"));  
  64.         cbBox.Items().Append(MakeString(L"MacOS"));  
  65.         cbBox.Margin(CreateThickness(10, 10, 10, 10));  
  66.           
  67.           
  68.         cbBox.SelectionChanged({ this,&App::CbSelectionChanged});  
  69.         cbBox.SelectedIndex(0);  
  70.         cbBox.DropDownOpened({ this,&App::CbSelectionOpend });  
  71.         cbBox.DropDownClosed({ this,&App::CbSelectionClosed });  
  72.           
  73.   
  74.         TextBlock txtBlock;  
  75.         txtBlock.Text(L"Select the OS :");  
  76.         txtBlock.Margin(CreateThickness(10, 10, 10, 0));  
  77.         txtStatus.Margin(CreateThickness(10, 10, 10, 10));  
  78.   
  79.           
  80.         sPanel.Margin(CreateThickness(10,10,10,10));  
  81.         sPanel.Orientation(Orientation::Horizontal);  
  82.         sPanel.Children().Append(txtBlock);  
  83.         sPanel.Children().Append(cbBox);  
  84.         sPanel.Children().Append(txtStatus);  
  85.   
  86.         auto window = Window::Current();  
  87.         window.Content(sPanel);  
  88.   
  89.         window.Activate();  
  90.     }  
  91. };  
  92.   
  93.   
  94. int __stdcall wWinMain(HINSTANCEHINSTANCEPWSTRint)  
  95. {  
  96.     Application::Start([](auto &&) {make<App>(); });  
  97.     return 0;  
  98. }  


Conclusion

I hope you understood how to use the Combobox control.