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

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

• Learn Universal Windows Programming Via Modern C++
• Learn Universal Windows Programming Via Modern C++ (Button Control)
• Learn Universal Windows Programming Via Modern C++ (Stackpanel)
• Learn Universal Windows Programming Via Modern C++ (CheckBox)
• Learn Universal Windows Programming Via Modern C++ (RadioButton)

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.

cbBox.Items().Append(MakeString(L"Windows 7"));
cbBox.Items().Append(MakeString(L"Windows 8"));
cbBox.Items().Append(MakeString(L"Windows 10"));
cbBox.Items().Append(MakeString(L"Windows Mobile 10"));

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. 

cbBox.SelectedIndex(0);

SelectionChanged Event sample code 

cbBox.SelectionChanged({ this,&App::CbSelectionChanged});

void CbSelectionChanged(IInspectable const & sender,const RoutedEventArgs &args)
    {
        ComboBox cbbox = sender.as<ComboBox>();
        auto itemSelect = cbbox.SelectedItem().as<IPropertyValue>();
        auto selectItem = itemSelect.GetString();

    }

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. 

void CbSelectionOpend(IInspectable const & sender, const IInspectable &args)
    {
        sPanel.Background(SolidColorBrush(Colors::Yellow()));
    }

    void CbSelectionClosed(IInspectable const & sender, const IInspectable &args)
    {
        sPanel.Background(SolidColorBrush(Colors::White()));
    }

 

Let's see one example of how to add the items in the Combobox and display the selected item's text in the textbox 

#include "pch.h"

using namespace winrt;
using namespace Windows::ApplicationModel;
using namespace Windows::ApplicationModel::Activation;
using namespace Windows::Foundation;
using namespace Windows::UI;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Interop;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;
using namespace Windows::UI::Popups;
using namespace Windows::Storage;

struct App :ApplicationT<App>
{
public:
    virtual ~App() = default;
    ComboBox cbBox;
    TextBlock txtStatus;
    StackPanel sPanel;

    IInspectable MakeString(hstring captionText)
    {
        return PropertyValue::CreateString(captionText);
    }

    Thickness CreateThickness(int top,int bottom,int left,int right)
    {
        Thickness margin;
        margin.Bottom = bottom;
        margin.Left = left;
        margin.Right = right;
        margin.Top = top;
        return margin;
    }

    void CbSelectionChanged(IInspectable const & sender,const RoutedEventArgs &args)
    {
        ComboBox cbbox = sender.as<ComboBox>();
        auto itemSelect = cbbox.SelectedItem().as<IPropertyValue>();
        auto selectItem = itemSelect.GetString();
        txtStatus.Text(selectItem);
    }
    void CbSelectionOpend(IInspectable const & sender, const IInspectable &args)
    {
        sPanel.Background(SolidColorBrush(Colors::Yellow()));
    }

    void CbSelectionClosed(IInspectable const & sender, const IInspectable &args)
    {
        sPanel.Background(SolidColorBrush(Colors::White()));
    }
    void OnLaunched(LaunchActivatedEventArgs const&)
    {

        cbBox.Items().Append(MakeString(L"Windows 7"));
        cbBox.Items().Append(MakeString(L"Windows 8"));
        cbBox.Items().Append(MakeString(L"Windows 10"));
        cbBox.Items().Append(MakeString(L"Windows Mobile 10"));
        cbBox.Items().Append(MakeString(L"Linux"));
        cbBox.Items().Append(MakeString(L"MacOS"));
        cbBox.Margin(CreateThickness(10, 10, 10, 10));


        cbBox.SelectionChanged({ this,&App::CbSelectionChanged});
        cbBox.SelectedIndex(0);
        cbBox.DropDownOpened({ this,&App::CbSelectionOpend });
        cbBox.DropDownClosed({ this,&App::CbSelectionClosed });


        TextBlock txtBlock;
        txtBlock.Text(L"Select the OS :");
        txtBlock.Margin(CreateThickness(10, 10, 10, 0));
        txtStatus.Margin(CreateThickness(10, 10, 10, 10));


        sPanel.Margin(CreateThickness(10,10,10,10));
        sPanel.Orientation(Orientation::Horizontal);
        sPanel.Children().Append(txtBlock);
        sPanel.Children().Append(cbBox);
        sPanel.Children().Append(txtStatus);

        auto window = Window::Current();
        window.Content(sPanel);

        window.Activate();
    }
};


int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)
{
    Application::Start([](auto &&) {make<App>(); });
    return 0;
}

Conclusion

I hope you understood how to use the Combobox control.