Windows 8 Dev Camps and Hackathons

Well, it was so much fun the last time around, and since it was SRO in every Florida city we went to, Healy and I have decided to give it another go. This time, not one but TWO full days of camping and hacking fun. Orlando and Ft. Lauderdale, look out! Healy and I are coming to town.

Ft Lauderdale

Orlando

Don’t live in Florida? Here’s a link to all of ‘em across the country.

See you there!

— bliz (@SnowstormLife)

Windows 8 Dev Camp recordings

[7/9/2012 – updated with the remainder of the webcasts.]

If you can’t make it to one of the live Windows 8 Dev Camp webcasts, no worries. They’re being recorded and posted online for on-demand viewing. It takes a few days for the recording to be posted.

I’ll update this blog post as more recordings are added.

Note, to view the “Intro” webcast, just click on the gray “View Online” button and media player will open. No need to click on the orange “Register” button. The “Designing” page has the webcast embedded on the page itself and also makes it available via download for offline viewing. Hopefully we’ll be able to get the “Intro” webcast page updated to be like the “Designing” page.

Happy viewing.

–bliz (@snowstormlife)

Porting a simple Silverlight game loop to Windows 8 Metro style

Yesterday evening I went on the hunt for a XAML/C#-based example of a game loop. I ran into a couple of OLD blog posts by Mike Snow. Naturally it caught my eye, simply because of his last name.

In his posts he described game loop based on Silverlight 2. OK. Silverlight uses XAML, and the code was C#. XAML/C# are first-class citizens in the Windows 8 Metro style app world, so I figured, why not see what it takes to make this work on Windows 8?

The posts I used as reference:

The first post contains the code for the majority of the application – the XAML and the C# code. In second post Mike switches the game loop to use CompositionTarget.Rendering instead of DispatcherTimer or the Storyboard timer. Are they still around in the Metro XAML world?

To find out, I open Visual Studio and took a look in the Object Browser. Guess what I found.

Yep. DispatcherTimer, Storyboard, and CompositionTarget are all alive and well in the Windows.UI.XAML namespaces.

So I figured, why not give it a try?

It turned out that most of the “work” was simple copy & paste. I had to change the using statements to point to the Windows.UI.Xaml namespaces for the controls. Had to change the signature for a couple of the event handlers. And a few other minor things.

Here are the steps I took to make the port.

MainPage.xaml

  1. Create a new C# Metro style BlankApplication called Win8Snowflakes.
  2. Delete BlankPage.xaml then added a new UserControl named MainPage.xaml. (Yes, we’re adding a UserControl and naming it a page.)
  3. Replace the contents of MainPage.xaml with the XAML for the UserControl Snowflakes.Page (from the blog post “making it snow”). Then . . .
    1. Replace All UserControl with Page
    2. Change x:Class=”Snowflakes.Page” to x:Class=“Win8Snowflakes.MainPage” to match the name of the app & page.
    3. Remove the full screen Button. Just delete that entire tag. We won’t worry about going full screen.

MainPage.xaml.cs

  1. Replace the contents of MainPage.xaml.cs with the C# code sample for public partial class Page : UserControl (from the blog post “making it snow”). Then. . .
    1. In the using statements you’ll see some red squigglies. To get rid of them, change Controls, Documents, Media, Media.Animation, Input, and Shapes to reference Windows.UI.Xaml instead of System.Windows
    2. Add the following using statement:
      using Windows.UI.Xaml.Controls.Primitives;
    3. Change namespace Snowflakes to namespace Win8Snowflakes
    4. Change Page : UserControl to MainPage : Page
    5. The method prototypes for the event handlers for Slider_ValueChanged and Wind_ValueChanged need to be changed. You need to replace RoutedPropertyChangedEventArgs<double> with RangeBaseValueChangedEventArgs, such as from this:
      1. Wind_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) to this:
        private void Wind_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
    6. Remove the Button_Click method. (We’re not going to deal with changing the window size for now.)
    7. In the MainPage() constructor, we need to change the way the event handler is defined and the signature for the event handler.
      1. To wire up the event handler,
        _snowflakeTimer.Completed +=_snowflakeTimer_Completed;
      2. And the new signature for the event handler:
        void _snowflakeTimer_Completed(object sender, object e)

