2011 October

xna-slider-wide-preview

A Windows Phone 7 Multi Page Slider (XNA)

By | Blog, WP7 | 2 Comments

This time i will not post anything shader or lighting related, but something i created for the Windows Phone 7. I guess you can also use this on a windows platform, but you will have to rewrite some code because i make use of the gestures that are available on the windows phone.

So what is this Multi page slider thingy you are talking about, well om some game you find on the phone they implemented something that allows you to swipe across content. This feel like just browsing though pages (hence the name i used for it…). A video means more then a thousand words so let me just show you what i mean :).

The control you see here is devided into the following sections:

Core components

  • GUIControlsPagerControl.cs – The main component for the page slider
  • GUIControlsPagerPage.cs – The pages component for the slider
  • GUIControlsGUIControl.cs – The abstract class each GUI Control has to derive from

Side Components

  • GUIControlsPagerPageMonitor.cs – This monitors which page currently is active (on the video you see it on the very bottom with 2 dots)
  • GUIControlsGUILabel.cs – These are just created to show content on the pages (as an example how to create controls for the pages)
  • GUIControlsGUIImage.cs
  • GUIControlsGUIButton.cs

The core components are the heart of this control. You just create a PagerControl and add Pages to that control. On that page you will add all the required GUI Controls and your set to go.

Let me show you some example code i used inside the application:


// Intialize our page control
 _pagerControl = new PagerControl { ScrollSpeed = 4.0f };
 _pagerControl.Initialize();

 // Create our first page and add two labels and a button to it
 PagerPage page01 = new PagerPage() { BackgroundColor = Color.Black };
 page01.AddControl(new GUILabel("PAGE SLIDER CONTROL", _headerFont));
 page01.AddControl(new GUIImage("soolstyle_logo") { Position = new Vector2(150, 620) });
 page01.AddControl(new GUILabel("Page 01!", _controlFont) { Position = new Vector2(20, 100) });
 GUIButton button = new GUIButton(this, "Demo 02 Screen", 180, 50, new Vector2(20, 200), Color.White, _labelFont, Color.Black, Color.Black * .6f, Color.LimeGreen);
 button.OnButtonPressed += new ButtonPressedHandler(button_OnButtonPressed);
 page01.AddControl(button);

 // Create our second page and add a label to it
 PagerPage page02 = new PagerPage() { BackgroundColor = Color.Black };
 page02.AddControl(new GUILabel("Page 02!", _controlFont) { Position = new Vector2(20, 100) });

 // Add the pages to the page control
 _pagerControl.AddPage(page01);
 _pagerControl.AddPage(page02);

 // Attach the monitor on the page control
 PagerPageMonitor monitor = new PagerPageMonitor("bullet_background", "bullet");
 monitor.Position = new Vector2((GraphicsDevice.Viewport.Width * .5f) - ((_pagerControl.Pages.Count * 25) * .5f), GraphicsDevice.Viewport.Height - 40);
 monitor.ItemSpacing = new Vector2(5, 0);
 monitor.Initialize();
 _pagerControl.PageMonitor = monitor;

I also use this control inside my newest game for the windows phone called Maladras. Here you can see it in action inside that game:

All the level buttons and header text are part of a Page and at the bottom you can see the page monitor with 4 dots.

I shall leave it with this for now, as always if you got a question about it just leave a reply here!

You can download the application from here:

WP7 Page Slider (XNA) (458)

Note: Excuse me if the code isn’t that pretty, i don’t have a lot of time to even work on my game let alone provide example code. But i try to do my best!! :)