Jeff Burtoft,  an HTML5 technical evangelist with Microsoft, joins us this week to talk about the flexibility and cross-platform power of HTML5 in the context of Windows Phone. The in-depth example that we cover in the video is a project called YetiBowl, and standards compliant HTML5 game that runs flawlessly on the web, as a Windows 8 app and as a Windows Phone 8 app.

Make sure you check out Jeff's 4 part series on creating the HTML5 Yeti game you see in this episode.

Yeti Bowl Part 1, Part 2, Part 3, Part 4

What makes all this possible is Internet Explorer 10 on Windows Phone 8. IE10 for the phone and the PC are built on the same engine and use the same renderer which means that what you see on your desktop (or tablet) is what you'll see on your phone. Additionally, the web browser control in Windows Phone apps is a full instance of IE10, with the same speed and power as the native phone browser.

There are lots of great libraries and products that make developing for Windows Phone 8 in HTML5 a blast.

• PhoneGap - PhoneGap is for building cross-platform apps using HTML5. They support Windows Phone 8 with a great Visual Studio template to get started in no time. And don't miss our PhoneGap porting challenge with great opportunities prizes available for PhoneGap developers.  
• Atari Arcade - Great HTML5 games that re-imagine the some of the classic Atari games. Get the source code and get coding!
• Internet Explorer Test Drive - great examples of what is possible using IE 10.
• CreateJS - A great library for building rich experiences in HTML5 that work beautifully on Windows Phone.
• ProcessingJS for Windows and Windows Phone - The ProcessingJS library uses HTML5 canvas to create digital art, simple games and visualizations. We have a full curriculum on creative coding including sample projects and full-featured apps.
• Construct 2 - HTML5 based game creator focused on building beautiful 2D HTML5 games. Support for both Windows Phone 8 and Windows Store apps.
• YoYo GameMaker - Cross-platform HTML5 game development with support for Windows Phone 8 and Windows 8.

<TextBox Text="{Binding SampleUserName, Mode=TwoWay}" />

So let's build our first data binding. By a happy coincidence, this can also be our first ViewModel from scratch.

I use Visual Studio snippets in the video and in "real life" because it's substantially faster and I have a very poor memory. You can download the notify property snippets I used here. Just extract them into your "Documents\Visual Studio 2012\Code Snippets\Visual C#\My Code Snippets" folder and you should be ready to go.

As a "first steps" post, we're going to go through how to build a data binding step by step. To see this model in action, just open up a new

My First Data Binding

In our app, lets create a new ViewModel. I right-clicked in the ViewModel folder and went to "App -> Class..." and created just an empty Class file named "SampleViewModel.cs". This class now looks like this:

class SampleViewModel
{
}

We update it to implement the INotifyPropertyChanged event by declaring that interface and using the "notifyInterface" snippet. Hit Alt-Shift-F10 to resolve any refrerences (specifically the System.ComponentModel) and our code should now look like this:

public class SampleViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void NotifyPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }     
}

Now we can just start creating properties we want to see reflected in our UI. Using our "notifyProp" snippet, we can quickly create a property like the string SampleUserName.

private string _sampleUserName = "";
public string SampleUserName
{
    get { return _sampleUserName; }
    set
    {
        _sampleUserName = value;
        NotifyPropertyChanged("SampleUserName");
    }
}

Now our property is ready to be bound to our XAML.

Define Your Data Context

This part can be skipped for brevity, but I wanted to add it to make sure that there is a complete and comprehensive solution here.

Before our XAML can bind to this property, we need to make the ViewModel visible to our XAML. So we will declare our ViewModel as a static object in our App.xaml.cs

private static SampleViewModel _sampleVM { get; set; }
public static SampleViewModel SampleVM
{
    get{
        if (_sampleVM == null)
            _sampleVM = new SampleViewModel();
        return _sampleVM;
    }
}