Snowflake.xaml

  1. Add a new UserControl to your project and name it Snowflake.xaml
  2. Replace the contents of Snowflake.xaml with the XAML for the Snowflakes.Snowflake (from the blog post “making it snow”). Then . . .
    1. Change x:Class=”Snowflakes.SnowFlake” to x:Class=”Win8Snowflakes.SnowFlake”

Snowflake.xaml.cs

  1. Replace the contents of Snowflake.xaml.cs with the C# code sample for public partial class Snowflake : UserControl (from the blog post “making it snow”). Then. . .
    1. Change the using statements just as we did in MainPage.xaml.cs to reference the Windows.UI.Xaml namespaces for Controls, Documents, Media, Media.Animation, Input, and Shapes
    2. Change namespace Snowflakes to namespace Win8Snowflakes

App.xaml.cs

  1. In the OnLaunched() method, change rootFrame.Navigate(typeof(BlankPage)); to rootFrame.Navigate(typeof(MainPage));

Images

  1. Download the zip file containing the two image files (one is for the background and the other for the snowflake) from Mike’s download link.
  2. Unzip the files and copy them to your project’s folder.
    1. Right click on the project and Add Existing Item, and select the two files, to add them to the project itself.
       image

Time to run the app. You should see this

image
The running app.

Congratulations.

One more change

It’s very easy to change the game loop to use the CompositionTarget.Rendering event instead of a Storyboard.

  1. In the MainPage() constructor for MainPage.xaml.cs
    1. Remove the following 3 lines:

      _snowflakeTimer.Duration = TimeSpan.FromMilliseconds(10);
      _snowflakeTimer.Completed +=_snowflakeTimer_Completed;
      _snowflakeTimer.Begin();

    2. And replace them with this one line:
      CompositionTarget.Rendering += CompositionTarget_Rendering;
    3. Change the signature for the event handler method itself
      1. from
        void _snowflakeTimer_Completed(object sender, object e)
      2. to
        void CompositionTarget_Rendering(object sender, object e)

And that’s it.

As you’ve probably heard over and over again, if you’re a Silverlight developer you have the skills to be a Windows 8 Metro style developer.

A great resource for developing Metro style apps on Windows 8 is http://dev.windows.com.

Happy Windows 8 developing!

–bliz (@snowstormlife)

Metro Accelerator Labs – Speeding Your App Development

Yesterday I blogged about the live webcast series on Windows 8 Metro style development that’s currently underway.

Today I want to make sure you’re aware that we have a Metro Accelerator Lab coming up at the end of May here in Tampa. Joe Healy and I are looking forward to seeing you there.

Oh, by the way, I “borrowed” Chris Bowen’s post on the Accelerator labs and inserted it below. (Thanks Chris!  : )

Do you have a Windows 8 or Windows Phone app idea?  Maybe you’re already working on an app and would like some guidance for getting it across the finish line?  Then come to one of the upcoming Metro Accelerator Labs

These are three-day opportunities to develop your app with experts on hand to help you with any questions:

MetroAcceleratorLabs

Please join us for a special event that you simply don’t want to miss – the Metro Accelerator Lab. This is your chance to dig deeper into Windows 8 and Windows Phone and gain all the knowledge you need to immediately start (or finish) building beautiful, fluid and immersive Metro style Windows and Windows Phone applications.

In this FREE, three-day developer event, you’ll get expert help building, testing and deploying your Metro style apps. Experience step-by-step advice from Microsoft and community experts and one-on-one technical assistance. Come for an hour, or all three days. Bring that app you’ve been tinkering with, or a new idea that you’re eager to build and we’ll help you get well on your way to releasing that killer app to the world.

