By Beverley A. Laundry
Pumpkin Orange - Life as a Grownup

  1. 16
    11
    10

    Two fun WP7 development Fakts

    1) StatusBar != StatusBar

    The statusbar at the top of the screen, referred to as “StatusBar” in the official WP7 interface design document and pretty much everywhere else, is not called a “StatusBar” in code. To set the visibility of the “StatusBar” in xaml, in your page:

    <phone:PhoneApplicationPage
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        shell:SystemTray.IsVisible="False"
    >
    

    Apparently it’s actually called the “SystemTray”. This caused me hours of fruitless Googling “WP7 Hide StatusBar” when trying to figure out how to get rid of it in my fullscreen WP7 game, and I was a little annoyed at the end of it.

    2) Generating XAML content in Expression Design for use in a WP7 game

    For years now, Expression Design has been my favourite piece of vector graphics software. During my career as an iPhone application developer, essentially all graphic content of the apps I developed was made in Expression Design and exported to PNG or TIFF. This didn’t take any advantage of the vectory goodness other than to allow me to easily resize and re-export when I mucked up required sizes etc. but due to the simplicity and elegance of the software, made my job more enjoyable.

    My masters project (a sheet music reader/annotator/organiser) however is positively dripping in vectory goodness. In this I have used Expression Design to export XAML drawing brushes for each bar of music displayed. This gives me smoothly zoomable music that looks, dare I say, fantastic. Anyway… moving on the grunt of this Fakt:

    When I started developing FruitSalad for WP7, I decided to make it in Silverlight instead of XNA, so as to enable use of pure XAML graphic content. There were a few stumbling blocks on my way to getting this to work though:

    3) Silverlight for WP7 doesn’t support DrawingBrush

    So my WPF approach of creating a DrawingBrush for each graphical resource (in this case, each piece of fruit) and binding in to the Fill property of a rectangle (or Backrground property of a Grid panel) would not work at all.

    4) Silverlight for WP7 doesn’t support ViewBox

    Due to the complicatedness of each of my pieces of fruit, simply ctrl+shift+c –ing to copy the XAML used a combination of Canvas, Path and ViewBox objects. Not supported.

    My solution: Use Expression design to export as XAML Silverlight 3 Canvas. This created simple enough XAML to use in a XAML app.

    My next issue was how to actually use these Canvas items in such a way that I didn’t need to create a separate UserControl for each different type of fruit in my game. Ideally what I wanted to do is have a Fruit object that changed its Content to the appropriate Canvas for its fruit type.

    I couldn’t figure out how to do this sensibly, but did come up with an incredibly convoluted solution. The main problem I encountered was that I wasn’t able to Bind a StaticResource to the Content property of an element. So what I ended up doing was creating a Button Style Template for each type of fruit:

    <Style x:Key="WatermelonBlock" TargetType="Button">
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="Button">
    <Grid HorizontalAlignment="Left">
    <!– The Exported XAML Canvas –>
    <Canvas …. />
    </Grid>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    

    Then apply the appropriate style when the fruit type of the control is set:

    private static void OnTypeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        FruitView view = d as FruitView;
        //Get the string key for the type eg "WatermelonBlock"
        string styleString = view.GetStyleString(view.Type);
        Style fruitStyle = view.Resources[styleString] as Style;
        view._RootButton.Style = fruitStyle;
    }
    

    The fruit object itself looks like this:

    <UserControl>
    <Grid>
    <Button x:Name="_RootButton" Style="{StaticResource WatermelonBlock}" Click="Button_Click">
    </Grid>
    </UserControl>
    

    I think this is a messy solution, but at least it works. If anyone can find a better way to do this, I’d love to hear about it.

    So those are two of the roadblocks I reached when starting out with WP7 development. I hope my solutions can help others to convert fruitless Googling and forum searching into productive coding time. But where’s the fun in that?


    1
    11
    10

    WP7 Challenge

    So, with 5 days before closing I decided to make a WP7 game to enter into the NZ WP7 challenge

    www.microsoft.co.nz/wp7challenge

    This is what I came up with: Fruit Salad.

    NZ WP7 Challenge - Fruit Salad Submission Video

    Now, bare in mind this is < 5 days development. And that 5 days included learning how to actually do game development in Silverlight and the several hours of freaking out every time it became apparent that my WPF fueled plan was impossible due to lack of <drawingbrush>, <viewbox>, translate transform bindings … so pretty much .. tremble at the awesomeness of my last minute coding skillz!

    Application Description:

    Fruit Salad

    Fruit Salad is an exciting twist on the typical sorting game, as to play, you need to learn Maori, challenging your memory and dexterity.

    When the game starts two kete (baskets) appear on screen, along with a never ending supply of fruit and vegetables. Sorting will depend on the labels on the kete; you might be sorting the fruit from vegetables, or the green from red.

    Drag and flick kai into the appropriate kete but be careful, if you sort into the wrong kete, or if you let the kai rot, you’ll lose points!

    Tagged: