By Beverley A. Laundry

    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:

      [sourcecode language="xml"]
      <phone:PhoneApplicationPage

      xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

      shell:SystemTray.IsVisible="False"

      >[/sourcecode]

      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:

      -          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.

      -          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:

      [sourcecode language="xml"]
      <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>
      [/sourcecode]

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

      [sourcecode language="csharp"]
      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;
      }
      [/sourcecode]

      The fruit object itself looks like this:

      [sourcecode language="xml"]

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

      [/sourcecode]

      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?


      Tags: , , ,
      Posted in Uncategorized |

      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.

      Read the rest of this entry »


  1. Site and Contents copyright Beverley Laundry 2010