We’ll also help you understand the steps needed to get your Windows 8 Metro style app into the Windows Store.

We’ll have Windows Slate and Windows Phone devices available on site so you can see exactly how your app will run. And of course, there’s always a chance we’ll have a few to give away during the course of the event.

Agenda (subject to change)

Day 1

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Designing Metro style: principles and personality”
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 5:00 – Wrap Up

Day 2

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Effective Metro Style Applications: User Experience (UX)” – To help you focus on making your Metro style apps great, we’ll review the essential features, design, and behavior of effective Metro style apps
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 5:00 – Wrap Up

Day 3

  • 8:30 – Arrival & Breakfast
  • 9:00 – Kickoff & Logistics
  • 9:15 – Session: “Effective Metro Style Applications: UX (continued), Store, Performance” – Part two of our dive into the essential features, design, and behavior of effective Metro style apps
  • 10:00 – Hackathon, expert one-on-one guidance, lightning talks on demand, and plenty of sustenance, snacks & caffeine
  • 3:00 – “appX” – Your chance to show off your app and win prizes!
  • 4:30 – Wrap Up & Giveaways

Seating is limited and registration is not guaranteed. Secure your spot today!

Prerequisites

You must bring a laptop/notebook computer.  To develop Windows 8 Metro style apps, please install the Windows 8 Consumer Preview and Visual Studio 11 Express for Windows 8.  To develop for Windows Phone, install the Windows Phone SDK.

The focus is on your app, and while this isn’t a day of training (like our Windows Developer Camps), we will have a brief session every morning to give you ideas that you can turn into reality as you code.

Here in the eastern US, there are four Metro Accelerator Labs on the way:

Date Location  
May 30 – June 1 Tampa, FL Register
June 5-7 Alpharetta, GA Register
June 6-8 Waltham, MA Register
June 11 & 12 Orlando, FL
(at TechEd)
Open to all TechEd Attendees – just drop in!

So register today, bring your PCs and apps/ideas, and get ready to accelerate!

And as always, if you wasn’t to dig into Windows 8 Development, here are a couple of places to go first:

Can’t make it to a Windows 8 Dev Camp?

. . . But wish you could?

You’re in luck! Microsoft is going to be delivering the content via webcasts, beginning TODAY (May 14) at 11:30 AM Eastern. Too late for today’s session.

