1
2
3
4
5
6

Updated Video of Hungry Castaway - An XNA Game for Windows Phone 7

Two weeks ago in my post Pre-Alpha Videos of My Windows Phone 7 Games in Development I posted a short video of a game called 'Hungry Castaway' that I am working on with one of my friends for Windows Phone 7. At that point I had only gotten as far as replicating a concept I had done in Silverlight over to XNA. Now that I've had two weeks to get some work done I wanted to post an updated video.

click here to watch at a larger size

At 0:44 into the clip the video skips ahead to show more hectic gameplay to give an example of how the gameplay scales based on skill. Please keep in mind this game is still early on, so the gameplay in this video likely doesn't reflect the final game.

Pre-Alpha Videos of My Windows Phone 7 Games in Development

It has been mentioned a few times in the last month or so that if you want a Windows Phone 7 test device, then you need to be showing why you deserve one. Most notably, Brandon Watson has laid out a post showing 2 such examples, and listing 6 suggestions of how to garner the @wp7dev team's notice. Well, I'm going to take those 6 suggestions, and respond to each - because I want a friggin' test device.

1) Get the tools and start building apps.
I am working on 3 games independently, as well as several at IQ.
2) Blog about your development progress. Screenshots and videos help a lot.
See #3
3) Tag posts with "Windows Phone 7 Development" or "wp7dev" so that we, and other developers, can find you.
Windows Phone 7 Posts on SmartyPantsCoding.com
4) Build something which extends the platform and can be used by other developers.
How to use the Facebook Developer Toolkit with Windows Phone 7
My Windows Phone 7 Pivot Control

5) Post videos of your apps running in the emulator to youtube
See new preview videos below (hopefully Vimeo is alright)
6) Register in the Windows Phone Marketplace.
Done.

To put things in context, I had no intention of posting any videos of my WP7 side projects anytime soon. I hope (read: pray) that folks watching these videos understand that both of these games are very much in the pre-alpha / proof-of-concept state at this point, and honestly any sort of feedback at this point would be very premature.

Pre-Alpha Preview Video of Matchingo 2
This first video showing Matchingo 2 is a very rough port of the original Matchingo - this game will be getting a complete frontend overall and hopefully some pretty cool additions. The UI in the video below is 100% temporary.

Pre-Alpha Preview Video of Hungry Castaway
This second video is showing Hungry Castaway, which is in the proof-of-concept stage as well. This is the game I have been working on in both XNA and Silverlight versions, which I've referenced recently. I spent quite some time evaluating Silverlight vs XNA for this game, but I have now chosen XNA and am back to focusing on functionality.

There is a third game I am working on for WP7 as well, however it is way too early to show anything. I also would love to port ImageWind.net to WP7 - but I have to get a better understanding of if such an app can make it through the app approval process. Now that a few of the cats are out of the bag, I guess I better get back to work.. ;)

Example Pivot Control for Windows Phone 7

I know I said I was done trying to recreate the Pivot control, but I'm happy to be able to share a standalone Pivot control that I've been working on. Keep in mind that a real Pivot control from Microsoft should eventually be released, so this control is not intended to be used in your final production code.

First, download the attached SmartyPantsPivotLibrary_Release1.zip, extract it, and add a reference in your project to SmartyPantsPivotLibrary.dll. Next, add a reference in your MainPage.xaml to the library like this:

xmlns:spcoding="clr-namespace:SmartyPantsPivotLibrary;assembly=SmartyPantsPivotLibrary"

Next, add an instance of the PivotControl inside of the ContentGrid in your MainPage.xaml:

        <Grid x:Name="ContentGrid" Grid.Row="1">
            <spcoding:PivotControl>
                <spcoding:PivotControl.PivotPages>
                    <spcoding:PivotPage PageTitle="main">                        
                        <spcoding:PivotPage.Content>
                            <TextBlock>main section goes here</TextBlock>
                        </spcoding:PivotPage.Content>
                    </spcoding:PivotPage>
                    <spcoding:PivotPage PageTitle="options">
                        <spcoding:PivotPage.Content>
                            <TextBlock>options section goes here</TextBlock>
                        </spcoding:PivotPage.Content>
                    </spcoding:PivotPage>
                    <spcoding:PivotPage PageTitle="about">
                        <spcoding:PivotPage.Content>
                            <StackPanel Orientation="Vertical">
                                <TextBlock>about section goes here</TextBlock>
                            </StackPanel>
                        </spcoding:PivotPage.Content>
                    </spcoding:PivotPage>
                </spcoding:PivotControl.PivotPages>
            </spcoding:PivotControl>
        </Grid>

As you can see by the XAML definition above, you are basically adding a PivotControl, and then populating PivotPages with multiple PivotPage entries. A PivotPage is defined as having a PageTitle property (what appears across the pivot menu across the top) and a Content property (what shows up in the main content area for each pivot page).

One other thing you may want to use are two events that tell you when the pivot pages are being dragged around - by listening to these events you can make sure the user doesn't accidentally click on something while changing pages (more on this in the video below):

MainPivot.PivotPageMoving += (s, e) => { _ignoreClicks = true; };
MainPivot.PivotPageDoneMoving += (s, e) => { _ignoreClicks = false; };

Below is a quick video showing how to use the control and discussing a bit more about it, you'll find the example project attached to this post:

As a side note, I have been unable to get this control to work in a large project I had already been working on - for some reason an unhandled Application level exception occurs after changing pages from time to time - unfortunately the exception provides no details and the call stack only shows internal methods. So, this control is provided AS IS - I won't really know how well this works until others try and use it. I also am not committed to maintaining this control, but if you improve on the code and would like to have the code posted updated please feel free to let me know.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 3]

