Remarks by Scott Guthrie, Corporate Vice President, .NET Developer Platform, and Joe Belfiore, Corporate Vice President, Windows Phone Program Management.
Las Vegas, Nevada
March 15, 2010
ANNOUNCER: Ladies and gentlemen, please welcome, Scott Guthrie. (Music, applause.)
SCOTT GUTHRIE: Good morning, and welcome to MIX. This is the fifth year that we’ve held our MIX event, and I think it’s going to be the most important MIX yet.
Technology has evolved a lot over the last five years, but one thing that hasn’t changed is the importance of user experience and the Web. It’s more important than ever. Tomorrow, we’re going to be talking about IE 9, ASP.NET, and services-based Web development. Today, I’m going to be talking about Silverlight. Silverlight across the media, RIA, and on the phone.
We shipped the first version of Silverlight a little over two years ago and we’re seeing it being used in a wide variety of pretty interesting and very diverse scenarios. Here’s just a sampling of a few of the sites that have gone live over the last three months. It’s being used for sporting events like Major League Soccer, the Winter Olympics, Sunday Night Football, and later this week, March Madness. It’s being used for other events like the Victoria’s Secret Fashion Show and the Ultimate Fighting Championship, doesn’t get much different than that.
It’s being used for digital marketing by companies like McDonald’s. It’s powering next generation user experiences like the Bing maps that you just saw, and later this year, you’re going to see Felix Baumgartner is going to drop from 23 miles up in space and do a freefall for six minutes, breaking the sound barrier with just his body, and our friends at Red Bull Stratus are going to be telecasting this live on the Web with smooth streaming in Silverlight, and we really hope it goes well for him. (Laughter.)
In addition to consumer apps, we’re seeing Silverlight being used more and more for business applications. Here’s just a sampling of some of the large enterprise customers that are already using Silverlight within their — for their applications. And as more and more Silverlight applications go live and as more sites adopt it, we’re seeing our Silverlight deployment continue to accelerate.
At the PDC last November, we announced that Silverlight was installed on 45 percent of all Internet-connected devices in the world. Today, that number is now approaching 60 percent and accelerating rapidly. (Applause.)
Silverlight delivers the highest quality video on the Web. Last month, Silverlight powered the Winter Olympics and provided some of the most engaging online viewing experiences of the games. More than ten broadcasters around the world used Silverlight for both live and on-demand video of the games, and what I’d like to do is show a quick video that shows kind of behind the scenes how three of them did it and build the solution that provided it.
(Winter Olympics Video Segment.)
SCOTT GUTHRIE: The technology that powered the Olympics is really state of the art from a media perspective. And I’m pleased today to be able to announce that all the code behind the player, the rough cut editor, as well as all the added injection that you just saw is being open sourced and is now available for anyone to download and use to build their own immersive media experiences. (Applause.)
With Silverlight 4, we’re taking media capabilities to the next level. We’re adding features like Webcam and microphone support, multi-cast streaming, full output protection, as well as offline DRM, and all these features shipped last fall in the beta. This week, you’ll hear about more features that we’re adding in our media stack. One of them that I particularly like is this one I’m going to talk about right now. How many people here two screens or more on their computers? A lot of people. How many times have you ever wanted to watch a nice HD stream in full screen on one screen and work in the other? Yeah. Well, now you can. The final version of Silverlight will support that. (Applause.) It’s the first and only Web technology that allows you to do that.
Silverlight enables even better business application scenarios as well, and with the Silverlight 4 beta that we shipped in the fall, we introduced a ton of new capabilities and features to do that. This included new features for line-of-business applications like printing support, drag/drop, programmatic clipboard access and a bunch more. We also added a new feature we call WCF RIA Services that makes it much easier for you to retrieve, manipulate, and save back data to a server.
We also with Silverlight 4 are enabling much richer out-of-browser applications, including trusted applications that allow you to reach outside the sandbox and build much richer experiences. And since the beta last fall, we’ve continued to add and refine the feature set based on your feedback and you’re going to learn a lot more about new features that we’re adding this week during the breakout sessions.
One of the features I’m particularly excited about, though, is a capability we call Pivot. It’s a way that you can work and visualize large data sets of data in a very easy way. This is great for both business and consumer applications, and the great thing is we’re going to basically ship a control with Silverlight 4 that allows you to easily take this type of capability and embed it within your application. And I’ll show a quick video of what this enables, or show a quick sample of what this enables, I’m going to show a quick video here that highlights it.
(Pivot Video Segment.)
SCOTT GUTHRIE: Cool. (Applause.) As I mentioned, there’s both controls as well as tools that allow you to take large sets of images, put together those collections, and again, enable those within any application you build in a really easy way.
So having great tools we think makes it easier to build great applications, and later this year you’re going to see us ship a bunch of great tools that enable you to do that.
With VS 2010, we’re adding full Silverlight support, this includes WYSIWYG design surface for Silverlight, full XAML intellisense, as well as data binding, layout, and style management. We’re also integrating WCF RIA services, so you can easily connect to your data within your server and bind your UI against it.
This week, we’re also excited to be able to give you a first look at Expression Blend 4, which provides a whole bunch of new capabilities, including great support for Silverlight 4. I’m also happy to announce that we’re going to make a free upgrade for Expression Blend 4, so that if you already have Expression Blend 3, you can get it for free, and you’re going to see a lot more demos and capabilities this week. (Applause.)
So we really think the combination of Silverlight 4, Visual Studio 2010, and Expression Blend 4 really provide kind of an end-to-end experience that allows you to build great business applications. And what I’d like to do is invite a partner on stage to actually show off how they’re using Silverlight and adopting Silverlight to build a really great solution. And so I’m excited to announce that eBay is using Silverlight and to invite Raji and Dave on stage to actually talk about it and show it off. So, thanks a bunch. (Music.)
RAJI ARASU: Thank you, Scott.
DAVE WOLF: Thanks, Scott.
RAJI ARASU: Good morning, everyone. It’s great to be here with you all and experience the collective energy of the design and development community here. How many of you have ever listed an item on eBay? Quite a few. We at eBay are always in search of intuitive customers experiences for a diverse set of sellers, that’s why we build a snappy tool called Simple Lister that helps people like you and the millions of sellers that we have on eBay to list an item.
We leverage the power of Silverlight and specifically the out-of-browser capabilities of Silverlight to build this application. What that provided us is a rich integration with the desktop and a cross-platform application that helps a diverse set of sellers. We are really excited about taking this application out to our sellers and see how they respond to this.
So let’s get started. Dave, are you ready?
DAVE WOLF: I’m ready.
RAJI ARASU: Let’s start with the install experience. It was important that this be as simple as possible. You just heard Scott say that Silverlight is the broadest-deployed technology. So, we could get this experience to our users without an additional install. We’re going to take a popular book like the ASP.NET and walk you through the selling experience.
You can do this multiple ways in the Simple Lister. You can type the name of the book and the text, and we find all the matching products. Let’s say you did not find the product. In that case, you can click on categories and we have optimized this experience to bring just the relevant set of categories for your item.
Let’s make this even easier. Thanks to Silverlight, we’re able to bring in the Webcam integration. It’s as simple as clicking the picture of your bar code and we bring the product from our catalog. (Applause.)
Dave do we have the right book?
DAVE WOLF: Looks like the right book to me.
RAJI ARASU: Now that we have the right book, you have to fill in the item’s condition, and you can see we have pre-filled most of the information through this flow with our catalog information. We have even taken you to a 99-cent auction, these are fairly popular on eBay, and we’ve pre-filled the description with a catalog information. It keeps you one click away from listing this product. And shall we list this product?
DAVE WOLF: Actually, Raji, this book is a little special. We got Scott to sign it last night back stage; why don’t we take a picture of the signature and add it into the listing?
RAJI ARASU: That sounds great.
DAVE WOLF: So what I can do with the Silverlight 4 out-of-browser functionality is take this picture that I have on the desktop and add it to the listing. So, what I’m going to do is choose to edit the listing. It’ll jump me back into the photo editing section, and I’m going to drag that right into the application. (Applause.)
RAJI ARASU: Sellers who list occasionally on eBay also tell us that it’s actually a pain to work with a third-party app and try to do basic photo editing capabilities. So, with Silverlight, we were able to actually bring some of the built-in functions like cropping an image, or adjusting the contrast. So, what you see Dave doing here is actually cropping the image and we’re ready to list those items. Again, pre-filling most of this information makes it easy like clicking on the pages and just going to the last page. You click this button, and we’re ready to list this product.
DAVE WOLF: Let’s do it.
RAJI ARASU: And the tool tells you this book is available to the millions of buyers out there to bid on this item. So, let’s bid on this puppy and get it up, make Scott a happy man.
So, simple, fun, engaging. This is going to be perfect for our occasional seller. We are very excited about getting this to a particular segment of sellers, and this will be announced along with the Silverlight 4 launch. What does this mean to all of you? eBay last week opened up its platform called Open eBay to all the sellers within the U.S. Open eBay is an applications marketplace that lets developers like you build applications and monetize them on eBay. You can find more information about this on Apps.eBay.com. eBay invites you to build compelling applications using Silverlight and bring them to Open eBay.
Cynergy has been a great partner with eBay through the concept, design, and development of this exciting application. So, now I’ll hand you over to Dave, who can share his experience with Silverlight and eBay. Thank you.
DAVE WOLF: Thanks, Raji. (Applause.)
Cynergy is a software concept, design, and development agency. We help customers like eBay to imagine what their software products could be like, to design how users will experience and interact with those products, and then build them out into real products that they can ship.
You know, it’s pretty amazing. I remember being here in Vegas in 2007 and watching Scott Guthrie announce the release of Silverlight 1. Back then, we were primarily an Adobe shop. We worked with things like Flash and Flex. During the keynote, we were, frankly, just blown away. And at the end, we raced back to our room and frantically put together a press release announcing the first ever Microsoft Silverlight practice.
It’s been an incredible three years since then. We’ve gone from that idea and a press release to the Microsoft practice being an entirely new business unit for us, a business unit at the end of 2009 accounted for 55 percent of our revenues. Exactly. (Applause.) And we did all that while we grew our existing practices as well. For us, it was entirely additive. How did we do that? It was due to leveraging the speed of innovation of Microsoft Silverlight and the tools that come along with it, tools that allowed us to do what we do best, and tools that work the way that we worked.
What I want to do is show you how we were able to go from concept to design to development in a simple lister in only eight weeks.
Let’s jump in here. Now, when we kicked off in the concept phase with Cynergy, we actually had one of our designers from our user experience group sitting in the room with the folks from eBay and literally sketching this stuff out on a digitizer pad. Now, in the past when we were going to show this stuff off, what we would have done is created a series of click-through comps, right? So we would have taken sketches like this and then sort of clicked through them to help imagine what the experience might be like.
Now, we understand at Cynergy it’s a lot more than just the way something looks, it’s the way that the thing works. And that’s where Sketch Flow inside of Blend is so great.
So what I’m going to do is fire Sketch Flow up here and take a look at this. Now what we were able to do is take those sketches and actually import them directly from a Photoshop file. So, you’ll see here the Sketch Flow assets. I’ll open that up. We import the Photoshop file automatically, and it also includes all the layers. Now, what’s great about that is I can use the layers while I’m building out my sketch flows. If you look over here on the right, you’ll see there’s a slider control. What we did is we took a standard slider control and we styled it using the sketch parts. So, what I can do inside Sketch Flow now is I’m just going to search for the value property of this and you notice I have the value. And as I change the value, I can actually animate the slider control just like the real slider control is going to work. Pretty cool.
We also know at Cynergy good design is good iteration. So, we want to get this in the hands of our customers as often and as quickly as we can. What we can do is take those sketches and package them up and provide them to eBay inside the Sketch Flow player. Now, this is a lot more than just a click-through comp. You’ll notice that I have a real control, so I can search for a book. I can have the popup with animations and transitions. I can move from section to section and actually have the animations and transitions move the slider control. This will act and feel just like the real product, it allows us to have really tight iterations with the customer.
It also, importantly, let eBay give us feedback. You know, during some of the strategy sessions we did, they didn’t like the slider control on the side, they wanted to move it to the bottom. So, all they had to do was come in here and draw a circle and say move it down here. And that’s exactly what we did.
Now, as we moved from this concept phase into design, we can continue to use Sketch Flow inside of Blend. We can go from the sketchy style sketches to a high-fidelity, pixel-perfect sketch as well. And you’ll see here that we implemented that feedback we got from eBay by moving the slider control to the bottom.
We can then take the exact same set of tools, in this case I’m going to go into Blend 4, and go into the development phase. Now, you guys saw the toast that popped up at the end of when we listed the product? We actually used that toast for a variety of different things. If someone asked a question, if the item sold, if we’ve had a new bid, et cetera.
So I want to show you how we build out that toast. You see the toast here, and you see the data that’s in there, new question, item sold. What I’ve clicked on is a new control called a past list box. This thing’s great. It’s a list box that lets us lay out the elements within the list box along any path. In this case, we created a circle. And when we populate that list box, all the data elements lay out right along that circle.
What we can also do is animate along that path. So, what I’m going to do is select the story board, we’ll do move right. And I’m going to drop some markers. I’m going to drop one here, and let’s drop another one right there. And now I can come in and go to the start position, and I’m going to choose. And let’s take a look at what that looks like. As quick as that, I can actually animate data-bound controls right through it.
Now, that looks pretty good, but I’d like to make it a little more natural and a little smoother. So, what I can do is come in and add an easing function as easy as this. Pick circle, try and play that. There, that looks a lot better. Keep in mind that we were able to, using Microsoft Silverlight out of browser and the tools that come along with it, concept, design, and develop this product in only eight weeks.
eBay was a fabulous partner with us in getting this done, and we’re really looking forward to the release of Silverlight 4 and releasing this product to all of you guys so that you can list it. Thank you very much. (Applause.)
SCOTT GUTHRIE: I’m pleased to announce that the release candidate of Silverlight 4 is now available for download along with the Visual Studio 2010 and Expression Blend 4 tooling support for it. (Applause.) We’re going to ship the final release of Silverlight 4 next month.
So we’re really excited about finishing up the Silverlight 4 release and are looking forward to all the great applications like the eBay app you just saw here that we know you’re going to go build with it. But our main focus this morning is not actually going to be about Silverlight 4, but rather, about the work we’re doing to enable you to build great experiences for the phone.
Last month, we announced Windows Phone 7, which is a revolutionary new entry into the phone market. And what I’d like to do is invite Joe Belfiore from the Windows Phone team on stage to walk through kind of the experiences that are enabled with it as well as the type of applications that we expect to see on it. And then what I’m going to do is come back after him and walk you through how you actually build applications for it. So, welcome, Joe.
JOE BELFIORE: Thank you. (Applause.) Good morning, everyone. Hello. I’m really excited to be here with all of you at MIX with our developer community. About a month ago, as Scott said, we had a very big day for Windows Phone 7 Series when we unveiled our new user experience. And today, for us, is an equally very big day as today we announce our development platform and we hope to enlist all of you in joining us to create a great experience for users who eventually will bring home Windows Phone 7 Series devices.
So what I’m going to do is move over here, and I’ve got about 20 minutes with you this morning to give you a walk-through of our Windows Phone 7 Series user experience and show you the first third-party applications being built on the platform.
What I’m going to do here — if we could get this up on the screen. I’m going to do a demo that’s going to walk you through the two main things that we’re trying to deliver for end users, and then show you some third-party apps, and these two main things are to deliver a smart design that anticipates the kinds of things that people need and makes the phone easy to use in their busy lives, and integrated experiences which bring together the best of the Web, applications, and data onto your phone, and to simple places for photos, for music and video, for games.
So what I have here, and what you should be able to see there, I have a prototype hardware. I’m running just a recent daily build. We’re sort of a friendly developer audience, and I know you want to see real, current code, so that’s what I have. All risks implied by that. And on the screen, what you should be seeing is both a camera shot of my phone and a video projected output. And I want to show you here — if I pan up this, you see that white dot on the other screen? Woops, I didn’t mean to navigate, we’ll come back. That’s an indicator that shows where my finger is being pressed. So, you see, as I move up and down here, what you’re seeing there is the video output from this phone, OK?
So eventually, we’re going to turn this camera off because it lets me pick up the phone and hold it in a more natural way, but rest assured, what you’re seeing is actually coming from the phone, it’s not an emulator, it’s not a video, it’s the display output from the phone device.
So we’re going to start on start as one of the main places where we want to deliver this idea of smart design to end users. And what you see up here on the start menu or start experience is a whole bunch of tiles. We call these live tiles. And what they try to do is customize the phone experience to be unique and personal to each individual who’s using the phone. If you look at what I’ve got here, at the top is my people tile, which shows some recent photos of all the people that are my friends on a social network, or my contacts on an Exchange Server, down here my Outlook is indicating that I’ve got 11 messages that are new since I list looked. The calendar tile is a double-wide — accidental tap there. The calendar tile is a double wide because for reading — when your next appointment is or where it is, you want a lot more space, so it’s glanceable and immediately available.
The games tile features Xbox Live, and that’s my actual avatar peeking up there. The “me” tile lets me go set my own status on whatever social network I’m using. Pictures, music and video, each customize themselves and down there is an item for my wife.
Now, what I want to do is actually customize the position and placement of these tiles. So, what I could do is press and hold and I’m just going to pick this up now, I don’t know if you’re still seeing the camera, but we’ll switch over to the full video version. And when I press and hold, I go into a customization mode where I can take this tile and move it around, or if I decide I’m not in love with this person anymore, in this case me, I just push the broken heart and say goodbye. And now that tile is gone because what I need to do, or I will get in trouble, is take my wife and move her up there into prime spot No. 1, above the fold — oh, my screen went — thank you. We occasionally have problems with the USB video connection, so those folks are yelling to let me know when it goes away, I will unplug and replug, and now it’s back. Thank you. Good job.
So I moved my wife into this position, and I’ll just touch right here and she’ll pop into place and now that gives you a sense of how simple it is to make the start experience your own. And these tiles are dynamic, and the intention is to take advantage of some of the hardware specs that we’re doing with our OEMs, every Windows phone has three primary buttons on the front face. Start, search, and back. Our intent is that you can press start and immediately see when your next appointment is, immediately see whether your wife or BFF has updated their status information and so on.
So I’m going to show you a couple of the built-in experiences here to give you a sense for how the user experience feels and flows. The first one I’m going to look at is e-mail. And I’ve gone into e-mail here, and at the top, the thing you see there is called a pivot. I can use the pivot to move over and see mail that’s unread or see mail that’s flagged. So, in this case, I’m looking at Exchange content, and it’s consistent with Outlook on the desktop. I can filter with the mail that I’ve flagged, even if I’ve flagged it on my desktop. I can pivot over and see urgent mail or move back over and look at the pivot for all of my mail.
Now, the performance we think is quite good. I can scroll through a big list with lots of mail. You get the idea.
Now, down here on the bottom is also a sort of important element of our design overall, it’s called the app bar. And what it intends to do is provide one common place in any application experience where a user can get very comfortable and used to finding the commands for that application. And this is one of the ways that we’ve tried to really be smart about the design. We’ve looked at the design of a lot of different phones and when there’s a great deal of variation in where those commands are placed, we find that it takes users a longer time to learn their way around the app.
So in our case, I’m looking at my mail inbox. You can see the process to create a new message, the folder to go to a different folder. The app bar lets itself be expanded so that if you have a richer set of commands, more than would fit in just a few buttons, they’re always available right there as part of the app bar. The most common commands surfaced as buttons, with the ones that are slightly more obscure or maybe more advanced available immediately underneath.
Another example of where we’ve done a lot of very user-driven design decisions and development is in how we implemented multi-selection in dealing with your e-mails. One of the top tasks, by far, that we see people doing on phones is triage of e-mail. And a lot of phones deal with this in many different ways. In most cases, there’s a gesture or a movement and it requires a confirmation, or else you get accidental deletion. And on most phones today, there’s a lot of variation in the way those actions are done. And that makes them a little bit harder for people to learn.
We’ve built more than one design, and usability tested all of them and picked the one that was the winner. And the way deletion works — and we’re still tweaking the visuals here — if you want to delete one message, you touch the — actually accidental touch there, sorry about that. You touch the little checkbox that’s shown to the left of the item, and then you press “delete” — super easy. One click to identify, one click to delete. But the nice thing is that once you’ve done that once, you don’t have to learn anything new, and your muscle memory is just as effective at deleting multiple messages as it is deleting one. So, if I want to delete a bunch of messages, I can select one, two, three, four messages and then hit delete and they’re done.
So the consistency makes the phone experience easier for people to learn and it helps their muscle memory make them feel very efficient and their user of the phone over time.
So those are a couple of examples of user interface, metaphors and paradigms that you’ll see showing up in lots of other places, and these apply to you as developers as well, and they’re ways that we’ve tried to really do a smart design that helps people make the most of their busy lives and get things done really efficiently on the phone.
I’m going to show you another application example and some of the kinds of things we’ve tried to do to deliver this smart design. I’m going to come down here and choose the calendar item. And we’ll navigate into the calendar, and you can see here the calendar supports both an agenda view. I’m going to pivot over to the day view, and this is my calendar for today. Of course I’m not going to make this meeting, but let’s imagine that I were at work. There’s a 10 a.m. meeting that I might want to get to. I can select that meeting, open it up, and down in the lower right, we’ve implemented a feature called “I’ll be late.” This is probably hard for you to read on the screens up there, it says, “I’ll be late.” And if you press that button, it gives you a quick question on whether you want to e-mail everyone in the meeting or just the meeting organizer, and it automatically sends a message out so that you can let those folks know that you’ll be late.
A very simple thing, but something that we’ve heard from users is important to them and helps them be efficient with their phone for their busy lives, moving around and do things in very few steps.
The second area that has been a big focus for us is this idea of integrated experiences which we call Windows Phone hubs. And it turns out they’re not just relevant to us and the end user, but they’re relevant to you as developers as well. Because the idea of a hub is to create a central location that’s task-oriented around photos or around music and video or around games or around people where the user can go and find everything that they care about relative to that data type. And that means data from the Web, it means the activity of their friends, and it means data or actions from third-party applications.
So I’m going to show you a couple examples of hubs and how they look and how they work and throughout the rest of the talk, we’re going to be showing you some ways that your applications can plug right into the hubs as well.
So let’s start with people. I’m going to touch the people item here and navigate into the people hub. The hubs use a design approach that we call panoramic experience. So, you might hear that term used throughout the conference today. And what we mean by that is an experience that’s wider than the screen. And once users start using the phone a little bit, we do things like clip the text to give an indication that there’s more content available elsewhere. So, in the case of people, I opened it up, and it’s showing me the eight people who I’ve communicated with most recently, whether it’s a phone call or a text or an e-mail. That sort of replaces my speed dial list in addition to having people on my start.
When I pan to the right, here’s the list of all people. When I pan to the right again, here’s a list of what’s new with all the people I care about. And the people in my people hub are defined by the contacts on all of my services – Hotmail, Exchange, Facebook, Gmail, Yahoo!n – these are all supported and very easy to set up, so you’re really seeing a full list of all those people.
If I wanted to comment on someone’s post, I could just touch the plus there and add my own comments. But what I’m going to do is give you a slightly different example and show how I might deal with a long list. In one way of dealing with a long list, I can touch the letter A, which gives me a jump list, and I want to jump down to my friend Martin . So I will touch M. We scroll down immediately, here’s Martin, and what I’m going to do is choose Martin, Navigate into Martin, and you’ll see if I wanted to make a phone call, that’s instantly and easily available. If I wanted to text Martin, that’s instantly and easily available, and if I want to see what’s new with Martin on Facebook, I can pan over, it’ll download his feeds from Facebook, Windows Live, or any social network that’s aggregated through Windows Live. So, it gives you one quick and easy way to keep track of what your friends are doing.
So now what I’m going to do as the last thing is go back here and show you how all of these things tie together, and let me personalize the phone and make it my own by pressing the heart button down here, because now I love Martin, and I will place him on my start where you can see if I wanted to, I could touch his icon, his tile, and move him up somewhere else in the list and so on. And you see, it shows his latest profile photo. And if he updates his status on Windows Live or Facebook, I will see that updated status as part of the animation loop that happens on the live tile right there on my start.
OK, I’m going to show you one more hub just to give you sort of a sense of the consistency that happens with these hubs, and that’s the music and video hub. You can see I’ve been playing some music, and the hub – the tile here – has auto-customized itself to show an image of the last artist that I was playing. I’m going to go into the music and video hub here, and again, you see it’s a panoramic experience. On the left is the Zune part of the hub. Every Windows Phone 7 Series device is a Zune. You can synch it with your PC, you can get content from the Zune marketplace, but the music and video hub is designed to not just be about Zune and Zune content, but also about third-party services and content so that whatever kind of music and video you like to use surfaces itself and becomes available and convenient right here in the hub.
Here’s my history of music or videos that I’ve been playing recently. If I pan over, here’s music or videos that I’ve acquired, whether I downloaded them from the service directly or whether I synched them using my PC. And later on, we’re going to show an example of a third-party app plugging right into this hub so that a user could get to some video content without having to navigate around and find the app, just go to the music and video hub.
OK. Now I’m going to move on and start showing you some stuff that we have now showed before. I’m going to show you some third-party applications written using our Silverlight and XNA platform on the phone. And we’re going to start with Silverlight. Now, I want you to take yourself out of your mindset as a developer just for a little while and put yourself in the mindset of an end user who has your Windows Phone 7. And I’ll take myself as an example. I’m a bit of a news hound, so the first application I’m going to show you is the AP mobile experience that was developed by Archetype.
This is a Silverlight app, but as an end user, I don’t really care how it was developed. What I care about is whether it’s engaging, whether it looks very attractive, whether it’s easy for me to learn and use, and this application, the AP mobile news reader, in my opinion, fulfills all those desires. When I come into the experience, you see top news is immediately shown. If I pan over to the left, I get a list of categories of lots of different news that I might look at, so this metaphor of a panoramic experience is already really comfortable to me, and I can use this in a way that is very natural. If I keep panning to the right, the news reader gives me a quick and easy way to see the stories that are being shared, and I can comment on the stories, I can rate them and add my own voice into the conversation.
I’ll pan again to the right, and you can see how this application serves up lots of different media types. I might want to look at photos of the latest breaking news stories or watch video. But what I’m going to do here is actually come back here because I want to actually read one of the news stories. And you can see the top news items are displayed there. Oh, hang on a second there. We had a car drive in, of course one of the things that I’m sure you all are wondering about is how do these applications get monetized. And of course there’s lots of different ways. And the Silverlight platform is a terrific one for letting you enable nice, elegant, interactive experiences that might be driven by advertisement, as you saw in that Ford example there.
But what I’m going to do is jump in here and read this news story. So, I touch the top news story about Obama working on the health plan. I could pan down to read this, or I can pan over to the right where I can be a part of the conversation, add a comment, read the comments that other people are making on this story, and so on. But what I’m going to do instead, you’re getting a sense of how this look, maybe I decide I want to look at some more of the photos. So, I can touch the photo and there’s a nice, 3D-oriented photo viewer that’s built in. I’m not going to go through all of that right now, but you get the idea how the application is engaging and uses motion and animation to make me feel very happy and satisfied as I’m using the device.
I’m going to pan back over here and choose sports because I’m interested in what’s happening with sports. Maybe there’s some NCAA stuff. The first thing that it shows, of course, is sports headlines. And look at this, breaking news is available, in fact, perfect timing, because the tournament’s getting started. So, if I wanted to, I could touch that and navigate to the section of the app on the latest NCAA tournament updates.
So this gives you a first-app example, this app written in Silverlight, and you can see how it fits very naturally into the phone experience. In this particular example, it takes example of the panoramic experience, which users will get very used to and takes advantage of the high-resolution display to make reading easy, display things like ads in a way that’s attractive and very easy to use.
Now, what I’m going to do is move on to the second app that I want to show you. That app example sort of fit really nicely into the phone, and some of you in the audience who are designers are going to wonder, well, geez, what if my brand or my visual idea is just different? What can I do? Is there a way to make my app fit into the phone really nicely?
So I’m going to show you a second app. This is called Hush Hush, and it was developed by Jackson Fish Market. And the idea is, wouldn’t it be fun to have a diary on your phone? Kind of like if you remember years and years ago, you know, the diaries that you buy that have a little combination lock on there, so that’s what Jackson Fish Market wanted to develop. And I decided that I’d actually try this out. This is a true story, true story.
I have a 6-year-old son and twins who are 2 1/2. And after the Mobile World Congress, we took a little vacation about a week and a half ago to Mexico. And my son, because we took him out of school, his teacher said, “Your assignment while you’re on vacation is to keep a journal, a diary of each day on your trip.” So my son did this. And I thought, well, that’s a perfect example of how an application on a phone can enable not just an adult like me, but a kid. And believe me, I’m happy to have situations where my phone can entertain my kid.
So Alexander’s put a combination on here. I don’t know what it is, but lucky for me, the developers at Jackson Fish Market added a way for parents to break the diary. (Laughter.) So I can just bash on it, now I’ve passed the lock – thank you Jackson Fish Market. And here you see this diary belongs to Alexander.
Well, let’s go and take a look at what Alexander kept track of on our vacation. Well, OK, so it opens up to today, obviously that’s a blank page. But what I’m going to do is use the timeline. So, I’m going to press the timeline button and rotate here to landscape mode. You can see the application takes advantage of landscape mode. On March 11th, there were lots of entries. But that’s not where we’re going to go. We’re going to go back to March 8th, which was the beginning of our vacation. And then we’ll choose that, and we’ll come back to portrait mode.
So that is my son Alexander, and this is true, our first day in Cabo, I played Monopoly with Papa, let’s page through the diary and see what Alexander did. OK, on the second day he saw with his sisters, Sydney and Piper, aren’t they cute? You will see more of my kids, rest assured. Day three, football on the beach. I know – actually, here in Las Vegas the weather is nice, but our team members in Seattle are probably looking at that saying, “Oh, sun.” We’ll keep paging through the diary.
Now, one thing that’s worth mentioning. You see this page animation? The folks from Jackson Fish Market, I believe – my understanding is they found that as a Silverlight library on the Web that they could download and incorporate into their app and it was super easy and quick for them to apply that kind of visual, dynamic, attractive appearance. And it first perfectly with the metaphor of the app.
So here’s my son on the last day of our vacation. Went to the office, got a huge lemonade, oh, nice. OK. So, I’m going to wrap this up. We’ll jump out to today. And I’m going to put an entry in on Alexander’s behalf. So, we’ll do new post. And first I’ll add a photo, of course, of the Mandalay Bay, where we are here, and then new post we’ll add some text. Loving Vegas, baby. And of course the application can take advantage of the input keyboard that’s provided as part of the platform and we’ll create our entry, and here we go.
That gives you an example of an application that really is visually quite different than the rest of the phone, but still uses a lot of the same metaphors and is really easy to use and operate and has delightful and attractive visual appearance.
OK, now what I’m going to do is move on to a third example. And I mentioned that for us in our design point, the idea of these integrated experiences, bringing together apps and the Web is an important idea. And I want to show you one real example of how that actually works. So, I’m going to pan up here and take you to the pictures hub. The pictures hub is the place where a user of the phone can see all of their stuff related to pictures. On the left is their picture gallery, in the middle section is a set of photos that are recent or favorited, these are pictures from my same vacation. And on the right is that same idea, what’s new feed for all of your friends on Windows Live, Facebook or other social networks. But specific to their photo activity. So, if I want to go look at pictures that my friends are updating, I go to the pictures hub, and it’s all available there.
But what I want to show you is how third-party applications can add value to the pictures hub and the photo experience generally on the phone. So, I’m navigating into the gallery and looking at all my photo albums. And these albums might be photos that I took with the camera or that I know synched from my PC or that are online with Windows Live or Facebook. I’m going to go into an album here of pictures from Cabo. I’m going to choose this picture here, and I’m a guy that likes to post pictures up onto the Web, but it’s also fun for me to touch them up or interact with them.
And what we wanted to do was make this really discoverable and easy for people in the context of working with their pictures. So, I can touch this picture, get a context menu, and right here is an item called “extras” where third-party apps that have been installed on the phone can identify themselves as photo extensions and we serve them up in the user experience in the place that will be most convenient for people to find them, with the photos.
So in this case, what I want to do is apply some colorizing effects. This colorizer app was developed by Matchbox Mobile, it’s written in Silverlight, and so I can start out in black and white and you’ve seen lots of example applications that let you do fun things with photos, and this is a straightforward one where I’m going to take the balloon, which they set the whole photo to black and white, and I’ll add color to those, and Alexander’s shorts are pretty colorful, so we’ll bring that color out and maybe a little on his face. I’m trying to be artistic here. It’s OK if it’s not working, I’m not offended. So, his face looks a little funny, in fact, I can zoom in if I want to, do a little pinch zoom action here where I can get some more detail, get out of that, get back in colorizing mode, fill in those spots, zoom back out, and now I can save this. It will be saved with my photo collection, and then I can upload it or synch it back to my PC or any of the kinds of things that I might do with photos that I’ve taken with the experience on the phone.
And the point here is that we’ve tried to make the hubs and the user experience in general easier for people and better for you to get real usage by connecting the tasks with the places where people want to do them and will spend their time doing them.
OK, I have one last example. We talked about some Silverlight apps that fit with the phone, a Silverlight app that looks different in the phone, a Silverlight app that integrates nicely in the hub, and the last thing that I want to show you is sort of how powerful the platform gets, both software and hardware, by giving you an example of a 3D Xbox Live-enable game called The Harvest.
So I’m going to launch this. We’re going to switch over here. This game is a landscape game. And this is an example of how the standardized hardware platform that we’re working with our OEMs to specify works great for end users and for you. We’ve fixed a lot of the things that in past releases of Windows Mobile were big variables for you to deal with in testing. In Windows Phone 7 Series, we’ve tried to make your life much easier. Initially, there’s one app processor, and one graphics part to focus on, and you’re going to see that graphics capability here in a second.
There are two screen sizes that you target, and that’s it. There’s always capacitive touch, and we’ll be talking more about these details in some of the breakouts that come later. So, my game’s up and ready, so let me shut up and actually touch the “play” button and show you what it looks like as I navigate around this world here. I’m going to hold this up, you can hear there’s audio.
Now this world is actually 3D. And you can tell as I move around the environment, my guy goes behind stuff and the creatures here are going behind stuff. And not only does it give me a really nice 3D experience, but this is an Xbox Live game. And what that means is I can do things like get achievements, so boom, when I blast out a bunch of those guys, I can unlock the killing machine achievement, and I just earned 10 gamer score points by doing that. And when I come over here, you’ll see, again, an example that this is a real 3D environment. It’s a destructible environment, in fact. I can crush that bridge. I better get over here before I fall, and in fact, I just unlocked another achievement there by being a destructive force.
I’m going to wrap up right there. That gives you an example of – (applause.) Thank you. Thank you. We’re both really excited about the user experience that we’re building on the phone devices, but today really our excitement centers around the app platform. And what we’re going to spend the rest of the time in Scott’s keynote is giving you examples of how to build these apps, how rich that app platform is and show you a wide range of what other people are doing.
Thanks very much, and I’ll be seeing you in some of the breakouts.
SCOTT GUTHRIE: Thanks Joe. (Applause.)
So, Joe just showed you some of the amazing experiences possible with Windows Phone 7. We’re really excited about it.
And as he mentioned and showed off, you can build your own applications and games for it using Silverlight and XNA. And what we’re going to do the rest of this morning is walk through how you build each of them, and show off a variety of great apps that have already been built that show off really the power and the capability that the phone provides.
So, I’m going to start by talking about Silverlight. Using Silverlight you can deliver awesome applications for Windows Phone 7. It’s fully hardware-accelerated. It enables you to build smooth, fluid UI, like that AP app that you saw. You can choose to use either the default look and feel of a Windows Phone app or, as Joe mentioned with the diary app, you can have a custom app UI yourself.
As I mentioned, it’s fully hardware-accelerated. And what this means is that you can build killer applications for this device. Importantly, though, the Silverlight for Windows Phone programming model is the same Silverlight you already know today. It’s the same programming model. It’s the same code. It’s the same set of tools. This isn’t Silverlight Light, this isn’t Silverlight Different. It is Silverlight. (Applause.)
And the great thing about that is that it means that you can take advantage of all the skills you already know to immediately be productive. And what I’m going to do is actually show off building two apps from scratch, one using a code-focused approaching using Visual Studio, another one using a more design-focused approach with Expression Blend. And kind of show off what you can do with it.
So, we’re going to start off and write some code, and switch over here to a machine with Visual Studio on it. And so, you can see I have the VS 2010 ID, and I’m just going to say File, New Project, and build my first Windows Phone application using Silverlight. As you can see here, we have a couple of project templates you can choose from. So, I have a blank project template here, I have a list project template that has some pre-built navigation themes already wired into the app. And, for right now, I’m just going to call this “Hello World,” hit OK, and create the project here.
And what you’re seeing here as I load this in is the design experience inside Visual Studio when you build your first Windows Phone application. And you can see we have a nice WYSIWYG design surface, standard solution explorer, property, grid, toolbox. It just works the way you already know it works. I can click on any of these things. These are controls. So, we could call this, Hello World. I could add new controls if I want to. Let’s add a textbox onto the form here, and we’re going to add a button. And, you’ll see here we have full snap-line integration. I get that to line up nicely. There we go.
And one of the things you’ll notice about the controls is, they pick-up the same look and feel as the rest of the controls on Windows Phone 7. So, it’s nicely integrated into the overall experience. You don’t have to do anything in order to pick up that default look and feel.
What I’m going to do right here is just set some properties. So, I’m going to get rid of that text. And this is actually just so people in the back can see, bump up the font size a little bit on that textbox. So, it’s really easy to add controls, wire them up, snap them into position. And, when I want to, just double click, you go to a code behind, and we can write some cost against them. And so, in true kind of Hello World fashion, I’m just going to change the title at the top to be, Hello, and we have that username textbox like so, and then I can go ahead and run this application. So, you are getting full intellisense. It works just the way you’d expect.
Now, when it comes time for actually running the application, I can do one of two things. I can either actually plug in a phone using a USB connection, and deploy it directly to the device and run it there; or you’ll nice here there’s this nice dropdown to the top of the IDE, which allows me to choose an emulator. And so, there’s a built-in emulator that we provide that I can use instead, which means I don’t have to have any hardware in order to build my application. I can instead just use it directly within the PC, and I’m fully self-contained. I have everything I need.
What you’re seeing here is our emulator. It’s actually a real emulator. It’s a virtual machine running the Windows Phone 7 operating system. So, you’ll even get random errors sometimes around dropped calls, and battery life issues, because it really thinks it’s a phone. And what that means is, it’s really easy to test and uses that. So, if I want to, I can click in the textbox, you’ll notice we get the input screen comes up. I could say, or I can use the keyboard, which is really nice, and useful for testing, if I can spell my own name. And you’ll notice when I click the button now, the title changes to be “Hello, Scott.” So, very simple. If I want to hit debug, just hit a break point. The button again, notice we break in the debugger, full debugger integration, hover over WAS windows, auto-local, everything you expect within a development environment, it just works.
Now, so, this is a sort of simple Hello World app. Oh, one last thing I’ll just show is orientation support. So, you can test orientation directly within the emulator, fully simulate how that’s going to look, how it’s going to work. Again, everything is really simple, built-in, easy to get started.
So, this is kind of our simple Hello World app. Let’s geek out a little bit and build something a little richer. I saw some tweets backstage when people were wondering, when his the first Twitter app going to show up on Windows Phone 7, and so I thought I’m going to do it. And I’ve got to steal that thunder.
So, let’s build a Twitter client, a simple Twitter client. And so I’m just going to rename it to Twitter. I guess, sufficiently, I’m done. But, let’s go a little bit further. And what I want to do is, basically, you enter your username, hit a button, and we’ll call this is Look Up. And I’m just going to go off and be able to pull down some tweets from Twitter. And I want to display them at the bottom of this form here. So, I’m just going to add a list box to the form. So, again, using the standard Silverlight list box. We’ll snap it there to the edge, and make it nice. And let’s write some code to do that.
I’m going to back in my code behind here, and instead of changing the title text, we can get rid of that, I want to write some code that’s going to do some network access to Twitter, and pull down some tweets. And so, to use it, say, use the class that people that use Silverlight already know today called webClient that lets me do some HTTP access. And I can say, Twitter dock, and I’m going to say download a string asynchronously. And I’m just going to say, let this launch, get the URL right. So, you can see here, I’m pulling down some of the Twitter API using the username in the textbox, and retrieving back an XML feed of the person’s tweets.
And I can then say, Twitter dock, and wire up an event handler, so that when it completes, this function is going to get called, and I can write to code to basically parse the XML, populate the list box with the data. And to help with that, I’m going to create a class here called Twitter Item, which is just a class that’s going to have three public properties on it for the username, the message, and the image for the person’s avatar. And then, I see that write to code is going to parse the XML inside this method, create a bunch of Twitter Items and define them in the list box.
Now, to do that, I’m going to take advantage of a library that’s built into Silverlight called Link to XML. I have a reference to it in my project, and I’ll add a using statement at the top like so. And then I can write some code inside here, use that Link to XML library to parse an XML, and create some Twitter items and bind it to a list box. And, so people don’t have to watch me type, that isn’t it – I’m going to snip it here. You can see what that code looks like.
And so, basically, I just check for an error, parse the XML, I write a nice little link expression against that, pull out the items, and bind them to that list box. And now, the list box will display them.
The last thing I’m just going to do to make that list box look a little pretty is go into XAML view, and I’m going to add a control template to that list box. Again, just using the standard approach you’d use today with Silverlight, to make each item, instead of just sort of being an ugly string, come alive a little bit. Here’s what that XAML looks like. I just have an item template with a data template. And I’m using some data binding inside here to bind the image source, username, and message properties. And that’s all the code we need to write. You can now hit F5. It’s running and deploying to our emulator here. So, now type .u, hit lookup. It’s going to go to Twitter, pull down my tweets, and it’s down at the list box. (Applause.)
So, unfortunately, you can’t be the first person to build a Twitter app, but you can be the second. A couple of other things I just want to point with the emulator that I think are really nice in terms of integration. One is, if you’re running on a Windows 7 machine that has multi-touch drivers for your screen, you can actually – if my multi-touch screen is working, which apparently it’s not right now. You can actually click and drag on any of the images, and basically get the full multi-touch integration directly within the PC. So, you can stretch, you can drag, you can slide, and get a nice smooth experience.
You can also, of course, use the mouse. And so, you can see here, I can just use the mouse, and notice the hardware acceleration and action. It’s pretty fast. And so you can get very smooth experiences not just on the phone, but also in the emulator. It makes it really easy for you to test the application.
Again, all just running on a standard PC. You don’t have to have hardware for it. And when you’re done, just go back into the tool, switch over to the device, hit F5, 20 seconds later, it’s deployed on top of your hardware. So, a simple way to build an application using code. (Applause.)
So, we used a code-focused approach. Now let’s actually switch and go to a more design-based approach using Expression Blend. So, in the same way hopefully that feels comfortable for developers, we also have awesome design tools that enables you to build really rich interactive experiences using Expression Blend.
And to help show that off, I would like to invite Jon Harris on stage. He’s going to show off a cool demo of that in action.
JON HARRIS: Thanks, Scott. (Applause.)
We’re going to start off by looking at the finished application, that’s always the best way to do a demo, show you what we’re actually going to build. And as you’ll see, it’s actually an application that allows me to view my photos, and sort them based on when they’re uploaded to this particular application.
So, we can scroll down or click on a photo in this case. Let’s just go back, and I’ll show you the scrolling speed in the same way that Scott did earlier as well. So, you can scroll through the photos, or click on them, sticky fingers. Let’s try one more time. There we go, that’s what we’re trying to do. And we’ll click on a photo, and this time I’ll let it load in the full screen version of that photo, because obviously when you’ve taken photos, you want to see them in detail as well. And if you want additional information, I can just tack on the photo, brings in some text, and you have these nice transitions all the time throughout the application.
So, how would you build an application like this. Well, let’s take a look and see how we do that. I’m actually going to be using Expression Blend 4 for Windows phones. So, when I hit certain new projects you’ll see that I’ve got a new project template type here for Windows Phones. I’m just going to hit OK and go straight into the application.
You’ll notice it’s exactly the same as what Scott showed before. We’ve got the Windows Phone look and feel. As I start to drag out components they take on the right sort of styling of these applications. And obviously I can very easily change orientation, as well, you know, a very important feature for designing for a device. So, let’s start to build the application UI. So, we’ll start off by bringing in the logo we need to use for this. And actually I’m bringing in an FXG file, this is the file that my designer created for me a little bit earlier. So, we just add that to my projects and then I’ll just add that into my design surface like so.
Obviously, I just need to resize that to fill the available space at the top of the application there. Now, you may have noticed it’s not quite got the right background color on there. So, we’re just going to go back out and edit that in my external editing application, which in this case is Adobe Illustrator. Now, for the designers in the audience you probably already realized why I’ve got this awful background color on there. It’s very difficult designing a white logo on a white background. So, I just had that in there as a placeholder.
So, I’ll just save that down come back into Blend, and then you’ll see the logo update itself on the design surface. So, we have this really nice workflow between the different tools we used. Down here is where we’re going to build the main part of the application and to do that we obviously need to have some data. So, I got my developer to actually create a couple of new models for me that I’m going to use within this application. Now, the great thing about Blend from the design point of view is I don’t need to know anything about what these view models are. I can just use them.
So, the way I used them is I literally just add them to my data panel over here. So, let’s just see what the developer has given me. He’s given me a way to view the photos that we’ve taken over the last week. And it’s also allowing me to see the photos that are taken over the last day, as well. Now, we’ve added those data items to my data panel.
Designing with data in Blend is incredibly easy. I want to have some photos. I literally just picked them up, dragged them, and dropped them and by default I get a list box down here on the design surface, a data bound list box I don’t need to do any coding to make that happen. I’m just going to resize that so it fills up the available area of the application down there. Now, at the moment everything is listed out as a standard list box. I’m just going to change the way that that looks and just drag on the style here.
Now, if you’ve not seen Blend before that looks like magic, but how did that happen. Actually, all we’ve done as a list box is really a stack panel, it just stack things in order like that. We’ll just change that stack panel for a wrap panel and things just flow nicely as a wrap panel there. So, a very simple change, but very dynamic update to the UI there. We can also, if you want to, come in and start to edit how that data actually looks. So, for example, if you want to have the photos a little bit bigger I can very quickly redesign that live on the design surface there.
So, it’s very easy to design the data with Blend. What I’m just going to do is just apply the original style back just to snap it back in to how it looked before. That’s great. So, we’ve got the logo, we’ve got the data-driven graphics down here, the photos, we managed to design the menu system. So, we’re going to just come over here and just rename these menu items.
The first one we’ll just change and call this week, or show the photos from the past week. We’ll change the next one to month, and it will show the photos in the past month. You can probably see how this is going to work now. We’ll change the fourth item here to all photos, and then we’ll change the first one just to show the photos from today.
So, what happens when somebody’s clicks on this today button in the menu, what photos do you show. Literally, I just need to link that to my data. I just click on the new button, choose show the photos from today, and hit OK. So, now I’ll do exactly the same thing for week, as well. When somebody clicks on the week button, I want you to see the photos from the previous week.
That’s great. So, now the application knows exactly what photos to display. It just doesn’t know how to actually trigger that change. So, to do that we’re actually going to use another Blend feature called a behavior. Now, behaviors are fantastic. They’re little snippets of production-ready code that allow me to add interactivity really quickly to my applications, literally just by dragging and dropping. And we’ve added some interactivity now. And the really nice thing about behaviors is then I can change the way the behavior works using the property inspector.
So, in this case I want its behavior to actually do something when the selected item in the menu changes. So, when I click on the day, week, month or all I want you to do something. What do I want it to do? I want it to change these photographs. So, to do that I literally use my new element picker here and I literally point and shoot. Now, the menu and the photos are connected together, all of the data binding and the connectivity happens in the background then takes care of that for me.
So, I also just want to add another behavior now. And this is going to take care of the navigation. So, when I click on one of these photos I want to go through to the full screen view of that photo. So, I’ll just drop on a navigation behavior and then tell it which page we actually want it to navigate to in the application. And in this case I want it to navigate to the DetailsPage.xaml.
So, we’re almost there now. We’ve just got one final application to build, we need to actually build that details page. So, let’s just open that up, and immediately you can see that this is a completely blank new page. And just to save a bit of time, yesterday I created a mockup of what this page would look like in Adobe Photoshop. And on the import panel here I’ll have total control over which layers I’m going to import, but in this case I’m just going to import absolutely everything.
So, at this point in time I’ve got my graphics in there, but they’re just standard static graphics, and we’re building a data-bound, data-driven application. So, how do we sort of link these to the data we’ve got over here, well, literally we drag and drop, and the text updates immediately. And we’ll just do that again, we’ll drag and drop, and notice how the text keeps exactly the same font, style, coloring that it had in the original file the designer gave to me.
The only difference is now that it’s data bound and before it was static. The final thing we need to do on this part is actually data bind the image, as well, and you know exactly what I’m going to do, drag and drop. Now, if you think back to the application we saw on the phone, and we went through to the details page we had the full screen view of the photo, when we clicked on the photo we swapped and saw the text. So, it’s almost like a switch, switching from one to the other, but with a really nice transition between the two. So, let’s see how you can build that really quickly inside of Blend.
And the way we’re going to do that is I’m actually going to take this whole details page and turn it into a user control, turn it into a control, rather, and the control we’re going to turn it into is a toggle button. So, we just select that and hit OK. And then all we need to do is decide how we want this to start displaying when people come to the details page. So, this is what the page looks like by default. And you can immediately tell that this is wrong, because we want to see the photo by default.
So, I’m just going to come over here to my property inspector, and literally just take that text and get rid of it for a second. So, when someone clicks on the photo down here, this is my checked state, we actually want to see the text again. So, I’m just going to bring that back. So, we’ve got exactly the effect we want. We come to the page, we see the photo, we click on the photo, we see the text, and now, of course, I can start to refine how this transition is going to occur.
I do this exactly the same way I would do with a regular Silverlight application. I just control this by the timer over here. So, I’m just going to set that to happen over half a second. I just want to add a little bit more texture to my animation. At the moment it’s very linear. We’re just going to add some acceleration and deceleration there, as well.
So, I just need to do one final thing. I’m just going to reset this part of the application and then we can test this in the emulator. And when I hit F5 I get the choice to test it on the emulator or on the device. I’m going to choose emulator. And emulator is fantastic, it’s like having the phone, without having the phone. It’s exactly the same environment. So, let’s bring that to the front. Here’s the today view. I click on a photo. It transitions through to the full-screen view. When we click on that we go through and see the text.
So, that was a photo of Mount Rainier. Let’s go back to the full screen apps, click on the week view, it animates and navigates through to the week view. We can scroll and look at the photos, choose a different photo that looks interesting, click on that. We see the full-screen view of that photo, because it’s a data-bound application and the text is updated there.
So, that was Expression Blend for Windows Phone. We built a data-driven multi-screen phone application in about eight minutes and with that I’ll hand it back to Scott. Thank you. (Applause.)
SCOTT GUTHRIE: Thanks, Jon.
So, we’ve walked through building two apps, pretty much basically from scratch here on stage. And hopefully one of the takeaways you have is. We think now with Visual Studio and Blend we really have kind of the premier design and development tools for building phone applications. We’re going to go one step further though, and we’re excited to be able to announce today that we’re going to be making them free for phone development. (Applause.)
All the features I showed in Visual Studio, all the features that Jon showed in Expression Blend will be fully supported in those free phone development tools and you’ll be able to download them. The goal is, from the point you hit the Web page, you hit download, you hit install, and you build your first phone application, should hopefully only take 20 to 30 minutes, end to end. And we’re really excited to see what you build with them.
So, we actually gave these tools out to a handful of partners about three weeks ago. They haven’t actually tested out, and we’ll see what they could build with them. And we were pretty amazed to see the type of apps that came back, and pretty excited to spend a few minutes here now walking through some of them, so you can actually see what they look like, as well.
So, the first app I’m going to go ahead and talk about is a media app that you’ve probably heard of. As you’d expect, Silverlight on Windows Phone supports IIS Smooth Streaming as well as Rlay Ready DRM. This enables you to build kind of off the media experiences that you stream to your phone. They can adaptively change the bit rate on the fly, depending on the network conditions, whether you’re on 3G, or on Wi-Fi, and it allows you to reuse your existing media assets and code.
And to do this naturally I’d like to invite Scott Stanfield on stage to demonstrate a great prototype instant watch application from Netflix.
SCOTT STANFIELD: Thanks, Scott.
Hi, everyone. If you guys love movies, even half as much as I do, then you’re going to love what we’ve built here. We have the great pleasure of working with Netflix to imagine what it might be like to watch movies on the Windows Phone. So, we have this prototype I want to show you.
Now, if you’re a Netflix subscriber, one of the great little pleasures every day is giving an e-mail notification that you have a new DVD waiting for you at home. And so, we have that concept here. So, I’ve subscribed to a title, and so on the Windows Phone I have a notification that there’s a new episode waiting for me. So, I’m going to launch my Netflix application and let’s see what we have.
So, there’s a lot of new arrivals here, the one at the top and I can scroll through and I’ll probably skip the “Hannah Montana.” But, really there’s so much great content from Netflix that the thing that I like is they recommend movies that I’ll love. And this is based on past movies that I’ve seen, or some recommendations that I’ve made around the votes. So, this clearly knows me well with Caddyshack, and the dude. So, I’m going to back up and actually what I want to watch is “Rescue Me.”
I’m a big fan of “Rescue Me.” This stars Dennis Leary, he’s a New York City firefighter. And I’m trying to catch up before the season is over with the finale next year on 9-11. So, I want to see this thing right now, but the problem is I’m not at home with my surround sound and my comfy chair, and my DVD player, I’m not at work on my laptop, I’m not supposed to watch movies at work. Instead, I’m at the wave pool at the Mandalay with nothing but my Windows Phone in a Speedo. And I want to watch it now. Guaranteed explosions and fire every episode, thank you.
So, what’s great about the Windows Phone, it’s not this is content that’s important to me and that includes not only movies, but music and photos, and I go back up to the home page one of the concepts that Joe talked about earlier is the hub. So, there’s a music and video hub that I can launch here, and see that the title that I just watched is still available right there, pause, along with the other content that’s important to me.
So, it’s possible as a media provider to integrate your content with the rest of the user experience. And we think this is really important. This really makes the Windows Phone something special and personal to everyone that’s using it. I’m going to go work on my tan.
Thanks, guys. (Applause.)
So, as you’d expect, Silverlight on Windows Phone also supports Deep Zoom. This enables great navigation and content viewing experiences, and it enables you to kind of deliver a high-resolution imagery over low bandwidth. So, basically Deep-Zoom works as we start with low resolution and scale in, and the great thing is as the user is panning and zooming in and out at any depth we can pull down the right resolution. This is really important for phone devices. This is really important for phone devices. And to chill off kind of a really cool content viewing experience I’d like to invite Mike here to show off graphically.
MIKE: Thank you, Scott. By the way, that’s an old photo.
So, what I want to show you today is graphically. Graphically the startup in Microsoft’s BizSpark One program, and they’re basically a community that allows you to purchase and discuss comic books with your friends. So, it’s all about comic books. And like many of you, probably, I’ve been reading comic books since I was a kid. As a matter of fact, my parents had a big box of comic books next to our kitchen table and every morning while we were eating breakfast we’d pull one of those comics out and we’d read it. And it was a very social experience with my sister and I.
Fast forward to today, and of course, we have digital everywhere and digital comics. And one of the nice things about graphically is it allows me to buy comic books and read them on my Windows 7 laptop, or carry them around in my pocket. What I’d like to show you today is what we’re doing with Windows Phone 7.
It will launch graphically, and it will start up by going into the marketplace. And the marketplace is a place, graphically, where I can browse a huge back catalogue of comics, thousands of comics I can pull over the net, and I want you to notice this beautiful user experience here, the metro kind of paradigm allows me to easily move to top comics at the moment, or moved over to recommended comics, maybe based on what I’ve had in the past.
So, after I’ve kind of expanded my collection in the marketplace, of course, I want to look at the stuff that I carry around in my pocket. So, I’m going to go into the collection. Now, graphically, as partnerships with a lot of the biggest comic publishers, and in this case I’m browsing some of my favorites from Marvel comics.
So, we’ll start out here with Spiderman. I think you’d all agree that Spiderman is someone who spends a lot of time on the Web. We’ve also got Iron Man, by the great Stan Lee, right, and then Civil War, which is a seven-part, or seven-issue limited edition series by Mark Miller.
If you want to read one of these comics, you basically just touch the cover and you’re brought into the reading experience, beautiful, high-quality graphics and artwork. Comics is just as much about reading as it is about the artwork. With some simple gestures I can turn pages from panel to panel. But, it’s not just about reading, of course. We talked about how important it is to be social. So, in this case I can see this as a comment. I’ll touch a little comment icon. And I’ll see a note from Kevin Mann here, wow, this is some great art. You can almost see Tony Stark’s nose hair.
So, Scott kind of teed it up a little bit, right, Deep Zoom, watch this. Using hardware accelerated Deep Zoom on this device I can continually zoom in and, in fact, if I really wanted to check out the nose hair, I think you’ll agree that I probably could.
That is very difficult, if not impossible to do with that level of performance on other devices. Another view I can get here is the thumbnail view, which allows me to kind of step back from the comic and see all of the individual pages. Of course, if I want to dive into one I can just tap, I get a nice transition into the comics, and I can click on the next button to move from panel to panel like I might actually read a comic book if I had a print version.
So, this is amazing, guys. What do you think? (Applause.) So, I know we’ve said it a bunch here, but graphically just in a matter of two or three weeks, I mean, we got them the build, we were able to pull this out, and deliver an experience like this that basically allows you to take all your comic books collection, put it in your pocket, have a high-fidelity reading experience, and share it with your friends. Thank you.
SCOTT GUTHRIE: Thanks, Mike. (Applause.)
So, in addition to all the standard Silverlight features, your application can also take also take advantage of phone-specific capabilities. These include things like location support, microphone and camera, push notifications, accelerometer, hub integration and more. And this really allows you to kind of build these kind of experiences that can be completely immersive and really wowed.
Let’s first talk about one of these features, which is the location and map control support. So, built into the phone you can access the user’s location, if they give you permission. And use that in a variety of different ways within your application.
You can also take advantage of a mapping control that you can then embed inside your application. So you can provide kind of an engaged mapping experience directly within your app. You don’t have to fork off to a separate app, you can actually integrate it directly within your UI. And Foursquare is a really great example of this. And I would like to invite Laura here to show it off in action.
LAURA FOY: All right. Thanks, Scott.
How is everybody doing? All right. Good morning. (Applause.)
I have a bit of a confession to make. I love Twitter. I do. I love social networking. But lately some of my friends have been commenting on some sort of odd tweets that I’ve been sending out. Thinks like, at Chuck E. Cheese in Kirkland, or I can’t wait to be the mayor of Mikey’s Pub. The reason for these odd tweets is an application you may be familiar with called Foursquare. And I’m going to show it to you today on the Windows Phone 7 Series.
Now, with Foursquare, the deal is, you check in. And when you check in, it notifies your friends via Foursquare, Facebook, or, of course my love Twitter, it let’s you know where you are, and also tells you where they are. And when you check in, it suggests places to go, and things to do nearby. But one of my favorite features of Foursquare is the tips and tricks section. And in this section, you can really help out your friends by sending out messages like, you guys I have to hit up the cute bartender at the Hard Rock, he serves the best Mojito. So, let’s go ahead and check in.
Now, when you check in, as Scott was mentioning, my phone automatically knows where I am, it knows I’m at the Mandalay Bay Hotel here in Las Vegas, and these push pins that you’ll see on the map represent fun places to go, and things to do nearby. So, also, as Scott mentioned, inside the application, we’re not taking it out to another application, I can go ahead with the Bing maps integration, and Silverlight of course, and I can zoom, I can pan, I can scroll in, or zoom in, find the exact location that I want to go to. But if I don’t feel like using the map feature, I also have the list right here of all the locations and restaurants.
So, let’s go ahead and check into a place where I think that we should all go maybe after the keynotes to grab a bite to eat. Let’s see. Just wait until something catches my eye. Oh, that place had terrible service. I think I was thrown out of that place. Here we go, let’s go ahead and check into the MIX. Now, when you check in, it brings up the details page. And on the details page, you have a couple of options. You can get directions. You can check in, or you can add a shout. And if any of you know me, you know I’m a big fan of shouting. So, I’m going to go ahead and do that, and I’ll type in a message. Let’s see. Killing it at the keynote. I can spell. Go ahead, OK. That’s good enough. So go ahead and click OK, and check in. And it sends that shout to all my friends, so they know where I am and what I’m up to. Click OK.
Now, we’re back to the main page. There’s one more thing that I want to do. It’s the friends section. So, when you click on the friends section, hopefully I have a friend or two that will pop up, but it does very similar things to what it did with the restaurants. Now, instead of giving you locations, it’s giving you people. And you’ve got all the same functionality with Bing Maps. You can scroll, pan, and zoom. And these push pins represent my friends. They’re also listed here, and it shows sort of their recent activity, and what they’ve been up to, where they’ve been checking in.
So, let’s go ahead and click on a friend here. Chichi’s usually at the slot machines. Apparently she’s at the Tropicana. We’ll go ahead and click on her avatar, and it shows you her details, she’s a newbie, where she is. From this point, you can call her. You can send her an e-mail. Or, if you click here, it gives you directions, and Bing gives you simple directions on the map of how to get to where she is.
But we’re not going to go meet Chichi, because, like I said, hopefully we’re going to meet up with all of you guys after the keynote. And, yes, that’s it. That’s Foursquare on Windows Phone 7. I hope you liked it. (Applause.)
SCOTT GUTHRIE: Thanks, Laura.
One of the things you might have noticed that Laura was actually demoing using the emulator on that touch-screen screen, which thankfully they fixed the touch-screen drivers. And you can see, you basically just use your fingers on the screen if you have a touch-screen capable device. And basically fully simulate everything on your Windows PC, do all your development, and have a really great experience.
Everything else so far is actually running on real hardware. And so, it might look good on the screen. You might wonder, how can it look that good, it really is running on real hardware, and it shows off some of the performance you get, not just in the emulator, but on the real devices.
So, this next one we’re going to talk about is Shazam. It’s a phone, so it must have a microphone, right? Well, Windows Phone applications using Silverlight and XMA can get microphone access, and get raw access to the raw input files as someone speaks beneath the microphone. Shazam is a great example of what you can do with it.
JEFF SANDQUIST: Well, I am super proud to show for the very first time ever Shazam on the Windows Phone 7 Series. You know how it is, you’re out and about, and you hear this awesome song. And you want it. You want to add it to your collection. You want to be able to play it. And you want to be the first one to be able to tell all your friends about it, but you don’t know the name of the song. You don’t know the artist, and you don’t know how you’re going to get it. Well, thanks to Shazam, problem solved. (Music plays.)
OK, so we grabbed a sampling of that song, and we’re now uploading it to Shazam’s eight-million-plus song database in the cloud. Let’s hope for a match. I don’t have a net here. There we go. So, it’s Imma Be by the Black Eyed Peas. I’ve got album art. I’ve got photos of the band. And I’ve even got a video that I can play. I’m going to slide over here, and isn’t that smooth? I can even see other pieces of songs on that same album.
Let’s go check upcoming concert dates. I’ve got tour information, where I can go and check out a live show. Anybody want to join me in Tacoma, and check out that Imma Be and the Black Eyed Peas?
If I go back to the phone page, there’s a couple of other things here that are really neat. One, I’m a little bit social. I want to be able to send this song and tell all my friends on Twitter and Facebook about it. But, even more importantly, I’ve got nice, simple integration with the Zune Marketplace. I can go over there, and I can play the song, and download it, and add it to my collection, and that’s awesome.
So, I want to do two things. I want to thank the Black Eyed Peas for some tunes this morning, and, of course, Shazam for being a great partner with us at Microsoft, and betting on Windows Phone 7 Series.
Thank you. (Applause.)
SCOTT GUTHRIE: Windows Phone applications can also take advantage of push notification support. This allows application developers to deliver notifications to the phone, and provide the user the ability to get real-time information and respond. And even if the application isn’t running on the phone, they can quickly launch it, and go contextually into the scenario for that particular notification.
And to kind of show that off in action, I would like to invite Charlie Kindel to show off Major League Soccer.
CHARLIE KINDEL: I am so unbelievably excited to be here this morning. I’m excited, one, because we finally get to talk about all this Windows Phone stuff that we’ve been working on, but also because I’m a huge soccer fan.
How many people in the audience are football fans? Let’s go? (Cheers.) Actually, I meant soccer fans? (Applause.) Yeah. All right.
So, the demo that I get to show off today is built in conjunction with Major League Soccer, and what they’ve done for the 2010 season for Major League Soccer is create an online experience for all the teams in the league where fans can go to their Web site and using Silverlight technology view live stats about games, real-time information as the games go on, and watch live streaming video of clips that just happened.
The demo that we’re showing is that same experience on the phone, and it illustrates how push notifications work, and the benefits of those to the user. Push notifications within the Windows Phone platform allow developers to easily convey to end users on their phones information about applications even when applications aren’t running, or when the phone is in the user’s pocket.
So, I’m going to start this app off here by starting the MLS app on my phone, and I’m going to go and I’m going to set up the notifications I care about. So, I’ll click on set notifications, and in this case I’m going to, say, I want to know when my club scores, and when my club wins, when the matches are complete, and that’s it. And I’ll go back.
So, now I’m going to switch, and I’m going to be down at the Home Depot Center in Los Angeles for this match. And, I’m using an admin console that the MLS officials at the match will be using to keep track of the score. The game we’re simulating, because the season hasn’t really started yet, is between LA and Salt Lake. I’m a huge Sounders fan, as you can see from my Sounders jersey. And I wanted us to use Sounders here. Scott wouldn’t let me. He’s got a man crush on Landon Donovan, who is the star striker for the LA Galaxy. So, he won that, and so we’re going to use Galaxy.
So, the game has been going on. It’s in the 90th minute, LA is ahead. And Landon Donovan scores. The official presses the button. (Cheers.) Crowd goes wild. And now, I’m going to go back to my phone, and let’s say that I’m in some app on my phone. I’m in the agenda, and that notification is now going to come down to my phone from Major League Soccer. And there it is. It pops up, and it says, goal, LA 2, RSL 1, Landon Donovan, 89th minute.
So, now, I can click on that notification, and it will start the MLS app for me. So, no matter what app I’m in, the app starts up. And I can go ahead and browse down and see the different stats on the game. I can see the number of fouls, number of yellow cards, and so forth. But, what I really want to see is a streaming live video of that shot that Landon Donovan just made. So, I go in here and sure enough there’s that stream available to me. I can start it up, and if you listen you can hear the commentator. And Landon scores, and it’s a brilliant goal.
So, with that we showed first notifications for Windows phone and how they allow applications to be alive for end users at any time. And we showed how MLS is using Silverlight to create great experiences for fans of soccer. So, with that, go Sounders, and go Windows phone.
SCOTT GUTHRIE: So, Windows Phones have built-in accelerometer support that can be accessed from application code. And this enables you to really easily detect device motion and use it as input within your application, and enable sort of a wide variety of pretty interesting scenarios.
What I thought I’d do is actually just show off kind of a phone example of one such scenario that we’re calling Marionette. So, this is sort of a simple app that lets me control an avatar. So, I have a little avatar here. I can change the picture of the avatar so I could have my head there. I feel bold. This could be a career-limiting move. (Laughter.) I could pick other people’s avatars. And then we’ll switch in here.
I can control it. I can dress him. That isn’t quite the right look. (Laughter.) There we go, kind of a classic sweater look. (Laughter.)
And Steve couldn’t be here today, but you know how much he likes developers. So, he kindly recorded this on Friday for us. It is a nice sound recording.
STEVE BALLMER (from recording): Phone developers, phone developers, phone developers. Phone developers, phone developers, phone developers.
SCOTT GUTHRIE: And what’s cool is we can change the pitch. So, we can make it — or change the pitch higher. (Audio segment replay/higher pitch.) I think it’s a nice sound.
And then because there’s accelerometer support, we can tap him.
SCOTT GUTHRIE: And move him around. (Laughter.)
MARIONETTE: Ouch, ouch, ouch. Ouch, ouch, ouch. (Laughter, applause.)
If I don’t have a job next week, you know why. (Laughter.)
So, we talked about kind of one Silverlight and how we’re enabling a common programming model and a set of tools that allow you to target multiple devices, the desktop, the phone, and elsewhere.
And to talk about what this means from a business perspective and what kind of applications this allows you to do, I’d like to invite Loic from Seesmic onstage to show off some of the cool things he’s doing. (Applause.)
LOIC LEMEUR: Thank you, Scott.
Hello, everyone. How are you doing?
My name is Loic. I’m the founder of Seesmic. The problem we’re solving is very simple. To share with all your friends you have to go to very different social networks: Facebook, Twitter, hundreds of them. And you have to then gather all the feedback, all the comments from all of those different places. So, we’re bringing everything into one screen, and actually on every screen.
So, I’m really happy that Scott is solving all the screens problem, while we are concentrating on the thousands of services which are around those social networks. And you all have your favorite.
So, what we created is a platform, which I would like to show you today. It’s Seesmic Desktop, and it looks really the same as what you might be familiar with, but this is entirely different behind the hood. It’s a Silverlight platform, which runs entirely on plug-ins. And we tried to make it really, really as open as we could. In fact, all the services you can see here, Twitter, Facebook, and LinkedIn, are all plug-ins themselves.
So, let me show you how it works. If you go to settings, and now you have plug-ins, you can see that Twitter, Facebook, and LinkedIn, the three main social networks, are here embedded as plug-ins themselves. In fact, you could rewrite the way we integrated Twitter in Seesmic Desktop yourself if you don’t like it. You can entirely rewrite it.
So, we integrated a few of them obviously, which we ship at launch, like Tweet Photo, which lets you send media to a photo and then videos soon, and other services.
So, if I show you around, see here obviously you have a composer. Now if I post something, platform.seesmic.com, see this link, I type a space, it will shrink it. If you don’t like that service which is integrated, you can build your own and change the URL shortener. No problem, it’s a plug-in.
Let me pause this actually. You can change the tabs. You can integrate pretty much anything.
So, let me show you how we actually integrated the service right into the timeline itself of the Tweet.
So, here is a location, which is very trendy, a plug-in, which is Bing Maps. And here it’s a Silverlight plug-in where you can control right there within the timeline the location of that user, and obviously you can create anything you like, so filters, you name it. I mean, there are so many developers having crazy ideas, there is even a scale that you can measure your weight, it will Tweet how fat you get or not. So, if you want a timeline with that kind of plug-in, you can build it inside.
Here is another one. You can control all the tabs here on the left with plug-ins. You can control the search, you can change the search engine if you want to build your own and remove, for whatever reason, search.twitter.com right there, you can change it on the top right.
But here what we did was we also wanted you to be able to change the UI itself. So, obviously simple, you can change colors. And you can also upload any background you like, and change the entire UI of the application.
So, think about, for example, if you are Netflix, and you want to create a Netflix client, you can do the branding, you can do the plug-in architecture, even remove Facebook and Twitter if you don’t want it, and entirely customize it.
You could even build a shop, like, for example, Amazon could do a deals timeline within Seesmic, and the you could buy right from there, or Zappos or any shop.
So, we are actually driving traffic to you. You can create a plug-in and if you click, you’ll get new traffic or users and also revenue. You can actually do a transaction right in there.
So, we built this Seesmic platform on Windows initially, and we were so impressed by how Silverlight 4 was that we decided to port everything to Silverlight with very minimum work. Like 90 percent of the code was reused.
And we thought that what would be cool for the developers integrating into Seesmic would be if they could also do it on the Mac. So, let me show you Seesmic Desktop on the Mac. Here it is right there, and it’s exactly the same code, 100 percent of the code is there with great performance. And if you build a plug-in, it will work on Windows and it will work on the Mac.
Now, it’s Windows-Phone based, and what Scott said is that he wrote in front of you a Twitter client, the first Twitter client, and I actually disagree that it’s a real Twitter client. So, I thought, you know, as a challenge we would do also our Twitter client. So, let me show you what I think is the first real, Scott, Twitter client, which is Seesmic — (laughter) — for the Windows Phone.
So, as you expect, you can browse your timelines, you can see your replies, and access — all right, a reply from Marco Apique (ph) that it took — and the media resulting there, and you can also see the profile of the user himself. So, this is Marco who is behind our platform. And you can — if you notice the background of Marco, which is loading on the Windows Phone, this is Twitter background. So, we load it, and it will change for everybody obviously.
So, now if I go back here and I can see who is around me. So, now this is showed you a Bing Maps plug-in on Seesmic Desktop. Here is the same plug-in, here is the same service now on Windows Phone. And I can tap on a Tweet and see whose Tweet it was.
Of course, I can Tweet as well. It’s supports location image posting. I mean, it’s a Twitter client, and we are very committed to the Windows Phone.
What’s great for us really is that the code that we use here is the majority is the same as the code we’ve used for Seesmic Desktop. And that’s a big deal for us because we had a number of other mobile trends, we always started from scratch; not here.
So, we would love to see your ideas and how you see your plug-ins, and we would love to see hundreds of them, and make the platform as customizable and open as possible. So, we would like to invite you to a signup to platform.seesmic.com, and join us tomorrow at 5:40, if you feel like. We have a session. And we hope to see all your services integrated.
Thank you very much. (Applause.)
SCOTT GUTHRIE: That was definitely the first real Twitter app for Windows Phone and a great story in terms of kind of how you can run your code everywhere.
So, phones are not just about work but they’re also about play. So, we’re got switch into a section here where we’re hopefully going to have some fun and talk about how you can build great applications that are run as well.
This first application we’re going to show off is kind of a bit of a different one, and it’s called Coding for Fun Cannon. Basically it is an application that allows you to remotely control a cannon. So, for something a little different let’s go ahead and wheel out this cannon.
Basically the way this app works is it’s a Windows Phone application.
STAFF: We are waiting for a network.
SCOTT GUTHRIE: Ah, we’re waiting for a network. There’s something about networks and me and phones. We’re going to try again. The great thing about having a cannon application is when the network doesn’t work. Give it a try here.
Well, tell you what, I think what we’re going to do is pass over this demo or spend a few seconds seeing if you can make it work here, but the cool thing is even if it doesn’t work is we actually are going to show it out there offstage.
STAFF: We’ll try it one more time.
SCOTT GUTHRIE: One more time, OK.
And so you can go ahead and play with this one as well. It’s kind of a different app, kind of a fun app, and hopefully we’ll be able to show it in just a little bit.
STAFF: All right, we are on the network.
SCOTT GUTHRIE: We’re on the network. OK. (Applause.)
So, let’s bring out the cannon. So, what we have here is a hydraulically powered cannon — that tripped over its own cable and died right away. (Laughter.)
Don’t worry, when we actually fire stuff with the cannon, don’t worry about all these technical glitches. (Laughter.)
OK, we’re good to go again. (Horn plays.)
And so what you’re seeing here is — it’s really kind of fun and hard to describe this. Basically we have a mechanical cannon that you can control from a Windows Phone 7 device. We’re sending network commands to it, and you can see like when we pretty the little pedal button there, we can make it go forward a little bit. Just in case the app becomes a little self-aware we have Clint standing by here. (Laughter.) That’s OK. Stay!
And what’s cool is we’re using the accelerometer support within Windows Phones so that not only can we drive the cannon but we can aim it. And so if we pan left, watch out. (Laughter.) And we have two cannons on here. Just for fun — I’m not going to get clocked here, am I? (Laughter.) We’ve decided to kind of shoot something into the audience. So, be ready to catch it.
Just for fun we’ve got some nice red polo shirts that we’re going to use as ammunition. (Applause.) Very nicely stitched, I have like 20 of them. (Laughter.)
So, get ready over there. Fire in the hole, and hope this works. I think the audience over here to the right needs to get fired upon as well.
STAFF: All right, who wants a t-shirt? Let’s see some hands.
SCOTT GUTHRIE: Who wants a t-shirt? OK! (Cheers.) I’ll let you do the honors here.
STAFF: All right, let’s see some hands. Come on, people!
SCOTT GUTHRIE: OK! (Laughter.)
Anyway, so simple app, bit of a fun app, something a little different you might not have seen before. Hopefully no one got killed, which is great. And we’re going to be Open Sourcing this sample on the Web later today, and so you can check it out. If you missed the t-shirt, you can go back and check it out in the hallways during this event. And again you’ll be able to download the code, sort of some examples, something fun that you can do.
So, so far we’ve been focusing on Silverlight. All the apps that we’ve shown here in my segment of the keynote here have been Silverlight applications. Now let’s go ahead and look at what you can do with XNA.
So, XNA delivers, allows you to build game experiences for whether they’re casual, social or high performance gaming, on Windows Phones. It’s fully hardware accelerated. It supports both 2D and 3D graphic APIs, and it’s supported by a free Visual Studio add-in.
And just like Silverlight, XNA enables you to build games once and target multiple devices with them: PC, Windows Phone, and Xbox.
To kind of show this off and show some of the cool things you can do with them, I’d like to invite Larry Hryb, also known as Major Nelson, from the Xbox team to show it off. (Applause.)
LARRY HRYB: Scott, good to see you.
Hello, Las Vegas, and everybody watching the Webcast out there! Good to see you.
So, the red shirt, I’m sorry, I don’t know how I’m going to top that, but I’m going to do my best.
So, I’ve got a couple things to show here. The first thing I want to show is Goo Splat. Now, first of all, Goo Splat is a game that was — you’ve originally seen on Zune HD. But what happened is they were able to take — this was developed internally. So, the internal team was able to take it and port it very quickly from Zune HD, with a minimal amount of work, to the XNA Games Studio 4.0 for Windows Phones.
You can see it’s pretty straightforward, press play, and it’s a real easy pickup and play game. So, you can go through here. It’s got multi-touch. You can do all sorts of crazy stuff like that.
What’s exciting here is just taking the ability from the Zune HD and bringing it right over to this phone.
I’ve got a bunch of stuff here, so I’m going to go real quickly through it.
So, the next one I want to show is Battle Punks. So, now Battle Punks is a great game that was developed by Gravity Bear, in association with Mythos Labs. Now, it may look familiar, because it’s available on Facebook right now in a full 3D version, but we’ve got this demo here that I want to show you.
Your character and the game world itself live up in the cloud. So, you can access it across multiple screens.
Now, the multiplayer game is meant to be social and asynchronous. So, let me just back up a little bit here. I can go into the profile. I can make my profile up a little bit. Oh, let’s get something going. That looks Vegas. (Laughter.)
So, once we do that, now comes the fun part. Now I’m going to back up there. Look at the top, and it’s been unlocked. Thank you.
Now, Joe talked about this a little earlier, but as the Live guy, I want to talk about it again. Xbox Live support will be available for Windows Phone 7 games. That means you can unlock achievements, earn gamer score, access the leader boards, and of course connect with your friends over Live.
So, I can go through here. I’m going to go ahead and battle, and I’m going to try to get another — go ahead and fight. I mean, you guys know what a fighting game looks like. It’s pretty straightforward. I’m just going to tap the hell out of this person here. And once I do that, it’s basically a virtual button. Actually there’s another achievement unlocked there. So, it adds onto my gamer score. This is Battle Punks.
Now, the next one I want to show is something that Joe showed a little bit earlier. You can see I’m actually — I’ve actually taken the Harvest and gone a little bit further into it, and I’ve actually made it to the boss battle. Joe wasn’t able to do that. But I brought it to the end here in the boss battle.
So, he showed it this morning, but I want to talk a little bit about that, the phone, yes, but I want to move it on, and I want to show you on the PC.
So, over here on the PC I’ve got Visual Studio 2010 running. You can see it all up there. My project is all open.
What’s great here is the same project is going to work across the PC, the Windows Phone, and, of course, Xbox 360.
So, I’m going to press F5, and it’s going to go through here, and it’s going to fire up. There’s the Harvest, just like you saw a little bit earlier, except it’s been optimized for this screen, and, of course, the mouse so it feels — there we go — so it feels a little bit better, because I’m using the mouse now.
So, I’m not really a PC gamer, I am an Xbox gamer. So, here’s the same thing. Let me fire up the Xbox on the screen here, and you can see now we’ve got the Harvest right there. I can click on it and go right into it and play the game.
So, what’s exciting here is that with really just one — with Visual Studio 2005 and XNA Games Studio 4.0 I’ve really deployed it across these three screens. So, it’s really impressive what they’re going to — let me go in and play this, and you can see it looks the same and plays the same.
What’s interesting here is that both Battle Punks and Harvest were created in about three weeks. These demos were created in about three weeks. That’s really exciting.
So, XNA Games Studios, the powerful game platform, that allows you to really focus on game development, and you just have to make a few tweaks for the screen resolution — hold on a minute here, let me go ahead and do that — and, of course, the input device. You also get connectivity to the award winning Xbox Live service, and you can do a variety of gaming experiences.
So, we’ve got tools with deep integration for Windows Phone, PC, console, and XNA Games Studio 4.0.
Thank you very much for your time, and have a great time in Vegas. Thanks, Scott! (Cheers, applause.)
SCOTT GUTHRIE: Thanks, Larry.
So, Windows Phone includes an online marketplace that enables you to distribute and monetize your games and applications. So, to show this off in action, let’s go ahead and look at what the customer experience looks like for purchasing the games and applications you’ve built.
SCOTT GUTHRIE: So, the great thing about this is you can how build applications, you can build games, you can use Visual Studio or Expression, upload them into the marketplace, and make them available to your customers and make money off of them.
One of the things that’s nice about this particular screenshot here is you notice there’s both a try and a buy button. And this enables you as a developer to deliver a single binary into the marketplace. You can then control what the trial capabilities of your application are, allow someone to actually play with it for a while, and then they can go ahead and buy it. It makes it much easier for you to distribute apps, and again make money off of it. So, hopefully excited to see all the great apps you build and populate the marketplace with. (Applause.)
So, we’ve talked a lot about the types of apps and gaming experiences you can build with Windows Phone 7. We’ve shown off the development tools, as well as the design tools, with Visual Studio and Expression Blend that allow you to build these types of applications. You saw kind of literally all the apps that you saw here onstage were created over the last three weeks by some of our partners. So, it’s hopefully a testament to the types of sort of really great experiences that you can deliver.
So, the question you’re probably wondering at this point is when can you get started hopefully, when can you download things, when can you start building apps, when can you start testing it.
The answer is now. (Applause.) I’m pleased to announce that the Windows Phone developer tools are now available for anyone to download on the Web. This includes Visual Studio 2010 for Windows Phone, Expression Blend 4 for Windows Phone, as well as the XNA Games Studio 4 for Windows Phone. All of these are available for free, not just now but forever, and enable you to build these types of experiences that you just saw here today. And you can go to developer.windowsphone.com, and download it today.
So, hopefully some excitement here in terms of what you can build, the types of next generation experiences that you can deliver. We’re really excited to spend this week getting a chance to work with you and talk with you, get your feedback, and talk about all the possibilities.
I’d like to thank everyone for coming here this week and taking time out of your busy schedule. We really hope you enjoy the conference. Welcome to MIX. Thank you.