31
Aug
2010

Introducing XPF – A Layout Framework for XNA

by David Wynne

Update (2012-07-05): XPF to be open sourced

We’re very proud to announce the public beta of XPF – a layout framework for XNA on Windows & Windows Phone 7.  For too long performing 2D layouts in XNA has been an arduous task, the simplest of layouts often produces verbose and inelegant code.  If you’ve come from a WPF/Silverlight background, where fluid and logical layouts are second nature, the inability to combine XNA with WPF and/or Silverlight only compounds the frustration.  With XPF, Red Badger is addressing this problem.

Familiar Development Experience

XPF has been specifically designed to be familiar to WPF & Silverlight developers and comes with a collection of out of the box controls, that can be composed together to create flexible layouts in no time at all.  The beta launches with the following controls:

  • Border
  • Button
  • ContentControl
  • Grid
  • Image
  • ItemsControl
  • RootElement (similar to Window)
  • ScrollViewer
  • ScrollContentPresenter
  • StackPanel
  • TextBlock

XPF also supports Dependency Properties, Attached Properties, Animation (currently WP7 only) and Data Binding (one and two-way).

Pure XNA

XPF is designed to run in a pure XNA application, it doesn’t host XNA inside a WPF or Silverlight application.  All the controls have been written from the ground-up to work in XNA 4.0 and fit into XNA’s Update & Draw game loop.

Extensible

XPF has been designed to be modular and extensible in two key ways.  Firstly, creating custom controls to use alongside the controls you get out of the box is easy.  If you’ve ever created a custom control in WPF or Silverlight, using the 2 phase measure and arrange layout system, then XPF gives an almost identical experience.

Secondly, the integration point between XPF and your XNA application has been designed to be extremely flexible.  XPF doesn’t really know anything about XNA, it’s written entirely around agnostic interfaces – so whilst XPF comes with a renderer that you can use out the box, should you want to create your own, or integrate to an existing engine, you simply have to satisfy a few core interfaces.

Try It

As XPF reaches completion we’re looking for early adopters, testers and feedback.  Nightly builds of XPF for Windows and Windows Phone 7 are now available for you to try.  Download a build and read the Getting Started blog now!

We’d really love to hear what you have to say – leave a comment, shoot us an email or find us on twitter @redbadgerteam.


  • http://sharky.bluecog.co.nz/ Sharky

    Cool! Always liked the Grid layout in XAML (Silverlight/WPF), and have had a pretty basic attempt at emulating it in "Air Legends" and Game #2 (in progress). But only as a helper class really.

    Looks like you guys have taken a lot further which is awesome to hear. Will be following your progress keenly.

  • http://www.gulix.fr/ Gulix

    I’m planning to (re)make a game in XNA in september, and whereas I like XNA, I planned to test it in WPF, cause of the layout which will be far easier to do with Grid and other stuff than in XNA.
    Now, one day before I start, I find XPF, and it seems to mix what I need from two worlds.
    Thanks guys ! I’ll give it a try and follow you to build it !

  • http://red-badger.com/ David Wynne

    That’s great to hear – we’d love to see how you end up using XPF. Obviously we’re still working on the framework, but let us know if you have any problems or feature requests and we’ll do our best to prioritise accordingly! http://feedback.red-badger.com

  • http://speps.fr/ Remi Gillig

    We demand screenshots :D

  • http://red-badger.com/ David Wynne

    Hey Remi,
    Check out the Getting Started post:
    http://red-badger.com/Blog/post/XPF-Getting-Started.aspx

    More on it’s way! :)

  • http://bittermanandy.wordpress.com/ Andy P

    This looks really cool. I was just about to start work on the UI for my game and was expecting days of pain, just to come up with something not very good (lacking the time to make something better). This looks like it ticks all the right boxes! Can’t wait to start using it.

  • http://dkdevelopment.net/ Damian Karzon

    Great work on the framework so far!
    I’m trying to work out how to load an Image from the XNA Content can you help me out a bit?

  • http://red-badger.com/ David Wynne

    Hey Damian – thanks!
    It is a little long winded to create an image because we needed to a) abstract away the use of Texture2D; and b) try and keep the API familiar to SL/WPF. Anywho – here’s the code you need:

    var image = new Image { Source = new XnaImage(new Texture2DAdapter(this.Game.Content.Load<Texture2D>("YourImage"))) };

  • http://dkdevelopment.net/ Damian Karzon

    Thanks David, I’ll give it a go and let you know how I go!

  • http://dkdevelopment.net/ Damian Karzon

    Hoping you could give me a hand with the button control. Trying to use XPF for some of my menus. I’ve added the button with an image to my grid (inside the root element) and that all works fine. I also added to the Click event but the event doesnt seem to fire is there something I have to do differently under WP7 for say a gesture instead of click?

    Would it be better to email you?

  • http://red-badger.com/ David Wynne

    Make sure when you create your RootElement you pass an instance of the InputManager:

    this.rootElement = new RootElement(this.GraphicsDevice.Viewport.ToRect(), renderer, new InputManager());

    If that doesn’t work – feel free to email me; david dot wynne at red-badger.com

  • Quantumplation

    I’m trying to implement a custom control derived from Items Control, but the ItemTemplate is a parameterless function. How am I supposed to customize the item template to the specific item? Without access to which item the template is supposed to represent, every item is displayed the same way.

  • http://red-badger.com/ david.wynne

    @Quantumplation you need to use Data Binding to drive the customisation of each item. Each item in the Items Control will have a DataContext set to it’s relative item from the ItemsSource which you can bind to. Checkout the post on Data Binding for more info: http://red-badger.com/Blog/post/Inside-XPF-Data-Binding.aspx

    If you have a specific example you’d like some more help on feel free to email me david dot wynne at red-badger.com. HTH.

  • http://red-badger.com/ David Wynne

    I’ve just posted a blog post all about the ItemsControl and using DataBinding if you’re still after some more info: http://red-badger.com/Blog/post/XPF-Control-Tour-ItemsControl.aspx

  • Eric

    Awesome, I’ve been thinking about jumping into XNA from WPF but I was always turned off by the 2D layouts. This looks promising. =)

  • Quantumplation

    =) Been busy with work/life for 2 weeks, so I haven’t coded much. Just came back to it today and was absolutely delighted to see the blog post. I realize now it was an incredibly silly question, since I spent 6 months writing some custom software for someone in WPF. 1 month outside the WPF world really wiped me clean, it seems!

    Out of curiosity, did you make the blog post in response to my comment, or was it planned all along? =P

  • http://red-badger.com/ David Wynne

    50/50 – let’s just say that we’ve got so much we need to blog about, that your comment (along with some other feedback) moved the ItemsControl and Data Binding to the top of that list :)

  • http://www.gametard.com/ Gametard

    thanks for the daily builds :)

  • Pingback: XPF to be open sourced - Red Badger

  • disqus_C1jW5Iu6q1
  • Jessie Roden

    It is a great post to me. I am astonish for this post.I want that will give us more important information.So carry on