This is part 3 - the final part - of how to create a Pivot style application for Windows Phone 7. Attached is the sample project and code for this example.

The screencast starts off in Blend and shows how to create the endless pivot menu across the top. After that the screencast dives into the code hooking up our new pivot menu and changing how the content area works. The last 15 minutes or so of the screencast is a bit long winded, but talks about issues you might run into when trying to use this code in a more feature rich application.

After using this method of creating a Pivot style application for a project for my employer, I've decided that hand rolling one of these things is way too much of a pain. I hope these videos will help those of you who can't wait for the real Pivot control release, but be aware that the devil is in the details for this approach - and there are a lot of little details. It's also worth noting that if I had to do it over again I may have made use of WriteableBitmaps to prevent some of the accidental interactions that can occur when you have interactive elements inside of a pivot page.

On a side note, while working on this screencast and trying to make use of the Pivot in an application I also attempted to create a standalone Pivot control. Unfortunately I could never get it quite stable enough, and after spending so much time on these screencasts I don't have any desire to revisit it and try to get it working - perhaps that will change if the real pivot control still hasn't arrived in another month or so. In the mean time, I've got some WP7 applications and games I want to get to work on.

Preview of My Current Windows Phone 7 Pivot Work

I got some feedback after part 1 and part 2 of how to create a Pivot style for your Windows Phone 7 application - what I had created had a few issues. First, the pivot menu items across the top of the screen is supposed to be an endless scrolling menu. Second, there wasn't supposed to be an overlay of each pivot page on the edge like there is in the Panorama style.

I took a closer look at exactly how the Pivot control should look and interact. In the process I noticed that the Zune HD's pivot menu is actually different - it doesn't have an endless menu across the top. I also noticed that the menu on my AT&T U-Verse box uses the pivot style as well (not surprising, it runs on a Microsoft Media Room) - and it doesn't endlessly repeat either. The only way I could try and figure out exactly how it should look was by looking at the hacked ROM that showed up on the web right after MIX.

Above is a video of my current Pivot app (on right) working very closely to what can be found in the Photos application in the hacked WP7 ROM (on left). This was built by modifying the code from Creating a Windows Phone 7 Metro Style Pivot Application [Part 2]. I was hoping to get the code posted before heading out of town, but there is still some tweaking left to do - I will be posting a part 3 sometime next week.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 2]

Note: It has been noted that this demo and code more closely follow how to create a Panorama style application than a Pivot style application. I hope to fix that in the next part to this series - sorry for the confusion.

This is part two of how to create a basic Windows Phone 7 application that follows the Pivot style of navigation (you can find part one here). Part two of this screencast is focused on using manipulation events to provide gesture support for the Pivot style of navigation.

(click here to go to Vimeo and watch in HD)

In the screencast I reference a few other posts on this same topic, you can check those out here:
[WP7] Create a panoramic view using Silverlight
Panoramic Navigation on Windows Phone 7 with No Code!

The code from this step of the app can be found here. Please leave any suggestions about the code and/or update it yourself - I may or may not be updating it going forward depending on other solutions that come about. I hope to continue similar screencasts over the coming weeks/months, and would definitely appreciate any feedback on how to improve these going forward.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 1]

Note: It has been noted that this screencast and part 2 more closely follow how to create a Panorama style application than a Pivot style application. I hope to fix that in the next part to this series - sorry for the confusion.

Recent Presentation at the Atlanta Silverlight Meetup

image courtesy of @ideakitchn

Last week I got the opportunity to present at the Atlanta Silverlight Meetup. I presented a talk entitled 'Thinking Outside the Battleship Gray Box' primarily focused on UI manipulations. Here was the synopsis:

As developers, we’ve grown accustomed to the confines of the technology platforms available to us. With new platforms like WPF and Silverlight, developers must change their perceived limitations and learn how to think outside the box to create engaging experiences. How can we use new presentation layer technologies to create more engaging applications and break away from the traditional battleship gray windows application?

The talk made reference to my posts Thinking Outside the Box - Using Programatic Animations in Silverlight and Street Fighter Style UI Compositing With Prism. You can find a screencast recording from the event below.

Another WPF Grab Bag

I'm still playing with WPF pretty routinely. I haven't posted much because I'm enjoying learning and playing more than writing about it, and honestly there is such a wealth of tutorials (in video, book, and article formats) that me writing about it is pretty useless unless it is covering some issue I really struggled with. I am considering writing a getting started with WPF guide eventually though, because all of the great resources for learning are spread around in a million places.

So far I am not running into major roadblocks, other than perhaps small things like using XMLDataProvider for an XML data island in XAML - if you do this always be sure to put xmnls="", because if no namespace is defined (even a blank one) then your bindings will not work - because it inherits the namespace of the XAML document itself. Little stuff like this really doesn't warrant writing a whole article, its just one of those little things you pick up on. So, until next time I'll just post more k-rad stuff going on with WPF..

First off, .Net 3.5 SP1 was released on Monday - the word on the street is that this is the 3rd major revision to WPF, with the first being .Net 3.0, the second being .Net 3.5, and then now 3.5 SP1 - it sounds like WPF really got a bunch of focus in this service pack. It includes a built in DataGrid for WPF, moves bitmap effects to the hardware tier for better performance, includes built in support for quick loading splash screens, and new control named D3Dimage - a way to use Direct3D right inside WPF. There is a video right now on Channel9 which shows off some of the new graphic abilities in SP1, it is definitely worth checking out.

I just got my hands on a new book, Programming WPF, after reading a ton of Amazon reviews. I would post more in this blog entry, but honestly I'm ready to get crackin' on this new book - until next time!

CodingTags: