Category Archives: Windows 8

Microsoft Windows 8 Tablets, Phones, and PCs

Building Metro style apps with XAML and C++

With Tim Heuer

Write NATIVE C++ Code with XAML Event


The Channel 9 Event is happening live today on Channel 9.. Catch it today live right now..
(Editor’s Note: Since the event is past now  All sessions will be available for on demand viewing on 5/21 or 5/22.)

Tweet questions to #ch9live.
Whether you are a new C++ developer ready to learn about writing Metro style apps, an intermediate developer who wants to hone your code and skills, or an experienced C++ developer eager to squeeze every ounce of performance out of your Metro style app, this event is for you.  We will have pragmatic advice for every developer writing Metro style apps and games with XAML and/or DirectX and C++.
Note: These Windows-specific talks will use both portable ISO C++ and Visual C++-specific compiler extensions.


The MetroPad Project: Designing and Building for Win 8

An Ode to Arktronics TextCraft

When I was a young kid in high school, I was quite the computer geek.  Nastier people in high school called me a nerd. Nowadays the jocks that I know, nicknamed me “Super Techie”.. I was a very lucky kid though. My first real computer (that did more than BASIC language programming) was called the Commodore-Amiga 1000.  It’s pictured below. I scanned a picture of it below from original specification sheets I still kept today..  And, yes, I am an Amiga collector today..


I loved this computer because BASIC didn’t show up when you loaded it up, you got the multi-tasking AmigaDOS though I spent many hours learning programming in Amiga Lattice C and finally SAS C, . Computers didn’t multi-task back then or really even task switch. Computers usually had 4 to 16 colors, and this one had 4096 that you could see on screen at once. It had a BIMMER (A super “blitter”) and three separate chips that ran independent of the CPU most of the time. These days we call this kind of thing a GPU..

a_scuzz_nov14_02The first GUI word processor I got for this was called TextCraft, in those days software wasn’t sold and licensed in quite the same way as it is today and Commodore-Amiga released for the Amiga 1000 under AmigaDOS 1.0-1.3..  The first time I saw TextCraft my first thoughts were I want to reach right out and touch the buttons on the screen.

