Writing my first windows 8 Metro App

Posted on April 23rd, 2012 by alfredo

Hi Everyone,
Today I got started building my first windows 8 app. Decided that I wanted to write a standard WPF MVVM app and try the javascript interactions later. Loaded my windows 8 image created a project and downloaded Prism to get started. I was surprised while adding the dll’s to prism that they do not work with windows core which is the framework that metro apps run on that. Realized that I’m going to have to be crafty and just take the exact part of Prism and adapt them.
Opened expression blend created a project from a template to get started.
First thing to surprise me was to see that the toolbar is completely gone replaced by the appbar. They work the same way therefore more of an inconvenience of recognizing what the name of the component is.

<appbar grid.column="0" grid.row="0">

<stackpanel>

<button horizontalalignment="Left" verticalalignment="Top">

<ellipse
Height=40t

Width=40

StrokeThickness=3

Stroke={StaticResource ApplicationTextBrush}/>

</button>

</stackpanel>

</appbar>

After that the next item that stomped me was when I tried to look for icons clicling on any picture takes me to a full screen method in which at the moment scrolling did not work on the folder that I was. Weird behavior kept me having go back and forth between the folders on the desktop and the metro start page…

While doing this I had my ui freeze causing a restart. Which is okay since its a beta preview.

A cool thing that I noticed is the new standard template breaks your app into folders Assets, Common, DataModel. If you add a xaml resource into the Common folder gets automatically added has a merged dictionary on the app level.

After adding the shared dictionary I wanted to add a textblock surrounded by a circle I tried to copy some old code using the label type to discover that it no longer exists.

Got the same effect from using:

<button>
  <border horizontalalignment="Center" verticalalignment="Center" width="40" height="40" borderbrush="{StaticResource ApplicationTextBrush}" borderthickness="3" cornerradius="20">

   <textblock horizontalalignment="Center" verticalalignment="Center">40 F</textblock>

    </border>

    </button>

Since I was using it a bunch of places decide to make it a global resource to find out that the syntax for declaring types has changed from:
{StaticResource {x:Type Button}}"
To be more similar to what is used in Silverlight which can be read on this link:
Which requires to either create and converter for similar functionality or reference directly from the based template of the controls which is what I did by doing:
BasedOn="{StaticResource AppBarButtonStyle}"

At the end in order to substituthe contentcontrol behavior that I would normally use a label for used a contentcontrol which made the button look the way I desired.

Another point to make to change the application loaded frame you want to go to app.xaml.cs -> protected override void OnLaunched(LaunchActivatedEventArgs args);

Overall so far got quite some progress on this. Like the new setup for the project. Feel like sometimes while testing the os crashes a bit much and I need to more exploration of all the controls(ToggleButton rock). Added some resources on the button and will keep making post has the application progress and post some images later. At the end some links to a few resources.

-Alfredo Out

Icon Resource
I’m using the ones from this website but you can also use the ones from the phone.
http://www.iconsforwindows8.com/

Tags: programming; xaml; windows 8

Categories: Programming, Windows 8

One Response to 'Writing my first windows 8 Metro App'

  1. Jen says:

    Thanks for blogging this one Ben! I ran into the same issue a few weeks ago and deeidcd to postpone and focus my efforts on something else after much head scratching. Today I tried again to no avail and google was kind enough to point me to your blog I’m using the dummy approach for now, will probably have to add more entries anyway as I go along. I just could’t figure out why the heck it wasn’t working with my single entry. Never bothered trying to add more or hooking up StartupUri again etc., just assumed it must have been me doing it wrong lol

Leave a Reply

WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera