Your first Xaml app C++

When i was playing around with the good old win32 api programming i didn’t even know there was new way of doing this thing and i just randomly found it out, well it was in visual studio 2015 templates though but you still had to install universal windows templates (hope you got space in your hdd). There comes a lot of cool things with this thing, like designing the applications UI is as easy as writing a html page cus xaml is almost like html and if you know something of windows programming then its just a small jump into to this plus you can publish your super cool apps on Windows Store and they even run on Windows Phones. So lets take a look at this.

So lets just start a New Project → Templates → Visual C++ → Windows → Universal → Blank App

Screenshot_2

Screenshot_5

There i just named it ”Hello Xaml”

and Target Version Win10 & Min Version Win10

Screenshot_4

Now if we take a look at Solution Explorer

You want to expand App.xaml and MainPage.xaml

Screenshot_3

If we open App.xaml (right click) theres not much interesting stuff in there just some broken links, so we dont need to care about that. Next is App.xaml.cpp file in there it starts up our app and takes care of crashing part if something doesn’t work so take a while and read all comments in there, you can also see lots of namespace things listed in there, if you dont get the idea about them now, then you will later. When you are done with that then go check out the App.xaml.h file too.

In this tutorial we dont need to touch those files so im not gonna overfill you with stuff and make your head explode, so im just going to keep it simple as possible 😉

Now lets open up the MainPage.xaml file

Screenshot_7

So this is the box where we want to put our UI styling code. Lets add textedit box right in the middle of app.

Put this between Grid tabs(margin looks different in the pic but just use this):

<TextBox Name=”MyEditBox” Width=”200px” Height=”30px” Margin=”0,0,0,300″ />

Screenshot_8

Then we need to add couple things more, button and box where our text appears after we click the button.

<Button Click=”Button_Click” Content=”Button” Width=”75px” Margin=”500,0,0,300″/>

<TextBlock Name=”MyText” Width=”100px” Height=”30px” Margin=”0,0,0,200″ />

Then open MainPage.xaml.h file and add this in public → below MainPage();

void MainPage::Button_Click();

Screenshot_11

 

Next open MainPage.Xaml.cpp file and add this end of file

void MainPage::Button_Click()

{

MyText->Text = MyEditBox->Text;

}

Screenshot_10

Now just hit Debug and there you go, type something in the box and hit the button and what you just typed should appear below it, that wasn’t hard right? Positioning things was kinda hard if you use Designing preview window, it just makes no sense.

Extra stuff –

If you want awesome Gabens face in the middle of app to screw everything up, add this between Grid tabs

<Image Source=”http://unisci24.com/data_images/wlls/20/238975-gabe-newell.jpg&#8221; Width=”600px” Height=”338px” />

Or just go find your own picture 😉

If you want to get rid of that tiny black box at mid top (its called UI Debugging tool)

Tools → Debugging → General → Enable UI Debugging Tools for XAML

Screenshot_12

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s