Data Structures: Using WinRT with XAML/C# as a Presentation UI

  • Article

Ok, I give up on writing about Modern UI.  That’s it.  No one ask me to by the way.  My decision.  That last Modern UI blog really blew chunks.  So, let’s just move on. Smile

Today, let’s go over how to use WinRT, with a really simple example that we can build on.  It is basically from one of the //Build events and the video is interesting so make sure to view it.  However, there are several differences between the video and the VS 2012 version that I have included in this writing. https://aka.ms/qfdn3r

WinRT, why?

Mainly because there is other interesting things in Windows 8 design like WinRT.  WinRT is different then the use of COM.  But there is commonality:

  • WinRT confuses people, COM confuses people, so there one point of equality.
  • WinRT seems like it is hard to work with, COM seems like it is hard to work with, another point of commonality. 
  • WinRT isn’t dependent on the CLR and works with native code as we shall see in a later blog, and is easy to work with, unlike COM in C++.

So how is WinRT different then COM?  More in a later  blog or you can watch the video at https://aka.ms/qfdn3r (which uses a much older version of Visual studio, but if you read between the lines you should figure it out).

First of all fire up Visual Studio 2012 RC, I am using the Premium Version on the Consumer Review of Windows 8, which I should upgrade to RTM.  Then open VC++ and select the following “Windows RunTime Component”, Not DLL (Metro style Apps).  Name your project Calculator

image

Then cut the code in the file and paste this code into the project, this will simply add two numbers together, not useful, but there you go.  It will make sense later.  You will have to modify the cpp file:

 #include "pch.h"
#include "Class1.h"

using namespace Calculator;

Make sure to do this in the header or .h file

 #pragma once

namespace Calculator
{
    public ref class CalculatorRT sealed
    {
    public:
        int Add(int i, int j)
        {

            return i+j;

        }
    };
}

/**********************/

Presenting the WinRT functionality

Once you have done that, now ADD a XAML C++ project, don’t compile yet.  Then add a reference to the WinRT C++ Project in the new XAML C++ project you just added.  Keep it simple.  Just FYI, avoid naming the class name the same as the namespace.

If you build the C++ file prior to building the solution then you will need to clean Visual Studio.

On the C# solution, right click and select “Add Reference” then view the next step below this one:

image

Now add a reference to the WinRT file, make sure to CHECK the box to the left of the namespace, otherwise the reference won’t go into the C# project.

image

After adding the “using” directive, the following intellisense will appear, notice that the Calculator WinRT component shows up.  Sometimes it doesn’t, you may need to clean the C++ solution, or save or close and open again.  A pain, but hopefully it will be fixed in the final version.

image

Now you can add the code that utilizes the WinRT component in C#, find the partial class and the method public MainPage(), you can cut and paste the following code. 

     public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            CalculatorRT calc = new CalculatorRT();

            SillyName.Text = calc.Add(10, 20).ToString();
        }

That’s it for using WinRT with XAML, you have seen how to reuse C++ code with C#.  Tomorrow I will cover JavaScript/HTML 5.

Of course really using the C++ code requires design and user considerations, but this is a basic idea.  If you view the video on Channel 9, there are variations in the Visual Studio tools and implementation.