JavaScript Error

Hello World (UWP)

In this blog post I demonstrate how to use Visual Studio 2022 to create a new C++ Universal Windows Program (UWP) application.

I will then show you how I updated its XAML window to add a Button control and a TextBlock control to the window, hook the Button control to a Click event callback function, and then program that Click event callback function to update the text that is displayed by the TextBlock control whenever the Button is clicked on.

To begin, perform the following steps:

1. Run Visual Studio 2022, and click on Create A New Project:
   


2. Then in the Create A New Project screen, set the drop down menu filters to C++, Windows, and Desktop, then select Blank App (Universal Windows C++/CX) and then click Next to continue to the next screen:
   


3. In the Configure your new project screen, set your Project Name, Location, and Solution name, and then Create to continue:
   


4. You will then be prompt to select the target and minimum platform versions that your UWP application will support. Select the options most appropriate for your situation, and then click OK to continue:
   

At this point you should now have a new blank C++ UWP application, which has one XAML window (i.e. MainWindow) already linked to it.

If you compile and run the program now, just to make sure it compiles and runs OK without errors, you should see a blank window:

XAML Window

Using Visual Studio 2022's editor, I edit the MainPage.xaml file of my UWP project and I add a StackPanel to the Grid, and then I add a Button and a TextBlock control to that StackPanel. Afterwards I edit their properties to change their size, color and font property values:

I then add a Click event to the Button control by typing Click="" into the Button element as an attribute, and then double clicking on the <New Event Handler> option from the displayed intelliSense popup context menu:

The front-end XAML source code:

<Page
    x:Class="Test1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    Width="400" Height="400" >
    <Grid>

        <StackPanel Margin="10,10,0,0">

            <Button x:Name="Button1" 
                Width="100" 
                Height="40" 
                Content="Click Me" 
                ClickMode="Release" 
                Click="Button1_Click">
            </Button>

            <TextBlock x:Name="TextBlock1"
                Foreground="Maroon"
                FontSize="24"
                FontWeight="Bold">
            </TextBlock>

        </StackPanel>

    </Grid>
</Page>

C++ Source Code

I then open the MainPage.xaml.cpp file and edit the source code to add some functionality to the Button's Click event callback function (Button1_Click). In this example, I simply instruct the program to update the TextBlock's displayed text whenever the Button control is clicked and re-clicked on:

The back-end C++ source code:

#include "pch.h"
#include "MainPage.xaml.h"

using namespace Test1;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;

MainPage::MainPage()
{
    InitializeComponent();
}

void Test1::MainPage::Button1_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    // respond to this button being clicked on
    if (TextBlock1->Text != "Hello World!")
    {
        TextBlock1->Text = "Hello World!";
    }
    else
    {
        TextBlock1->Text = "Click the button again.";
    }
}

After making the above modifications, now when I compile and run the program I see something similar to the following:

And each time I continue to click on the Click Me button it toggles the displayed text back and forth.

Final Thoughts

With the power of XAML combined with C++, the displayed controls on the window can be fully Styled in virtually any way you like, which gives your applications the familiarity of C#'s WPF but with the power and speed of C++.

Also, combining XAML with C++ might make it a little easier for C# WPF developers to migrate over into the C++ world.

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(0)
	(0)