It was done by a small local company called Arktronics (later called the Disc Company) who did the first GUI based word processor called Jane for the Apple ][ and Commodore 128 8-bit computers.  I was asked to come in on Saturday mornings during high school and beta test for them. It was fun and free and I got to meet company founders (back so long ago) like Bobby Kotick who later bought Activision and is now the president of Activision Blizzard.


The user interface was simple and effective and what we would consider a spartan text editor today, but as I mentioned before it looked touch friendly and inviting for touch..  Very Mac like but colorful (unlike the Macs of it’s time).  And very touch friendly (even though we didn’t have a touch interface on an Amiga until a few years later (Elographics) and it looked nothing like an Apple iPad today or a Windows 8 Slate PC either..


When I saw the Windows 8 Metro interface for the first time I started doing some free association about what I thought of it as a design language. What it meant for touch and the first time I wanted to touch a computer’s screen.  I got that same feeling again when I started looking at “METRO” apps on a Windows 8 Tablet.

Microsoft Word from the upcoming Office 15 version ??

I don’t need something a complicated as (in the picture above) to process text. The screen shot above is supposedly of the upcoming Microsoft  Word in the upcoming Office 15. My app will be less complex, and be just touch enabled to take notes and process text. This app isn’t to create novels on like I could with the upcoming  “metro” Word update in Office 15.  Check out the WinSuperSite Preview by clicking on the picture above..

By the way, is this a “REAL” METRO APP ? From the pictures, it still seems to use the Windows Desktop Mode for it’s document creation (at least so far as what we have seen so far).

But heck!  I want a “tablet” touch friendly interface experience that I can type right on the screen with to create simple text documents. I don’t even’ really need Rich Text Format for what I am doing just simple “type and go” type .  So that was my impetus for starting to work on a “MetroPad” app for Windows 8, and to also give me a chance to to learn to create a running “metro” style application with Blend for Visual Studio and Visual Studio 11.

Giving our project the “metro” treatment

So I decided to re-imagine TextCraft as it would look had it jumped from 1985 to 2012 in a few hours..


Stay away from the feature creep

The first thing that I thought of when I decided to create a Metro app.. What were my tasks ?

  • Basic text editing cut/paste/copy/undo/selection
  • Styling Text: Bold, Italics, and underline
  • Load or Save locally or in the cloud
  • Inserting an image into our text layout
  • Basic printing

Starting our project with Blend for Visual Studio

Why not just get started by opening Visual Studio and getting started coding ? Because we are designing a real METRO app ! That’s why!  Ultimately you should start with wireframes and good design practice.  You might want to start here..

Integrating design as part of the agile development process



The days of “Make it look pretty..” are gone

lipstikPigIf you are a programmer you are about to get mad at what I am going to say to you..  I am going to take you out of your comfort zone.  Even with WPF and Silverlight there weren’t strict standards for user interface adherence. You could get away with coding everything then going back and hiring a designer to cobble something together to make your code together into something that worked but not something your users’ could live with are gone ..

If you started your application for Windows  and it looks like a bad game of tic-tac-toe or the TV show “The Hollywood Squares” you really aren’t getting the point of the METRO design language in the first place.

In this instance a “Live Tile” is not a menu item or a menu button..  This is not how you select something.  Do you think this would sell competitively ?



imageI have been just about crapping in my pants about how ineffectively “METRO” design principles are being conveyed at WIndows 8 bootcamps lately. Yes that means you Microsoft Developer Evangelists, I am calling you out on this..

If you get an introduction to Windows 8 with someone first opening Visual Studio and not Blend FIRST! then you are getting a really bad deal. There is no easier way for a developer to go down the wrong path without this.. The reason that Blend is not Expression Blend but Blend for Visual Studio is that Microsoft feels that Blend is such an integrated part of Visual Studio now it will come integrated into every commercial version of Visual Studio for Windows 8..

Default templates now included with both Visual Studio and Blend are now included a warning message that if you don’t include “METRO” design functionality in your interface that they will not work and will not be accepted to the “Windows Marketplace”..



“The Common directory contains classes and XAML styles that simplify application development. These are not merely convenient, but are required by most Visual Studio project and item templates. Removing, renaming, or otherwise modifying the content of these files may result in a project that does not build, or that will not build once additional pages are added.  If variations on these classes or styles are desired it is recommended that you copy the content under a new name and modify your private copy.”

What is in the common folder that’s so important ?

Value Converters

Boolean Negation: A boolean negation converter for visibility that  translates true to  Visibility.Visible and false to  Visibility.Collapsed

Boolean to Visibility: A value converter that translates true to false and vice versa.

Layout Aware Page Class

A common implementation of “Page” that provides several important conveniences

  • Adds an  application view state to visual state mapping
  • GoBack and GoHome event handlersr
  • A default view model


An implementation of INotifyPropertyChanged that simplifies models. Creates a “multicast” event handler and listener for INotifyPropertyChange events.


A wrapper for RichTextBlock that creates as many additional overflow columns as needed to fit the available content.


Standard light and dark styles and rules for metro apps. These will be familiar to Blend designers.

Freezing your Application with Suspension Manager Code


Because Windows 8 and METRO applications now run on both ARM and Intel devices and can scale to phones, tablet, PCs and even maybe some other types of devices we haven’t thought of yet that can run on batteries,  Microsoft recommends you include code to freeze and unfreeze your application temporarily. In a world where we run on extremely low power devices with batteries being able to suspend your METRO application has become extremely important..

Microsoft provides SuspensionManager.cs sample code that you can use  for handling this process.  I have heard more than one programmer since Windows Phone and Windows 8 suggest that the ability to “Freeze” apps and switch isn’t real multi-tasking. Well my response is this: if you have a device (other than a desktop PC) that you can switch off and switch back on at anytime and you an OS that has to fetch things at odd intervals and must stop what it’s doing then be “instantly” back on you need to be able to do this.

There are many situations where you may loose a data connection as well that the device can’t just sit there eating your battery. Under Windows Mobile battery life was terrible. It was mostly because multi-tasking was a continuous thing and the suspend resume facilities that were added weren’t used effectively by app programmers.

This also affects the user experience and user interface as well. You can’t just really terminate and restart the program and expect the user not to get annoyed when they pick up the device and were not right back where they left it.

It needs to remember what the user was doing and where it was when they left off.  This works well in all cases including when the program is waiting for too long for something (including things like a data request from the internet) and is terminated by the operating system so it’s not caught in a battery eating loop.

Programmers might ask wait, suspending “apps” has to do with design. Well our program must remember what was going on before, context, state, etc. so when it resumes and reactivates the user finds themselves right back where they were when they see your app’s UI.

For more information on lifecycle events check out:


The OnLaunched Lifecycle Event

Adding an OnLaunched event handler code, lets your app can check the PreviousExecutionState on the event arguments. If it equals Terminated, restore the data you saved in the Suspending event. If it is a different value, use your app’s default data.

In our app we could even override the OnLaunched event to handle activation a basic activation from a live tile.

Here’s an example code snippet  that Microsoft provides for creating an OnLaunched Handler to deal with user activation of a stock app that loops through all possible scenarios including resuming from a suspend application:


More on this later, but in our own app, the user might be editing or entering text that they haven’t saved, and if the user has suspended work and switched to another app or he has powered down his device we want to be able to fetch the text back to the exact state he was in before.

Starting in Blend for Visual Studio


As soon as I am in Blend for Visual Studio I am going to create a new project. For this project I am going to use C# and XAML just as I would have if I were doing a .NET project in the past instead of a WinRT project right now.. I could just as easily do this in JavaScript or C++ native code because Blend supports them both. In a future installment I will look at doing this app in C++.  Unlike past versions of Windows the WinRT XAML controls that we will be using are the same across these different languages and have all the same  capabilities, in both native and managed code, making our development cycle much easier.  Here is a look at the XAML control toolbox in Microsoft Expression Blend..


Since we are doing text editing and processing in our app I was hoping to find a “rich” textbox control that handled “RTF” (rich text format) text and had methods already established for formatting text.  Unfortunately since we are in the “beta” state there seems to be NO SUCH control as I have seen in previous versions of Windows to make this easier.  I would really love to be able to change the typeface and control formatting text and decorations that adorn the look and style of my users’ text more precisely. 

My options currently are as follows:


This forces me again to think about the user experience and which controls I am going to use.. I finally decided to use the RichEditBox because every other option seems to be one way and static one way bindings for data.

imageNext, I started to create the elements I needed on-screen starting with the RichEditBox.. My layout ended up looking like this and there is still some new options needed but let’s focus on our main work area for now the RichEditBox control..


After dropping the RichEditBox control in our BlankPage.XAML main grid on the design surface of blend in the main stack panel I named the control RTBEdit and set-up properties for the control.  The XAML code looked like this:

<RichEditBox x:Name=”RTBEdit” Height=”400″ VerticalAlignment=”Top” ScrollViewer.HorizontalScrollBarVisibility=”Disabled” ScrollViewer.VerticalScrollBarVisibility=”Visible” BorderBrush=”Black” Background=”White” FontSize=”26.0″/>

Our next adventure will be wiring up the RichEditBox  to bring in a text file using the file picker.

I will next create the background rectangle for my RULER and create a series of buttons and create a code behind to pick and read the file into the RichEditBox for viewing and editing..

So to get started I create a series of buttons in the main Grid’s StackPanel and set the ordering so it will include a rectangle the RichEditBox and FileDetail TextBlock which will later show us the file name of the text we have currently loaded up.

imageIn the main Grid I will also create a horizontal StackPanel and name it Menus. Here I will add our project menu to load and save files. There will be a few other buttons for Layout, Styling text,  and any Extra capabilities we might implement.  Since this is a text editor that is touch friendly we will only allow one file open at a time.

So this means I will use the Project menu to Load new text and contextually save when necessary. We will automatically check to see if the text is UNSAVED and prompt the user clicking the Project Button.


Before we fill the rest of these out, let’s wire up some code to the ProjectBtn so we can pick a file to open and load the text right into the RichEditBox control.

imageWhen we select the ProjectBtn control we notice that it is simply a control derived and inheriting the properties and capabilities of the Windows.UI.Xaml.Controls Class..  and it reacts to the ButtonBase CLICK event.

When this click event fires on our project button we will need it to access the “METRO” file picker and read in the text file into our RichEditBox for user manipulation.

imageMaking sure we have the ProjectBtn Clicked in the design surface, we go over to the properties panel and select the events icon that looks like the symbol for lightning.

This will switch us to the next view to define our code-behind.

imageNext we will  name our “Click“ event UIOpenFile_Click. When we hit enter after typing the name,  Blend will next open us up in code mode away from design mode on BlankPage.XAML.cs  and give us the frame for us to type in the code needed to open up our file picker in the METRO interface and select files..  Be sure to watch for duplicate names in the code.

Here in our code editor we can next enter code for when this event fires.


We next add code to pick the file and load up our RichEditBox with the text file..


So the first thing we do is create a keyword NEW instance of the FileOpenPicker() function that we will name picker.

var picker = new FileOpenPicker();

Next we define a few of the more important properties to help guide the user along..

picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
picker.ViewMode = PickerViewMode.List;

First should set a start location for this picker to open. We should point it to open up right inside the users own documents library.. Since we are not dealing with loading an image in this case (just opening a text file) I am going to show the picker in the file list mode instead of thumbnails.


// no RTF file support yet in RichEditBox picker.FileTypeFilter.Add(“.rtf”);

Next I am going to set our picker to clear any file type  filters that are already set and only show us files ending in .TXT and .HTM format.  We could add more filters  to show only the filetypes we needed. But this works fine for now.

var file = await picker.PickSingleFileAsync();
if (file == null) return;
string fileContent = await FileIO.ReadTextAsync(file);

Next, tell it to wait until the user has chosen a file and make sure there is content in it before trying to read it into memory and store it in the RichEditBox.   Here is our Picker opened up ready to choose a file.


After the file is read we pass the name of the file to the TextBlock control’s text property so the user sees the name of the file we are loading.

FileDetail.Text = file.Name.ToString();

Next we call the RichEditBox’s SetText  functionality to pass the file object that the Picker has created for us to pass the content into RichEditBox for editing.

 this.RTBEdit.Document.SetText(Windows.UI.Text.TextSetOptions.None, fileContent.ToString());

and voila!! We can now load text right into our RichEditBox..


Add a Guest Operating System (Linux, etc.) to Windows 8

You can use the hardware virtualization built into many CPUs to run a guest operating system directly inside Windows 8.. So you can run Windows 7, Windows XP, Linux, etc. Right inside of Windows 8..

Jeff Sandquist Shows off Project Detroit


This year at Microsoft’s Build Conference , Microsoft announced a partnership between the Channel 9/Coding4Fun team and Ryan Friedlinghaus, world famous and award winning automotive designer based in Corona, California and star of the Discovery Channel’s Velocity network reality TV series, Inside West Coast Customs

Operating under the codename Project Detroit, the Niners set out to reconstruct a 1967 Ford Mustang Fastback to be outfitted with the latest in Microsoft technology.

Find out more at Coding4fFun..



Apple Users! Beware Windows XP Derangement Syndrome

I know most Apple users are big on their operating system and the momentum that mobile devices have propelled Apple to new heights but face it, it’s not quite a post PC world just yet..

imageThere are some misnomers out there and I have to say I hear it a lot from folks who have MacBook Pro’s but are running Windows XP and assuming that there are more computers out there still running XP  on BootCamp on their machines that haven’t upgraded Windows and are about two generations behind in their criticisms today.. Apple’s smear campaign against Windows Vista..

Let’s take a look at some facts about Windows and the current state of the PC..

Internet Explorer 9 and 10

Now some people out there in the world are still complaining that there are “just too many copies of IE 6 out there in the wild in use today on their older machines.. This is very false to FACT.. In fact, two years ago, users held a funeral for IE 6..  Microsoft even sent flowers..

So what do people use if they aren’t on Windows XP ?? Many use Internet Explorer 9 which is the current version. What do you use if you are on XP ? Well many of you should know that Microsoft ended the shelf life of Windows XP back in 2008..


While we are on the subject JUST HOW MANY PEOPLE are out there today RUNNING Windows XP and Internet Explorer 6 ??  As of February 2012 the last count world-wide was 7.1%. Most maybe in China. and I’d ask you are they running on a LICENSED product that is EOL.. When did you last run an operating system and a browser that was released over 12 years ago.. If you are well maybe you should consider some alternatives..


Microsoft will ship Windows 8 with Internet Explorer 10 a fully functional HTML 5 web browser that has been totally re-written to support HTML 5 from the ground up with the IE 9 release. Not even the critics can complain about this one..

So how many copies of other IE Browsers are out there in use today ? Including IE 8 ?  IE 8 (Internet Explorer Version 8 is the last version that runs on XP?  A recent live snapshot tells us the story.. In fact the people complaining about IE 8 should be the ones supporting not complaining as it’s more used than Mozilla Firefox and Google Chrome , which (besides for one day ended) ends up being the most used browser in the world. So why aren’t web standards people lining up to support it ?

Could we call it anti- Microsoft Bias ?? I sure could..  Microsoft turned on standards mode (STRICT) HTML 4 standards compliance on by default with IE 8 with HTML 4, Yet site creators at-large refused to support opt-in for IE 8 so we could all put IE to rest,  Microsoft answered that problem with IE 9.0 a modern HTML 5 browser.


Internet Explorer 9 and 10 creates a new HTML 5 compatible world

So Microsoft’s new version, which works with Windows Vista and above, brings us true HTML 5 compatibility and maintains website standards. If you navigate to a new site that isn’t compatible then it will flip back into a compatibility mode that is most compliant with that site.

Other nice features includes SANDBOXING which can isolate your browser into one Memory Space so it can’t infect malware into the rest of the machine..  It also brings AD BLOCKING technology right into the browser so you can block advertising and MALWARE much easier, should it try to get in..


Windows 8 Consumer Preview- The Cure for OLD PC WOES- Everything old can be *new* again
Have you not upgraded your machine to Vista, or did and unhappy with performance or not upgraded to  Windows 7 because you were afraid you didn’t have enough power to run it easily ?

Just wait until you get to the end of the article, I have a majorly GOOD surprise for you. HINT: Windows 8 supports lower spec devices such as Mobile Phones and Tablets that run at about the same speed and graphics power of your very old PC..  That means you can UPGRADE that OLD PC and still have a working machine and right now if you do and install over the internet it’s absolutely free until the final release comes out.. Your old PC   *MAY EVEN* be faster.. Just make sure your computer display is capable of 1024×768 resolution.  Netbooks with a minimum screen of1024x768 are supported. Some early netbooks only do 1024×600 (still supported with Windows 7).

You can download and install the Windows 8 consumer preview right from the web right now no media needed just a broadband connection and it should work fine even on your old Windows XP BOX..

WAIT where’s my START menu…

It’s been replaced by a start screen..  Windows 8 with the new interface is much easier to get used to. In fact hitting the Windows key and the letter F key can help you find anything including Apps, Settings, and Files

In review: So if you are a MacBook Pro Owner telling folks that the world is still on IE 6 and Windows XP maybe you had better clue in, you are a few years behind the eight ball with your technology and what you are saying to others about Microsoft’s OS and Web Browser just might be a little bit behind the times and you might be giving out wrong information to the people that trust you to be knowledgeable may find you are giving them bad and wrong information. I am not hacking on you for having that MacBook Pro but isn’t it time to at least download the Windows 8 preview and give yourself a reality check ? Stop with the XP/IE 6 nonsense.

Windows 8 Running on an Apple MacBook Air   Wow ain’t that trackpad neat.. Check out Duncan’s YouTube Channel for more..

Apple users clue in just because you left Windows for MacOS under XP doesn’t mean time stood still. I would just ask you a few questions:

1) Why hack on Windows ? It’s a testament to Windows XP that 11 years later that you are still using it..

2) Why not try out Windows 7 or Windows 8.. You can even install it as a second OS. In fact Windows 8 is free right now to try as a consumer preview and installs right off the internet (no media necessary) just be sure to write down your product key when it shows you one.. You just might find it impressive and easier and actually work better after a few weeks than what you have right now.

It also migrates all of your old Windows Apps, settings and files so you don’t lose anything.

3) Please, stop hacking on IE, what you are talking about is ten year old software that most people in their right mind left long ago for new versions with less and now basically no compatibility issues.


