How to add a new XAML "Page", and its associated code-behind files, in C++/WinRT in Visual Studio?

Question

There are various related questions that give a hint how to add a new XAML Page properly to a WinRT/C++ project in Visual Studio, but none are specific to C++/WinRT. (I.e, here, here, and here.)

Further, though WinRT/C++ is a great improvement over C++/CX (in my opinion), almost all Microsoft documentation uses either C# or C++/CX as examples.

To make matters worse, as of the date of this posting, when you use the Add Item feature in Visual Studio to add a XAML Page, it creates the page in C++/CX even for WinRT/C++ projects.

Finally, there is (as of this date) no documentation provided by Microsoft for how to add a new XAML Page to a WinRT/C++ project, at least that I can find (see first paragraph).

Ugh.

To save others potentially hours, I have pieced together the hints and succeeded in properly adding a new XAML Page to a Visual Studio WinRT/C++ project.

I am asking and answering the question: How do you add a new XAML Page to a WinRT/C++ project in Visual Studio?

---

Addendum

I was missing the obvious! It turns out you can use Visual Studio to trivally add a WinRT/C++ XAML Page. Despite looking as carefully as I (thought) I could.

The (easy) correct answer is given in answer #2.

But I'll keep this question and answer up - in case anyone else blunders down the same path and can't find the option to add a XAML Page in WinRT/C++ in Visual Studio.

Answer 1

I was missing the obvious!

It turns out you can use Visual Studio to trivally add a WinRT/C++ XAML Page.

Despite looking as carefully as I (thought) I could through the options in Visual Studio's editor, I missed the location of the XAML template for WinRT/C++ projects.

So, for completeness, I'll paste screenshots.

---

Here is how you add a new XAML Page to an existing WinRT/C++ project, spelled out in painful detail.

Step 1: Right-click on the solution, and navigate through the menu/submenus to Add New Item...

Don't select the XAML node.

...Keep the ROOT NODE selected:

Here's what it looks like if you select the 'XAML' node in the Add New Item... entry:

---

Bottom line

I lost a few hours because I assumed that it was a good idea to click on the 'XAML' node in the Add New Item... dialog to filter down to just XAML-related templates.

Unfortunately, the XAML template for the WinRT/C++ version of the component is not present in that list (as of the day I write this). You have to click on the root node to see it.

I will leave my other answer up, in case it's useful to anybody.

But this answer describes the (trivial) correct way to add a new XAML Page to a WinRT/C++ project - use the Visual Studio editor to Add New Item..., as expected.

Answer 2

To save others potentially hours, I have pieced together the hints and succeeded in properly adding a new XAML Page to a Visual Studio WinRT/C++ project.

Here is the answer.

Pictures are worth thousands of words, so here are the steps.

• Save and close your project in Visual Studio
• Manually open the .vcxproj and .vcxproj.filters files in a text editor

• Assume we already have the default page, MainPage.xaml and its associated .idl and code-behind files. In the following steps, we will create a new XAML page and its associated files called LoginPage.
• No need to actually create the files for LoginPage yet - we'll do that in the final steps. Just edit the .vcxproj and .vcxproj.filters files for now.
• In both of these two files, we will copy every block that contains a reference to MainPage and modify it to read LoginPage.
• Start by editing the .vcxproj file

Block 1: code-behind dependency for the LoginPage.cpp - LoginPage.xaml relationship

We start with this:

...Modify the block to add a section for LoginPage, resulting in this:

Block 2: code-behind dependency for the LoginPage.h - LoginPage.xaml relationship

We start with this:

...Modify the block to add a section for LoginPage, resulting in this:

Block 3: Let Visual Studio know to use the Designer for LoginPage.xaml (I think!)

We start with this:

...Modify the block to add a section for LoginPage, resulting in this:

Block 2: code-behind dependency for the LoginPage.idl - LoginPage.xaml relationship

We start with this:

...Modify the block to add a section for LoginPage, resulting in this:

• Proceed to edit the .vcxproj.filters file

Block 1: Tell Visual Studio to include LoginPage.xaml in Solution Explorer (I think!)

We start with this:

...Modify the block to add a section for LoginPage, resulting in this:

Block 2: Tell Visual Studio to include LoginPage.idl in Solution Explorer (I think!)

We start with this:

...Modify the block to add a section for LoginPage, resulting in this:

Block 3: Tell Visual Studio to compile LoginPage.cpp as part of this project (I think!)

We start with this:

...Modify the block to add a section for LoginPage, resulting in this:

• You're done editing the .vcxproj and .vcxproj.filters files. Save and close them.
• The rest is simple. Create all four LoginPage files by simply copying the MainPage files.

We start with these files in the project:

...after copying the 4 (highlighted) MainPage files, and renaming them to LoginPage, we end up with these files:

• For the final step, you must actually open up each of the four new LoginPage files in a text editor (not Visual Studio) and do a search-and-replace for the text MainPage and replace with LoginPage.

  In the search, DO match on capitalization, but DO NOT match on 'whole-word only' (i.e., there are some data types that have MainPage as part of the name, such as MainPageT, and these must also be searched-and-replaced).

  I won't bore you by pasting screenshots of the actual source code files.

• Once you have replaced all occurrences of MainPage with LoginPage in the four files noted, save and close the file.

• You're done!

Open the solution in Visual Studio, and notice the beauty:

Solution Explorer now shows our LoginPage.xaml file along with its code-behind files, properly nested:

...and pressing F7 to build the project results in a successful build:

...and it successfully runs, as well - unchanged from what it did before.

This is because, of course, you haven't DONE anything with LoginPage yet - it doesn't appear in your user interface - but it's available for use in code and I'll let you take it from here!

As grateful as I am that Microsoft has released the excellent WinRT/C++ functionality - it is rather ... frustrating ... to say the least - that as of this date there is no way to add a new XAML Page to a WinRT/C++ project using Visual Studio standard tooling (such as the Add Item option), so far as I can see. It is further... frustrating... that there is also no documentation whatsoever that explains how to do it (that I can find).

I sure hope that my question and answer become irrelevant very soon and that Microsoft adds both tooling and documentation re. adding a new XAML Page to an existing WinRT/C++ project in Visual studio.

Or maybe I'm mistaken? Maybe it's already possible to do this easily, and I just couldn't find it?

I hope this helps someone, though, just in case!