[UPDATE: Webcast recordings are being made available. Please see http://jimblizzard.wordpress.com/2012/05/21/windows-8-dev-camp-recordings/ for details and links. — bliz]

Here is the session list via Jamie. Good lunchtime feasting! (for Eastern Time Zone anyway)

And here it is, for your convenience. . .

Monday May 14th, 2012  8:30 AM PST
Introduction to the Windows 8 platform and the Windows store
Jennifer Marsman
Windows 8 is Windows re-imagined!  Join this session to learn about the new platform for building Metro-style applications.  Get an understanding of the platform design tenets, the programming language choices, and the integration points with the operating system and across Metro-style apps.  We will also discuss the enormous opportunity for developers to make crazy money with the Windows Store.  You will walk away with the resources to begin writing Metro applications for Windows 8.

Since that session is already history, here are a couple of links to information about the Windows 8 platform and store:

Wednesday, May 16th, 2012    8:30 AM PST
Designing apps with Metro style principles and the Windows personality
Chris Bernard
Metro style design has a set of five guiding principles to help you make the best choices when designing your app. These principles are the foundation for building great Metro style apps. Consider these principles as you plan your app, and always ensure your design and development choices live up to these principles.

Monday, May 21, 2012    8:30 AM PST
Building Metro style apps with XAML: What .NET developers need to know
John Wiese

If you are experienced with .NET or Silverlight and are already familiar with XAML, this session will teach you everything you need to know to create a Metro style app for Windows 8. This session will cover updates to familiar features and explore concepts that are new for Windows 8. We’ll talk about building reusable Windows Runtime Components in C#, Async programming in Windows 8 and both the Visual Studio and Expression designers. This session will show you how to turn your XAML skills into money-making Metro style apps.

Wednesday May 23, 2012    8:30 AM PST
What HTML developers need to know about coding Windows 8 Metro style apps
Michael Palermo
This session is perfect for any web developer wanting to leverage his/her skillset to develop Windows 8 Metro style apps. The session begins by proving how much web developers already know about building apps for Windows 8. The focus then turns to how to write JavaScript code with WinJS. Key points for Metro style app development will be highlighted by implementing popular feature requests using HTML5, CSS3, and JavaScript.

Thursday, May 31, 2012    8:30 AM PST
Win as One: How Contracts in Windows 8 Help You Build a Killer Metro App
G. Andrew Duthie
Contracts are agreements between Windows and your Metro style app that allow you to integrate Windows 8 features into your app. For example, Windows 8 lets users share content from one application to another by using the Share contract.

In this session, you’ll learn how contracts work and how to implement the built-in contracts such as Search, Share, Settings, and More. With Contracts, you can help users get more out of your app, and in a way that is consistent and intuitive, and they will reward you by coming back to your app again and again.

Monday, June 4th, 2012     8:30 AM PST
Bring Your Windows 8 Metro Style Apps to Life with Tiles and Notifications
Chris Bowen

Tiles and Notifications are important ways to draw attention to your app and improve your users’ experiences.  Tiles can draw users back into your app when your tile comes to life on Start screen.  They can also let users personalize their Start screen by creating deep links to specific places within your app.  Notifications, delivered through the Windows Push Notification Service, can inform and draw your users back into your app even when it’s not running.
In this session, you will learn how to effectively implement Tiles and Notifications to help your apps shine.

Wednesday, June 6th, 2012    8:30:00 AM PST
Building Windows 8 Metro style casual games using HTML 5
David Isbitski

The intent of this session is to help HTML5/JavaScript developers with writing their first Metro Style App in a fun, immersive way. We will cover the basics of HTML5 Canvas gaming and how we can easily bring it to Windows 8.  We will then add additional game functionality as we introduce HTML5 Audio,  CSS3 styling and web fonts, implementing a game loop with JavaScript, 3rd party frameworks, touch, camera, accelerometer, and WinJS controls.

Developer, do your Windows 8 Metro style tiles look like this?

Have all the Metro style apps and samples that you’ve created all gotten a disease of little X’s in the lower right corner of every tile, like an outbreak of the chicken pox?

What the …?

image

And if you try to launch one of the apps you created, do you see this screen?

image
“Store     Your developer license has expired. To continue to use this app, please renew your license.”

So how do you renew your license?

All you need to do is open Visual Studio 11 Beta and run a Windows Metro style project. Any Windows Metro style project will do, including a Blank Application. Just open it (or create it) and run it.

Visual Studio will then prompt you to update your developer license

image

Then you’ll need to click “Yes” on the next screen that pops up, and you’ll be prompted for your Microsoft ID credentials. Then voila! Your developer license will be reset and you’ll be able to run your apps you created.  (Note that you don’t have to recompile all your apps.)

image

Happy Windows 8 Metro style app developing!

[Update: If this action didn’t work for you, take a look at this forum post and this Dev Center article. If none of this works for you, reply to the forum post and let them know you’re having issues renewing the license.]

— bliz (@snowstormlife)

World-class Windows 8 Metro style apps wanted

Do you have what it takes to create a world-class Metro style app? Would you like to have your app available in the Windows store on “Day 0”?

If you do and you live in Florida, shoot an email to me (jim.blizzard@microsoft.com) or Joe Healy (jhealy@microsoft.com). If you don’t live in Florida and don’t know your local evangelist, send an e-mail to win8aefb@microsoft.com to find out who it is.

Currently you have to have a “token” to register your app in the store. So how do you get a token? You’ll need to attend an App Excellence lab.

Here are some of the details from Jamie Rodriguez’s blog post (click this link to read the full post)

Follow these steps to get invited to an App Excellence lab:

  1. Create a really great Windows 8 Metro style app (or game) immediately. Get it as ready as if you were submitting to the store.
  2. If you know your local DPE evangelists (maybe because you attended a Windows camp training), get in touch with them and ask them to nominate your app for a lab. [In Florida, that would be me, I’m a Windows 8 Champ (jim.blizzard@microsoft.com), or Joe Healy (jhealy@microsoft.com) your Developer Evangelist here in Florida.]
  3. If you don’t know your local evangelist, then email the following information to win8aefb@microsoft.com:
    1. Your name
    2. City & country where you are located
    3. Brief description for your app (no binary, screenshot is optional, but only send if the screenshot is public, non-confidential stuff )
    4. Your pledge that you’ve spent at least 8 hours devouring all the great UX guidelines we have at the design section in the Windows Dev Center1
    5. Wait for our response letting you know where the closest app excellence lab will be and how to get in touch with the right evangelist to nominate you.

Of course, coming to the lab is not all you have to do. Read Jamie’s full post for more info.

How do you get started writing Windows 8 Metro style apps? First stop is http://dev.windows.com. Second stop is dfwiki.devfish.net.

So there you go. Build those apps! Happy Windows 8 Metro style coding!

–bliz (@snowstormlife)

Simple camera capture in Window 8 Metro style application

During one of my sessions from the Windows 8 Developer Camp I talked about how easy it is for current .NET developers to write Windows 8 Metro style apps. One slide in particular showed how easy it is to interact with devices, etc., through the Windows Runtime in Windows 8 as compared to how difficult it can be when talking to the Win32 API in a traditional desktop application.

Here’s the code from the slide:

using Windows.Media.Capture;


var ui = new CameraCaptureUI();
ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);

 