If you are an old XP user that hasn’t given up the ghost and can’t get updates, TRY Windows 8. The requirements for your old PC to stay usable is less than ever before because this version scales to lower power processors such as the ones found in tablets and phones. Most all of your legacy hardware is supported too with drivers (even now.  Below is a youtube video of an Acer Aspire Netbook (slow processor 1 gig of ram) it’s pretty cool..


Windows Vista Users



Do you love Vista and don’t want to leave it, maybe you will miss the background movies too much ?? If you are and you are a bit discouraged about your performance there is always a quick fix.. It’s called Process Lasso by Bitsum..  Please download it today and feel the real POWER in Vista..



While this App looks METRO, and it’s advertised as a Beta (and only works on keyboards and mice at the moment), and while it installs an app to the METRO environment, it launches and works *NOT* in the metro environment but from the classic desktop mode. This seems kind of like a cop out for me.. I haven’t tried this app on Windows 7 but I am almost betting it will run there as well.. LOL

Obviously, FAUX Metro is the way to go.. With the options presented here, I could re-write this app’s UI myself in a few minutes as a real METRO app. So why they did a classic desktop app alone here is beyond me or one that (shocker) works both places and integrates into both. This is a little bit of a letdown considering this is marketed as a beta. Give us one app to rule them all.. It’s not that difficult is it ?

The app is still quite functional and usable in the “Classic Desktop Mode” Here’s what it looked like when it found my Arc Touch Mouse.. Will this be a common thing ? Will Microsoft still use classic desktop mode for things ? Is it too soon to have expected this built into the metro control panel ?


Download Link:

Introducing Expression Blend for Visual Studio Part 1

Introducing Expression Blend for Visual Studio using XAML Part 1

By Don Burnett Expression Blend MVP 2011-2012

Just what is Expression Blend for Visual Studio ? Why is Expression Blend now a Visual Studio product ? Well as most folks familiar with Windows development know, the process is not just about the programmer but it is also about incorporating good design for your user. About six years ago Microsoft Expression Blend was introduced as a what you see is what you get interface design tool and versions of this program have appeared to support not just WPF (Windows Presentation Foundation) tools but also support platforms as Silverlight (for .NET web browser based applications), Phone 7, and Sketchflow prototyping. All of these tools (while containing it’s own code editor) always allowed you to integrate directly with the Visual Studio code IDE (Integrated Development Environment).

Blend Should Be Everywhere!

Late last year when Microsoft decided that it was going to start focusing on putting together a next generation Windows environment that became Windows 8, they decided to promote better synergy between all platform product groups. Blend has always been directly part of that and it made sense that Microsoft could start integrating all of these environments together. Developers find themselves in Blend too.  Out of this (and the fact that Expression Blend and Expression Encoder were tightly part of the same workflow for many users out there and Expression Design had been supplanted by Adobe Photoshop and Adobe Illustrator Importing directly from Blend it made sense that in a revamped environment that Blend would make sense to be part of Visual Studio and a version would come with or be available to every version of Visual Studio available out there including Express Editions. 

When the product groups inside Microsoft were re-organized and integrated Microsoft also began sharing code between the Visual Studio XAML designer group and the Blend Group to make a more consistent environment between Blend and Visual Studio. This has produced some spectacular results. It also meant a version of Blend should make it to all development platforms Microsoft supports.

With the announcement of Windows 8 Microsoft has also integrated HTML 5 designer capabilities optionally instead of XAML, into the mix, for Windows 8 METRO applications (which work much like apps do in Windows Phone 7)

A Tour of The New Blend Beta


From the first glance we see that the New Blend is not a METRO app itself, but looks familiar and runs in the “classic desktop” environment for now.. In fact, besides some better more readable icons, it looks very much like the same old Blend we all know and love. However, there are a FEW additions to support HTML 5 and CSS 3.  And yes Virginia there is support for CSS 3 Media Queries before you ask..

The Project Menu


The project menu has been re-designed.. In a WinRT/ Metro app you will notice some difference to your “Solution”. There is now a “Common” folder with some new files that MUST be present to make the application work, these include BindableBase.cs, a set of standard XAML styles for the application called “StandardStyles.xaml”, RichText Column support, and LayoutAwarePage.cs. There are also two default converters files present for all metro apps called a BooleanNegation converter and a BooleantoVisibility converter. They help you convert datatypes from the ones you use in code to the types that are required for on-screen manipulation.

Also present in this beta (though creating a sample datasource thus far isn’t present in this beta) is a sample datasource so you do have a template for creating and working with Sample Data. It can be easily modified to support your own data (more on this later).

There is also a package.appxmanifest  file that is required for metro apps. Much like windows phone apps the manifest allows the app to be identified and signed with the appropriate identity information and developer “signatures”.

The package.appxmanifest file

As you can see below the sample app manifest contains identity information, pre-requisites for OS Versioning, a resources section to provide Windows the basic information to hook the application into the METRO environment and a capabilities section much like Windows Phone to identify things like if the application can access the internet or not.

<?xml version=”1.0″ encoding=”utf-8″?>
<Package xmlns=””>

  <Identity Name=”5274dfe2-c8a0-408e-833c-f887ff6a9f1c”
            Version=”″ />



    <Resource Language=”x-generate”/>

    <Application Id=”App”
            <DefaultTile ShowName=”allLogos” />
            <SplashScreen Image=”Assets\SplashScreen.png” />
    <Capability Name=”internetClient” />

For more information about setting up these capabilities, check out Microsoft’s information at:

Creating a New Project

Upfront we notice that there are METRO style monochrome icons that are much more readable.. If we go to create a “New Project” we will notice a few new project types and templates.  There is HTML and XAML available for Creating a Windows 8/WinRT  Metro Style Application.



There are in-built templates for Blank, Grid, Split, Fixed Layout, and Navigation Style Apps.. But more on this a bit later.. Notice the Javascript support above for creating a METRO style app as well..


XAML support isn’t forgotten either with it’s own sets of templates.

Grid Applications


If you select a “Grid Application”, Blend will provide you with a “Single Page Project that navigates betwee groups of items and has dedicated “Master-Detail” pages to display Items.. Here is a view of the template’s master-detail pages in action.






We can deploy this skeleton code either directly to the environment or test it on a Windows Tablet Device Simulator..  We can set this up through a panel in the “Platform”  panel in Blend..


You can set the screen size to match a particular on market device’s resolution and DPI when previewing and check your layouts with Horizontal and Vertical functionality (portrait/landscape) as well as scaling.. You can set the deploy target also to your local machine instead of the Emulator/Simulator as shown in the graphic above..

Deployed Locally


Deployed to the Simulator


Other Blend Features In XAML

The Visual State Manager

In the past if you were not a Silverlight designer you will not notice any default states or defined states in the visual state manager. In a WPF application you had to define all of these yourself..  For METRO apps there are are few already defined states that accommodate different screen modes..


These including Landscape (full screen) mode, Filled Mode, Portrait mode, and Snapped mode. I highly recommend you do not delete any of these unless your “METRO” app is only supporting one of these modes which again is HIGHLY NOT recommended..

You can use the state manager to create and handle state management of your own on-screen items, controls and their transitions, by creating more visual state groups for your own elements in XAML

Timeline Animation

You can also create complex animations with the OBJECTS and TIMELINE storyboard option.. In this example I am creating a new storyboard on one of the new METRO “FlipView” controls..





Collections in XAML for “Metro Apps” have been improved over other versions of XAML you can now create a CollectionView for items that are grouped on to your page.. Setting the source for a Collection of elements to be used on a page is now quite easy in XAML. In our UserControl Resources we just add a CollectionViewSource Element as seen in the XAML  below…



        <!– Collection of grouped items displayed by this page –>
            Source=”{Binding Groups}”
            d:Source=”{Binding ItemGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}”/>

Blend Goes Native with C++ Project Supportimage

Many programmers were shocked to hear that you could create a Windows Metro App UI now in HTML and JavaScript, but may the most exciting and OVERLOOKED support in Blend for Visual Studio is now the ability to create Windows apps directly in Windows own Native C++ environment.. Before Native Code in XAML was impossible unless you had created an App for Windows Embedded with Visual Studio 8 and the “WEST” Toolkit using Silverlight with C++.. Now because of the merge of product groups Microsoft has now enabled non .NET coding. They have also taken most of the pain away of trying to write a SKELETON “metro” app for those new to Native code development with Windows. Microsoft also has documented these templates well for new users.. Here is a link for you:

Lets take a look at our ItemDetailPage.xaml’s C plus plus (.CPP) and header (.h) files..


// ItemDetailPage.xaml.h
// Declaration of the ItemDetailPage class

#pragma once

#include “pch.h”
#include “Common\LayoutAwarePage.h” // Required by generated header
#include “Common\RichTextColumns.h” // Required by generated header
#include “ItemDetailPage.g.h”

#include <collection.h>

namespace Application13
    /// <summary>
    /// A page that displays details for a single item within a group while allowing gestures to
    /// flip through other items belonging to the same group.
    /// </summary>
    public ref class ItemDetailPage sealed

        virtual void OnNavigatedTo(Windows::UI::Xaml::Navigation::NavigationEventArgs^ e) override;


// ItemDetailPage.xaml.cpp
// Implementation of the ItemDetailPage class

#include “pch.h”
#include “ItemDetailPage.xaml.h”
#include “DataModel\SampleDataSource.h”

using namespace Application13;
using namespace Application13::Data;

using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::Graphics::Display;
using namespace Windows::UI::ViewManagement;
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;

// The Item Detail Page item template is documented at


/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name=”e”>Event data that describes how this page was reached.  The
/// Parameter property provides the initial item to be displayed.</param>
void ItemDetailPage::OnNavigatedTo(NavigationEventArgs^ e)
    auto item = safe_cast<SampleDataItem^>(e->Parameter);
    DefaultViewModel->Insert(“Group”, item->Group);
    DefaultViewModel->Insert(“Items”, item->Group->Items);
    flipView->SelectedItem = item;

The code isn’t that much different than .NET code for the skeleton and the new templates take much of the guess workout and make doing a C++ native app even for beginning programmers a doable thing.

One of the first things I noticed about C++ apps is that they are already nicely touch enabled and on the properties panel there are some new options..


To Be Continued…

Part two will continue our look at Blend for Visual Studio and what’s missing from Blend Ultimate and will look at Visual Studio 11 Integration and HTML 5/CSS 3 layout based applications for Windows 8..

Remembering Popfly


Wow so the market churns and changes, it seems like it was just last year, well actually it was 2007 when Microsoft started creating Silverlight based Web Mashup Applications under the banner of Microsoft Popfly. It lasted until 2009.


Since then web based work flows and mashup applications have become the norm..

Microsoft has since released other workflow mashup tools including the new Data Explorer CTP that lets you get information on “Big Data” and public data sources on the web.


The Microsoft Expression Blend Team launch BlendInsider

This is very cool, check this out.. The Blend Team just launched their new blog at


Videos Include XAML and HTML