C++ is a powerful modern language used in many domains, in this series of articles I will show you how to use it in UWP programming with C++/CX extension. C++/CX (component extensions) as the name suggests, is a language extension for C++ introduced by Microsoft to access WinRT and UWP API.
Make sure you have C++ Universal Windows Platform tools with Visual Studio 2017 installed to continue reading.
Create a new UWP C++ project
In Windows 10, go to the Start menu and find Visual Studio 2017.
Once Visual Studio 2017 has started, go to the File menu and choose New then project…
Then, from new project option, choose Visual C++ from Installed templates then choose Blank App (Universal Windows) and then type in a Name (I choose HelloWorld for example) and select a Location and then click OK to create the project.
Visual Studio 2017 will create a new UWP project and show you a dialog so that you have to select the target version. This should be at least the Windows 10 Spring Creators Update (or Windows 10, version 1803) and the minimum version depends on which Windows 10 version your application could run (in general, we choose the same version for both maximum and minimum version).
To make sure you have the most recent version, check if your Windows 10 is up to date and in Visual Studio 2017 select Tools menu > Extensions and Updates… and see if there are any updates.
Work with the designer for UI
In the solution explorer select the MainPage.xaml, an UWP solution is composed of sources files in C++ (.cpp) and UI files in XAML (.xaml).
Visual Studio 2017 opened our view in split mode by default, you can switch to code only or designer only in the View menu.
For now, let it in split view or in Designer view only.
The MainPage.xaml is what the application will look like at runtime, we can place some controls on to the design surface and have a direct review of the look of your application.
Visual Studio 2017 brings a Toolbox (View menu > Toolbox) who will list all available controls for the Universal Windows Platform. Open the toolbox, then in Common XAML Controls section, double-click or drag and drop the Button control to add it to the Design View.
The button is now added into the view.
Now, go to Properties window and set the Content to Click me! For example, then HorizontalAlignment to Center and VerticalAlignment to Center. The button now appears in the middle of the Design view with a new text in content.
You can compile and launch the application by pressing F5 or click on the Local Machine button.
If you click or tap on the button, nothing happens. This is normal because we have not implement logic for button event yet, so let’s do it. Exit the application by select the close button in the top right of the application and return in Visual Studio 2017.
Add Button logic
In the Properties select Events at the top and then set Click to Button_Click then either double-click on the text or press Enter once the value was typed in. We can also double-click directly in the button in the designer surface for generating a click event.
Once you done, it will generate a method stub in both .h file and .cpp file associate with our XAML file MainPage.xaml. The following method definition should be entered in MainPage.xaml.h file,
- void Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
And implementation in MainPage.xaml.cpp,
- void HelloWorld::MainPage::Button_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
- {
- }
Note that in C++/CX, the ^ symbol (spelled hat notation) create a WinRT (or UWP) object. Now let’s display to the user a message dialog when button clicked or tapped.
Inside this method, the following code should be entered,
- auto messageDialog = ref new Windows::UI::Popups::MessageDialog("You clicked on the button!");
- messageDialog->ShowAsync();
Now, our method looks like this,
Each time the button click event is triggered, the Button_Click method is called and we display a MessageDialog to the user. Note this is an asynchronous operation.
Consuming an async operation by using a task
The Universal Windows Platform API brings a lot of asynchronous methods for providing a better user experience and prevents freeze of the UI. In our actual code, we call directly the sync method ShowAsync to display a message dialog. With C++/CX the best way to do this call is to create a task that will consume the async operation for return an IAsyncOperation interface. This is very straightforward: we just have to call the create_task method and pass it an IAsyncOperation^ object. Let’s modify our code,
Include ppltasks.h header at the top of the C++ source file and open the concurrency namespace,
And call create_task with the asynchronous call into it,
- create_task(messageDialog->ShowAsync());
Now, our code looks like,
That’s all we need to know for now, but with a create_task method, we can chain tasks with the then function to create continuation.
Run the application
Now, let’s run again. Once the application started running we can now click on the Button to show a dialog message with text inside. This dialog can be dismissed with Close button.
Thanks for reading!