• DaveDev

    Numerous new Windows Phone 7 features coming out this year. First update to hit mid March.


    Big day of announcements

    What a great time to be a Windows Phone 7 developer!  Hot off the heals of the recent Nokia partnership we announced some of the free updates that will be coming to Windows Phone 7 this year. Several new features were demoed at the Mobile World Congress expo today in Barcelona, Spain.  They include some long awaited features as well as some unexpected surprises.


    First update only weeks away

    The first free customer update will be made available for all Windows Phone 7 devices by the second week of March.  This is the long awaited update that includes copy & paste and faster application performance.  This update will also include support for CDMA networks.  That means U.S. mobile operators such as Verizon and Sprint will be releasing Windows Phone 7 devices right on schedule for the first half of 2011.

    Windows Phone 7 Developer Tools - February 2011 Update

    The Developer Tools for this new update are already available and launched on February 4th.  Most applications should run just fine under the new update (my own DoodlePad app didn’t require any changes) and any apps using normal textbox controls will automatically take advantage of copy and paste.

    As pointed out on the Windows Phone 7 Secrets Blog copy and paste will also allow you to paste the text multiple times.

    People and Office Hub getting new Features

    I am very happy to report that Twitter will be integrated into the People Hub in the second half of 2011.  This is great news if you are a fan of the current hub for all your Facebook updates and have been waiting for tweets to be included.  It was also announced that documents inside the Office Hub  will be directly integrated with Windows Live SkyDrive.  Expect these updates to hit in the second half of 2011.

    DaveDev - Windowsphone.live.com

    Don’t forget you can already do something similar today with OneNote by turning on Cloud Sync with your phone via the Zune Software. Above is the screen I get off Windows Live for my own Samsung Focus. 

    Internet Explorer 9

    We all know that the current browser in Windows Phone 7 is based off of Internet Explorer 7.  It is, like the rest of the mobile platforms out there, a mobile browser.  This means it comes across in the header as a mobile device to website owners.  Developers have to code custom screens for those mobile devices.  What if we could change all that?  What if an HTML5 developer could target just open web standards for their pages.  What if those same pages ran hardware accelerated across both phone and desktop without changing any code? Enter Internet Explorer 9!

     No Contest - Hardware Accelerated IE9 running circles around iPhone4 Safari Browser

    This is full Internet Explorer 9 running on the phone that is running on the desktop and the results speak for themselves.  I captured the above screenshot during the iPhone4 Safari  vs. WP7 IE9 mobile browser html5 showdown.  The Windows Phone 7 device was able to run 50 fish without any stuttering thanks to IE9 and the included phone hardware acceleration.   The best news of all is this will be a free update hitting devices in the second half of this year!


    Later this year users of Windows Phone 7 will have the ability to switch quickly between applications or run applications in the background (such as listening to music).  While the current build shown is not UI complete we were able to see how it will function.  To switch back and forth between apps you hold down the Back Button.  This presents a list of live thumbnails for your currently running apps.

    MultitaskingSend an Email then go right back to Fruit Ninja!

    I took the above screenshots during the keynote demo and you can see both Fruit Ninja and Rise of Glory running at the same time as E-Mail.  Both of these titles are currently available X-Box Live games on Windows Phone 7 and they appear to be multi-tasking just by running on the new build.  By simply holding down the back button after writing the e-mail, swiping over to Rise of Glory and tapping on its thumbnail the game got focused again.  Rather than showing the standard “Resuming…” screen like we are used to in the current builds today.  I am looking forward to this and imagine we will be getting a lot more details at MIX11!


    Kinect and Windows Phone 7?

    With over 8 million Kinect devices sold in just 60 days Xbox Kinect has quickly become one of the fastest selling consumer devices of all time.  If you haven’t seen one yet go to your local Best Buy and check it out.  That’s what got me hooked seeing how quickly my two little daughters took to it.  Several sore muscles later, thanks to Kinect Sports, my wife and I can vouch for it as well.  It truly is something revolutionary.

    So it was a great pleasure to see the X-Box team looking at ways of integrating Windows Phone 7 with Kinect and taking it to the next step. 


    A video was shown of the Kinect Adventures Rally Ball game (included free with the X-Box Kinect bundles).  The primary player was moving their body around to reflect the balls across the court and two people were controlling how those balls interacted on screen via their phones.  This included both the number of balls as well as their direction and speed.

    Pretty amazing stuff and I am looking forward to the coming year to see what other games start to integrate the two devices together.  Since we have X-Box Live already on our Windows Phone 7 devices how cool would it be to unlock achievements for both the person using the phone (right on the phone) as well as the person logged into Kinect!

  • DaveDev

    Funny Video of Bill Gates' last day at Microsoft



    If you have ever been to PDC or TechED you probably have seen some of the funny videos Bill puts on.  I saw this last night while watching the Live CES feed, absolutely hilarious.  Brian Williams, Steve Ballmer, Matthew McConaughey and many others all make appearances....

    Check out the video here!

    Watch the entire keynote at the Microsoft CES Site here

    The full keynote is worth checking out.  Really good Surface demo by Bill and some awesome stuff in there from Robbie Bach on Zune Social, Xbox and Sync.

    Technorati Tags: ,
  • DaveDev

    Are you a Developer or Designer in the NY/NJ/PA area using Microsoft Software? Let’s chat!


    It's about the People!

    Our fiscal year at Microsoft ends in June and the new year begins in July.  It is a time of reflection and re-alignment as we look at past successes and how to best serve our customers moving forward into the new year.  For me it also meant being asked if I wanted to take on a new challenge.  Up until this point I’ve been focused exclusively on large enterprise accounts.  Most of what I’ve done shows up in whitepapers or the stuff you see during the MIX keynotes. 

    My main focus this year will be on the people themselves within PA/NJ/NY.  What makes you guys tick?  What are you looking for out of the teams in Redmond? “But Dave you have all this online stuff you do and I’ve seen you at Code Camps!”  True - for those that know me I’m not a big title guy.  I’ve always felt you shouldn’t let your title dictate what you do.  Go out and fill the needs you see and let them figure out your title.  This change is a recognition of that work.  It frees me up so that I can spend more time directly with you – the users of Microsoft software no matter the venue.  Whether you work for a Microsoft Partner, a Corporation, attend a Code Camp, run a User Group, go to a Conference or sit in on a Launch Event I’ll be there! 

    Astronomy Club

    I’ve always been a “community” guy at heart.  Going back to high school I proudly lead the Astronomy Club.  I know – so geeky right?  It didn’t matter.  It was a place for us to relax and learn from each other without worrying about the school’s agenda.  That’s what excites me about the communities I have been visiting these past few weeks – passion.  It takes me back to what made all those high school days so exciting.  People are there because they care about their craft and they care about helping each other learn. 

    I hope you’ll let me be part of that.  I’m listening.

    Bookmark and Share

  • DaveDev

    Handling Fullscreen, Snapped and Filled states in Windows 8 Metro Style apps using CSS3 and JavaScript




    Attention – the code in this post has been updated to work with Windows 8 Release Preview.  To find out more details on migrating your app from CP to RP read my post here.


    In my last blog post I discussed the importance of supporting the numerous shapes and sizes Windows 8 devices will be in our Metro Style Apps.  This post will cover how to handle viewstate changes in our game which happens when the user runs our app side by side with another Metro Style App.

    Scaling to Different Screens



    The Guidelines for snapped and fill views define three states we will need to handle.  The first, full screen, is the default state for all Metro Style Apps.  When a user drags another window onto the screen they have the option of having it become the current running app, snapping the new app to the side, or running it filled.  In the case of a full screen app only one application would be visible so if the user dragged another app onto the screen our application would go into suspend mode after 10 seconds of inactivity (more on app lifecycle in another post).  If they snapped the app our game would go into filled mode.  If they snapped our game then the app they dragged over would move into snapped mode.

    Here are what the three different states look like:


    In the below example my game is running full screen as a normal Metro Style App.


    Full screen



    In the snap example I dragged over Internet Explorer onto the screen and was given a slider bar in between both apps.  By moving the slider over to the left I was able to have the game run in a small window and our browser in a larger window.  In this scenario our game will report a snapped Viewstate and Internet Explorer will report Filled.




    If I wanted more screen space for my game I could drag the slider bar over to the right.  This would then send our game into a Filled state and our Internet Explorer window into a Snapped state. 




    It is important to point out I can also rearrange these windows by grabbing the snapped Internet Explorer window and moving it to the left.  This will automatically move our game filled window to the right.  Grabbing either window and moving it off of the bottom of the screen will return the remaining app to full screen mode.


    Detecting Viewstate changes

    The first thing we need to do is define how wide these new screen states will be.  The good news is that Snapped view will always be 320px in width which will make adjusting our game coordinate system much easier.  Filled state will always be the width of the screen minus 320px and snapped state will always be 320px wide.  Let’s go ahead and add a variable to handle the size of snapped view in our calculations.

    var SNAPPED_VIEW = 320;

    Next we need to set up the event handler for any Viewstate changes.  This is done via the ApplicationView class for the current view.  In the below example I am assigning the viewstatechanged event of the current application view to my own onViewStateChanged function. This got a lot simpler for the Windows 8 Release Preview.  We need only add an event listener to the window resize event like so:

    window.addEventListener("resize", onViewStateChanged);


    When onViewStateChanged runs it enumerates through all available viewstates and passes the current view state to a custom function I call showMenu.

    function onViewStateChanged(eventArgs) {
            var viewStates = Windows.UI.ViewManagement.ApplicationViewState, msg;
            var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
            if (newViewState === viewStates.snapped) {
            } else if (newViewState === viewStates.filled) {
            } else if (newViewState === viewStates.fullScreenLandscape) {
            } else if (newViewState === viewStates.fullScreenPortrait) {
                //Currently not supported


    Handling layout changes

    showMenu is the same function I call when my game is first loaded or the user clicks on the AppBar to return to the menu.  This will pause the game for our user when they are dragging in another app to work with.  They can then continue game play when they are ready.  The full updated showMenu function is as follows:

    //Set Up Menu Screen UI Elements
     function showMenu(event) {
         menuEnabled = true;
         txtPlayerName.style.visibility = "hidden";
         txtScore.style.visibility = "hidden";
         imgPlayer.style.visibility = "hidden";
         imgMenu.style.visibility = "visible";
         btnStart.style.visibility = "visible";
         txtVersion.innerHTML = GAME_VERSION;
         txtVersion.style.visibility = "visible";
         txtLevel.style.visibility = "hidden";
         //Detect View State
         if (event === 'snapped') {
             canvas.width = SNAPPED_VIEW;
         else if (event === 'filled') {
             canvas.width = FULLSCREEN_WIDTH - SNAPPED_VIEW;
         else {
             canvas.width = FULLSCREEN_WIDTH;
         //Readjust canvas for Snapped/Filled modes
         canvas.height = window.innerHeight;
         SCREEN_HEIGHT = canvas.height;
         SCREEN_WIDTH = canvas.width;
         //Set boundries to be one ship size
         MAX_X = canvas.width - (SHIP_WIDTH + 20);
         MAX_Y = canvas.height - (SHIP_HEIGHT + 50);
         var menuX, btnX, btnY;
         menuX = (SCREEN_WIDTH - imgMenu.width) / 2;
         btnX = (SCREEN_WIDTH - btnStart.clientWidth) / 2;
         btnY = (SCREEN_HEIGHT - btnStart.clientHeight) / 2;
         imgMenu.style.posLeft = menuX;
         btnStart.style.posLeft = btnX;
         btnStart.style.posTop = btnY;
         //clear screen
         ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);


    Specifically this function changes the width of our game screen and then re-calculates the size of the screen so that our ships will disappear when they hit the edge.  This is done by grabbing the width of the current screen and then calculating in SNAPPED_VIEW.

    //Detect View State
    if (event === 'snapped') {
        canvas.width = SNAPPED_VIEW;
    else if (event === 'filled') {
        canvas.width = FULLSCREEN_WIDTH - SNAPPED_VIEW;
    else {
        canvas.width = FULLSCREEN_WIDTH;
    //Readjust canvas for Snapped/Filled modes
    canvas.height = window.innerHeight;
    SCREEN_HEIGHT = canvas.height;
    SCREEN_WIDTH = canvas.width;


    Now that we are properly handling viewstate changes and adjusted our coordinate system correctly we need to update our game user interface.  All Metro Style Apps will have predefined layouts for their viewstates thanks to CSS3 Media Queries.  If you haven’t worked with CSS3 Media Queries much before I highly recommend Responsive Web Design by Ethan Marcotte.  He takes you through designing a website application that adapts its screen layout based on different screen sizes and device form factors.  

    The default Metro Style App templates automatically do this for us by seting up media queries inside the default.css file.  This is where you can adjust layout for all viewstates as well as portrait and landscape.

    @media screen and (-ms-view-state: fullscreen-landscape) {
    @media screen and (-ms-view-state: filled) {
    @media screen and (-ms-view-state: snapped) {
        #imgMenu {
            -ms-transform: translate(0px, 0px) rotate(0deg) scale(0.50);
        #btnStart {
            -ms-transform: translate(0px, 0px) rotate(0deg) scale(0.60);
        #txtNewLevel {
            -ms-transform: translate(0px, 0px) rotate(0deg) scale(0.30);
        #imgPlayer {
            opacity: 0;
        #txtLevel {
            -ms-transform: translate(-120px, 0px) rotate(0deg) scale(0.30);
        #txtPlayerName {
            -ms-transform: translate(70px, 0px) rotate(0deg) scale(0.30);
        #txtScore {
            -ms-transform: translate(0px, 0px) rotate(0deg) scale(0.30);
    @media screen and (-ms-view-state: fullscreen-portrait) {


    Due to Filled viewstate only shrinking by 320px I found all of my on screen elements to look fine as is. 

    Snapped mode presented some challenges as I needed to shrink both the gamescore, player name, and level texts.  A lot of what you will do here is through trial and error.  I kept tweaking the scale until it “felt right.”  I chose to use CSS3 2D Transforms to scale out the text so that it filled the screen correctly at the same time remaining readable.  I chose to drop the player image when in this mode as it became too small to be of any value.  Here is a screenshot of the new snapped user interface layout while the game is being played.


    You will notice I kept the sizes of the ships the same.  I am currently debating whether I should scale them down or change the direction of the ships to vertical.  This would almost give a different game experience when in snapped mode.  That is the beauty of CSS3 Media Queries in action as we can completely change what elements look like based on the screen size.



    I hope this post has given you an idea of how easy it is to handle Viewstate changes in your Metro Style App using CSS3 and JavaScript.  If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it!

    You may also want to check out my previous Windows 8 Metro Style Development Tips:

Page 1 of 68 (272 items) 12345»