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:

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

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

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


      Tags: , , ,
      Posted in Uncategorized |

      28
      09
      09

      A Promising Beginning


      A brand new blog, a brand new outlet for ranting about life the universe and everything. But don’t worry, rants needn’t be negative. I am well and truely capable of rambling on about exciting and happy things going on in my life. For example…

      I totally just had an HTML success. Sounds too good to be true, I know. I’ve built a couple of websites in my life, some have even made it onto the actual interwebs. I’ve grown from a table-happy n00b to a major div hog, I’m even trying to break the unscalable-pixel-defined-layout habbit. Throughout my adventures with divs, there’s always been one thing I couldn’t get my layout to do: fill the height of a window nicely with a properly positioned header and footer and expanding content within.

      And this is how I did it:

      <html>
      <body>
      <div class="container">
      <div class="innerContainer">
      <div class="header"></div>
      <div class="content">
      //Main site content goes in here. If using "float"ed elements, stick a .clear div before closing the content div.
      </div>
      <div class="clear"></div>
      </div>
      <div class="footer"> </div footer>
      </div>
      </div>
      </body>
      </html>

      with css:

      html{ height:100%}
      body{height:100%}
      .container{min-height:100%}
      .innerContainer{height:100%}
      .footer{position:relative; top:-50px;  height:50px; }
      .clear{clear:both}

      And I think that’s all. It took me a while to find a combination of divs with the right heights to pull this off. While writing it out, I may have missed the random step that actually makes it work. I hope not.

      And with that, a blog is born.


      Tags: , ,
      Posted in Uncategorized |
  1. Site and Contents copyright Beverley Laundry 2010