if (file != null)
{
var bitmap = new BitmapImage();

bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read));

Photo.Source = bitmap;
}

As you can see, it’s very simple code. And you’ll only need to do a couple things to get it to run properly.

  1. First, create a new Blank Metro style C# application. It’s the simplest way to try out stuff like this. Paste the code into the BlankPage.xaml.cs file, in the OnNavigatedTo() method. Move the using statement to the top of the file.
  2. Since we’re using the await keyword, we have to indicate that the OnNavigatedTo() method is an async method by changing its signature to “protected async override void OnNavigatedTo(NavigationEventArgs e)
  3. Add a couple more using statements to take care of the BitmapImage and FileAccessMode, as follows:
    using Windows.UI.Xaml.Media.Imaging;  // for BitmapImage
    using Windows.Storage;                // for FileAccessMode
  4. In Solution Explorer, open the Package.appxmanifest file and in the designer click on the Capabilities tab. Check the Webcam checkbox to indicate that your app needs to capture snapshots and movies from the connected webcams.
    image
  5. There’s one more thing to do: Open the BlankPage.xaml file and add an <image> tag. This is where we put the captured image. Notice we give the image the x:Name of “Photo”. We set its source in the C# code with the Photo.Source =  statement (shown above).

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
    <Image x:Name="Photo" Width="700" Height="700" />
</Grid>

Once you’ve done that, you’re ready to run your app. And here’s what that looks like.

The first time you run it, the user will be prompted – do you want to allow the program to use your webcam? image

Using the webcam to take the picture
image

Cropping the image (notice it keeps the 4×3 aspect ratio that we specified in the code)image

And once you click OK, you’re returned back to the main page of the appimage

That’s it. Pretty simple, eh?

To keep up with all the stuff that’s going on with Windows 8, one of your best resources is http://dev.windows.com.

-bliz (@snowstormlife)