Then we can set the data context when our XAML view initializes. In the MyView.xaml.cs (also called the "code behind), we can add to the constructor:

public MyView()
{
    InitializeComponent();
    this.DataContext = App.SampleVM;
}

This way we could have the same ViewModel driving multiple Views. This is particularly valuable for a Master-Detail scenario in which we have one View dedicated to showing a list of items and another View for editing or looking at an item detail. With this method, we can maintain a single ViewModel and simply update which item has been selected.

XAML Binding

With our viewmodel defined and our notify properties set up, all we need to do is bind to our XAML UI control. Then any updates we make to our property back in the ViewModel will automatically update in the XAML UI.

<TextBox Text="{Binding SampleUserName}" />

And if we wanted changes to the UI to be updated back in our ViewModel, we just set our binding to "TwoWay"

<TextBox Text="{Binding SampleUserName, Mode=TwoWay}" />

Binding, Sample Data, and Design

In addition to helping us build manageable code with a simple model for XAML UI updates, binding allows us to build our app interfaces in a way that is fast and powerful. Instead of run-view-tweak, run-view-tweak, we can explore design options and do most of our design right inside our tooling without running the application. In fact, if you follow the steps here, you can actually build much of the interaction and XAML of an application up before you start building the logic. The result is the opportunity for a workflow that supports design-driven user-focused application creation.

For this, we're going to move away from our SimpleViewModel with its single property and into a real-world example that
focuses on binding with real-world data. To follow along in this example, download this slightly modified version of the LongListSelector Infinite Scroll example for Windows Phone.

Because we're working with sample data, we want to open the project in Blend.

1. Open up the MainPage.xaml file and go to the Data tab at the top right corner.
2. Select the project data store and click on the "Create sample data -> Create Sample Data From Class" button.

 You'll get a dialog box that allows you to name your data source and select a class from which Blend will generate the data.

Blend will do a "best guess" on what data is in there based on the data types. String will default to lorem ipsum sample text, and int will generate a number, an ObservableCollection will result in a generated list of sample objects. All this data will be saved as a XAML resource file in the SampleData folder. To create bindings for these objects, all we would have to do is drag the object from our Data tab to an control in our "Objects and Timeline" tab.

We could go into this file and edit the data to be something that is a little more realistic for our application. In fact, this is exactly what I've done. For this Twitter app, I added some actual tweets from my timeline as sample data. To see this click on the eye icon next to the "resultListBox".

And now we can see the sample data and how it will look in the application.

Here is where it gets really fun: Right-click on the resultListBox and select "Edit Additional Templates -> Edit ItemTemplate -> Edit Current".

This will take you to a XAML DataTemplate where we can define, in real time and against real data, how we want our items to be displayed. We could give our tweet text a height limit and tell it to use ellipses and see that reflected instantly in our design.

<TextBlock Text="{Binding Tweet}" 
   MaxHeight="40"
   TextTrimming="WordEllipsis" />

As you can see, this is an incredibly powerful way to design and build applications for Windows Phone and it is all made possible by DataBinding.

Here are links to some of the resources we discussed:

• Matthias's blog post that highlights some awesome Windows Phone samples, and where to get them
• The Windows Phone Dev Center samples page – the complete list of samples created by the Windows Phone developer content team, by developers for developers
• The Lens sample (check out Lenses for Windows Phone 8 for an overview and walkthrough of how to build your Lens app)
• The photo extensibility sample (see Photo extensibility for Windows Phone for more info about how to use the sample and how to create your app)
• The Twitter search infinite scrolling sample using the LongListSelector control in Windows Phone (check out the topic on how to display data in a grouped list using LLS)
• The People Hub LongListSelector sample, with jump lists (be sure to see the topic on how to display data in a grouped list using LLS for info about using LLS for this sample, too)
• A speech recognition sample that covers using a custom grammar (see Voice commands for Windows Phone 8 for more info about how to use this feature in your app)

Please let us know any questions you may have, or feedback.

 Tweet to @LarryALieberman or @matthiasshap

Today we talked to Clint Rutkas, the creator of this toolkit, about some of the thinking behind it, and some of the cool things you can do with it.

Here are some links to related information we discussed:

• Coding 4 Fun on CodePlex
• Clint Rutkas' page on Channel 9
• Windows Phone Development for Absolute Beginners
• Portable HttpClient for Windows Phone, (in beta)
• Windows Phone Toolkit on CodePlex
• Info on using transitions from the toolkit, (from the Code Project)

Questions:

Tweet to @LarryALieberman

Find out more about the Moga controller at http://www.mogaanywhere.com/.

Questions?

Tweet to @LarryALieberman

I spoke with Microsoft Technical Evangelist Vlad Kolesnikov about how developers can get started right now building games for both Windows and Windows Phone using the Unity game developer ecosystem tools.

We first took a look at the first game in the Windows Phone store built using the Unity tools: Drift Mania Championship, (available here), and then dove right into using the tools to build a basic game.

Look for more information about all of our GDC 2013 announcements in our Official Developer Blog.

Questions?

Tweet to @LarryALieberman

Kami LeMonds, from the Windows Phone Apps Merchandising team joined us today to discuss the criteria used in assessing application quality.

For more detail, see Kami's blog post from this week: How to get your app promoted in the Windows Phone Store.

Questions?

Tweet to @LarryALieberman

Here are a few links to some of the resources we mentioned during the course of the conversation:

• MSDN library documentation on Building Lens apps for Windows Phone.
• Eric's BUILD talk on Building Lens Apps.
• Lens Design Guidelines on MSDN
• Lens Code Sample on the MSDN Code Gallery

Questions?

Tweet to @LarryALieberman

Previously, Peter Torr joined us to talk about exactly _what_ Windows Phone 8 is, and why it was such an enormous shift from an architectural perspective, but I realized that we didn't really get a chance to talk about the new developer features. 

Here are some links to related information:

1. Introduction to Windows Phone 8, and its new end user features, (Meet Windows Phone 8)
2. Implementing the new WP8 live tiles in your applications, and the new tile templates, (in MSDN Library, and at BUILD)
3. Lock screen notifications and wallpaper provider, (in the MSDN Library, also see the live tiles session at BUILD in line 2)
4. Building a Lens application (and Funny Faces), (in the MSDN Library, and at BUILD; Rene Schulte's Funny Faces application in the Windows Phone Store)
5. More info on Kid's Corner
6. Data Sense APIs, (in MSDN)
7. Wallet Hub, (in MSDN Library and at BUILD)
8. Custom protocols & file associations, (in MSDN Library and at BUILD)
9. Kevin Gallo's release of the SDK at BUILD 2012
10. Windows Phone's sessions at BUILD 2012
11. Windows Phone Toolkit on Codeplex
12. Using the new Maps control, (in the MSDN Library and at BUILD)
13. Using background execution in your mapping apps, (in the MSDN Library, and at BUILD).
14. Fast Resume, (in the MSDN Library)
15. Information about application compatibility in WP8, (in the MSDN Library)
16. Page on What's New in WP8 for Developers
17. Azure Mobile Services for Windows Phone, (and session from BUILD)
18. Windows Phone Dev Center
19. Code Samples on the Windows Phone Dev Center, (official)
20. Windows Phone Developer Blog

A critical new developer capability in WP8 we did not talk about in this session was support for native C++ application development. Here are a couple of sessions from BUILD 2012 where we really got into this:

• Sam George on Native C/C++ Game Development in WP8, (at BUILD)
• Peter Torr on Using C++ in your Applications on WP8, (at BUILD)

Questions?

Tweet to @LarryALieberman

Bernardo took us through the basics of In-app purchase on Windows Phone.

Here are some additional resources for you, with regard to some of the topics we discussed today:

• The launch of Windows Phone 8, that took place on 10/29
• Windows Phone at the BUILD keynote, from 10/29
• The Windows Phone sessions at BUILD, all available for on demand viewing
• Download the new Windows Phone 8 SDK

... and here are some more resources specifically about IAP on Windows Phone...

• IAP in the Windows Phone official documentation
• Mock IAP Library, required for testing IAP
• How to leverage IAP in Windows Phone 7 applications, (that becomes available when those apps run on WP8)
• IAP session from BUILD 2012

Questions?

Tweet to @LarryALieberman

Program Manager Peter Torr ran API review for Windows Phone 8, and he has the answers.

Peter and I spent some time today talking about:

• Exactly what Windows Phone 8 actually is;
• How it puts Windows and Windows Phone on the same 'shared core'
• How we focused on driving application compatibility for all existing Windows Phone applications
• What new programming approaches are now available
• What this means for you, the developer

For more in depth information, see our keynote and sessions from the BUILD event!

Native C++ programming enables:

• Writing of high performing games for the phone using D3D
• Sharing of a tremendous amount of code across Windows 8 and Windows Phone 8 in game development
• Easy porting of games from other platforms to Windows and Windows Phone using common C++ class libraries
• Using middleware engines such as Havok and Unity, to make it easier than ever to bring games to Windows and Windows Phone

For more info on Live Tile implementation in Windows Phone, check out the additional following resources:

• Live Tiles(official developer documentation)
• Live Tiles, discussed in the online WP8 Jump Start videos
• Live Tiles session from BUILD 2012, featuring PM Thomas Fennel (recommended!)
• Tile Design Guidelines (official design guides)

Download the code sample for this video here.

Jon's made a lot of observations about the thousands of apps we see submitted to Windows Phone and had a lot of great points to share about what constitutes an outstanding app.

Here are a lot of other great resources to look through as you think about Windows Phone application design:

Windows Phone Official User Experience Guidelines

Jeff Wilcox's "Metro" Design Guide for Developers

Windows Phone Design Presentations

• 2010 Design Day Event
• Metro Style Design
• Designing Apps   
• App Design Best Practices  
• Prototyping in Blend  

Windows Phone Design Assets

• PSD Templates   
• PNG Grid (Useful in Blend) 
• SDK (contains Blend and icons – see prototyping video above)
• Windows Phone Tool Kit (contains extra controls for prototyping)

... and finally, a great piece by Will Faught on how to use the animated transitions in the Toolkit.

Questions?

Tweet to @LarryALieberman

We thought we'd talk to Dev Center Program Manager Ash Wahi, to get the full scoop on what's new and different on the Dev Center.

For more information, check out What's New in the Dev Center.

As always, please let us know if you have any questions!

Larry Lieberman, @larryalieberman

Nikola walked us through his app, and talked a bit about how he implemented various aspects of the app. He describes himself as 'obsessed with performance,' and had a few very interesting practices to share in that regard.

Per our usual practices, here are some relevant and interesting links:

Fantasia Painter in the Windows Phone Marketplace, (Free and Paid)

Performance Considerations for Windows Phone Developers in the MSDN Library

Mike Battista's recent posts on WP app optimization:

     Optimize Startup Time

     Reduce Memory Usage

     Responding to User Input

Pratap Lakshman's recent posts on using the WP Profiler

     Memory Profiling for Application Performance

     Memory Profiling - Launching, Graphs and Markers

     Memory Profiling - The Heap Summary View

Let us know if you have any questions

Larry Lieberman, @larryalieberman

Brandon is 1/4 of the independent company Four Bros Studio LLC. The Furtwangler clan has recently received quite a bit of press attention, (Business Insider,  WM Power User, Mobility Digest), due to the success they've had with using the Microsoft Ad control in their Windows Phone App.

We came to the conclusion it would make a lot of sense to talk to them about how they did it, and they graciously agreed.

Here are some more relevant links for your enjoyment:

     Taptitude on the Windows Phone Marketplace

     Taptitude fan generated Taptitude Wiki

     Follow the Four Bros on Twitter, @FourBrosStudio

And the here are the Four Bros themselves:

Steve:

Brandon:

Nathan:

Tyler:

Please let us know if you have any questions
Larry Lieberman, @larryalieberman

Here are some links to related information.

Rowi on the Windows Phone Marketplace; Rowi Lite on Marketplace

The Silverlight Toolkit for Windows Phone on Codeplex

Information about the Listbox performance enhancements in Windows Phone 7.5

Cert requirement (2.7.1) about using Location and having a Privacy Policy

Information about best practices when virtualizing list boxes in Silverlight for Windows Phone

Coding 4 Fun Toolkit for Windows Phone

TweetSharp Twitter API library for C#

Using push notifications in your Windows Phone application

User Voice for customer feedback

As always, let us know your feedback.

Larry Lieberman@larryalieberman 

Here are links to some of the things we talked about:

Pubcenter, where you set up your account

Official documentation for using the Ad Control in Windows Phone applications, in the MSDN Library

Sample code for using the Ad Control, from the MSDN Library

Latest version of the Ad SDK, on MS.COM downloads

Article on details about using the Ad Control from MSDN Magazine, written by some of our engineers.

Case study of MS Ad Control vs. Others

Questions?  @larryalieberman

Jason Short knows a lot about building phone applications that consume data. I got a chance to talk to Jason about this in detail a couple of weeks ago, and in all the rush around our refresh release, had to postpone posting it until now.

Extra special extra Inside Windows Phone this week, folks. We took time to speak with Software Developer Jason Short about his experience building applications for Windows Phone. 

• Jason's talk at XAPFEST
• Wade Wegner's C9 Show on Azure, Cloud Cover
• AgFX on Codeplex
• Shawn Burke's weblog, (primary on AgFX)
• The Jeff Wilcox's weblog
• Information about using a background agent conditionally based on WiFi or being plugged in; see information about Resource-intensive agents on this page in the MSDN Library
• Find your champ app, on CodePlex and in the Windows Phone Marketplace

Any questions? @larryalieberman

And what does it mean? Tremendous new opportunities!

Given these changes, we felt you would like more information about exactly what we did to accomplish this, and what YOU can do in order maximize the impact of your applications on these new devices.

Here are some more links to relevant additional materials on this release:

• Joe Belfiore on the Windows Phone Developer Blog, about "Getting ready for 60% more customers"
• Mike Battista on the Windows Phone Developer Blog, about "Optimizing Apps for Lower Cost Devices"
• Download the CTP of the new update to the Windows Phone SDK, (7.1.1), on the MS.COM download center.
• Pratap Lakshman on the Windows Phone Developer Blog about "Memory Profiling for Application Performance"
• Our official Windows Phone Developer Documentation on "What's New in the Windows Phone SDK 7.1.1 Update CTP"
• Windows Phone Application Certification Requirements: http://wpdev.ms/certreq
• The new Nokia Lumia 610, on Nokia's web site.

If you have any questions, let me know!

@larryalieberman

We didn't get the chance to talk very long, so really you should consider our talk merely an introduction for Carlo's presentations that he's delivered:

Carlo at XAPFEST on "Create & Submit a WP App to the Marketplace in 30 Minutes" (starts at Time Index 8:48)

Carlo at XAPFEST on "Making Money with Free Apps" (starts at Time Index 00:38)

Here are some other relevant materials we discussed, for your viewing pleasure:

 Our talk with "the" Jeff Wilcox, last October.

 Jeff Wilcox on WP Central podcast, just last week.

 Carlo's website, Wicked Wolf Apps

 Carlo's apps in the Windows Phone Marketplace

 Carlo on Twitter: @therivera

As always, if you have any questions, don't hesitate to contact me: @larryalieberman

JC's been hard at work putting together some useful new resources for Windows Phone developers, such as our Partner page on the App Hub, (available at http://create.msdn.com/en-us/resources/partners). He also works very closely with each of partners to ensure they're about to bring you the most compelling middle tier solutions possible.

One of JC's partners is a company called Telerik, that produces a series of third party controls for Windows Phone that can radically accelerate your development cycles. JC recently sat down with one of their developers and we've got that chat recorded here for you as well.

Here are some some relevant links:

• Windows Phone Partner Page: http://create.msdn.com/en-us/resources/partners
• Telerik RadControls for Windows: http://www.telerik.com/products/windows-phone.aspx
• Telerik Example app for Windows Phone
• Telerik Tasks app for Windows Phone

As always, please feel free to contact us on Twitter: @wp7dev. Include the hashtag #wpdevecosystem  if you have a resource to recommend!