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?


    27
    08
    10

    Masters Progress : New Toy :o)

    On Monday this week, my new toy arrived in the Interaction Design Lab; A 21.5” optical multi-touch monitor from the folks at Dell.

    I’ve just recently started a MSc (in Computer Science) at The University of Waikato. My research area is all around digital music stand technology. I’m currently working on an application to display sheet music in crisp scalable vector format, the idea being for musicians to be able to view, edit and interact with their sheet music in ways that are either difficult or not possible with a printed page. I really want to take advantage of the modern trend toward touch and multi-touch displays to develop and cool and hopefully intuitive interface.

    I have two years experience in iOS development, so my first inclination was to develop for iPad. The iPad though has a miserably small screen for viewing music on (it’s roughly ½ the size of a standard A4 page). Another issue is that the iPad, due to its capacitive touch screen, doesn’t take stylus input. Sure you can buy specially designed styli that mimic the capacitance of the human finger, or get one of those shrink wrapped sausages that the Koreans use, but basically you have a finger sized input mechanism. This is really no good for fine annotations that musicians tend to make on their sheet music. Combine clumsy input with small screen and basically my app would be crippled from the start. Instead, I’ve decided to work on a real sized screen that’s big enough to display two standard pages side by side (like an open book of sheet music). Enter Dell SX2210T multi-touch monitor.

    The Dell SX2210T monitor is a 21.5” optical multi-touch monitor. It handles two touch points and being optical touch, responds to finger, stylus, [insert pointy object here]… it has 1920 x 1080 resolution and supports the built-in Multi-touch features of Windows 7. $499.00 (NZD) from dell.co.nz. And it’s totally “the shizzle”.

    Developing with WPF gives me full glorious access to the touch events, so now, after years of thinking “ooooh, WPF looks like fun, I should totally learn how to make spinny cubes” I finally have an excuse to take action. Over the past couple of weeks, I’ve been slowly learning the ropes. After a fair share of frustrations with Binding syntax and taking some time to setup what I think is MVVM, I have bars of sheet music stored as XAML drawingbrush resources, loaded and displayed, cleanly filling a window, with each bar selectable, zoomable and cuttable. This all works with standard mouse input so far as, up until Monday afternoon, I was just working from my Dell Inspiron 1520 which is a little lacking in multi-touch capabilities. Now that I have the monitor (and it works perfectly even with my 3.5 year old laptop) I’ve started playing with multi-touch.