Working with Silverlight and XNA windows phone 7 application Orientation

The first SizeChanged event occurs when the page is created and laid out, that is, when the content grid changes size from 0 to a finite value:

Orientation Events: To set SupportedOrientations to PortraitOrLandscape, and try to write orientation-independent applications, Obviously there is more to handling orientation changes than just setting the SupportedOrientations property. If you need to perform any special handling, both PhoneApplicationFrame and PhoneApplicationPage include OrientationChanged events. PhoneApplicationPage supplements that event with a convenient and equivalent protected overridable method called OnOrientationChanged.

The MainPage class in the SilverlightOrientationDisplay project shows how to override OnOrientationChanged, but what it does with this information is merely to display the current orientation. The content grid in this project contains a simple TextBlock:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Name="txtblk"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>

Here's the complete code-behind file. The constructor initializes the TextBlock text with the current value of the Orientation property, which is a member of the PageOrientation enumeration:

using System.Windows.Controls;
using Microsoft.Phone.Controls;
namespace SilverlightOrientationDisplay
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
txtblk.Text = Orientation.ToString();
}
protected override void OnOrientationChanged(OrientationChangedEventArgs args)
{
txtblk.Text = args.Orientation.ToString();
base.OnOrientationChanged(args);
}
}
}

XNA Orientation

By default, XNA for Windows Phone is set up for a landscape orientation, perhaps to be compatible with other screens on which games are played. If you prefer designing your game for a portrait display, it's easy to do that. In the constructor of the Game1 class of XnaHelloPhone, try inserting the following statements:

graphics.PreferredBackBufferWidth = 320;
graphics.PreferredBackBufferHeight = 480;

It's also possible to have your XNA games respond to orientation changes, but they'll definitely have to be restructured a bit. The simplest type of restructuring to accommodate orientation changes is demonstrated in the XnaOrientableHelloPhone project. The fields now include a textSize variable:

Example

public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
string text = "Hello, Windows Phone 7!";
SpriteFont segoe14;
Vector2 textSize;
Vector2 textPosition;
…
}

The Game1 constructor includes a statement that sets the SupportedOrientations property of the graphics field:

public Game1()
{
graphics = new GraphicsDeviceManager(this);
Content.RootDirectory = "Content";
// Allow portrait mode as well
graphics.SupportedOrientations = DisplayOrientation.Portrait |
DisplayOrientation.LandscapeLeft |
DisplayOrientation.LandscapeRight;
// Frame rate is 30 fps by default for Windows Phone.
TargetElapsedTime = TimeSpan.FromTicks(333333);
}

Simple Clocks (Very Simple Clocks)

you can attach handlers to events entirely in code as well. One handy class for Silverlight programs is DispatcherTimer, which periodically nudges the program with a Tick event and lets the program do some work. A timer is essential for a clock program, for example.

The content grid of the SilverlightSimpleClock project contains just a centered TextBlock:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Name="txtblk"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>

Here's the entire code-behind file. Notice the using directive for the System.Windows.Threading namespace, which isn't included by default. That's the namespace where DispatcherTimer resides:

using System;
using System.Windows.Threading;
using Microsoft.Phone.Controls;
namespace SilverlightSimpleClock
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
DispatcherTimer tmr = new DispatcherTimer();
tmr.Interval = TimeSpan.FromSeconds(1);
tmr.Tick += OnTimerTick;
tmr.Start();
}
void OnTimerTick(object sender, EventArgs args)
{
txtblk.Text = DateTime.Now.ToString();
}
}
}

The constructor initializes the DispatcherTimer, instructing it to call OnTimerTick once every second. The event handler simply converts the current time to a string to set it to the TextBlock.

An XNA clock program doesn't need a timer because a timer is effectively built into the normal game loop. However, the clock I want to code here won't display milliseconds so the display only needs to be updated every second. For that reason it uses the SuppressDraw method to inhibit superfluous Draw calls.

Here are the XnaSimpleClock fields:

Example

public class Game1 : Microsoft.Xna.Framework.Game
{
GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
SpriteFont segoe14;
Viewport viewport;
Vector2 textPosition;
StringBuilder text = new StringBuilder();
DateTime lastDateTime;
…
}

The LoadContent method gets the font and the viewport of the display:

protected override void LoadContent()
{
spriteBatch = new SpriteBatch(GraphicsDevice);
segoe14 = this.Content.Load<SpriteFont>("Segoe14");
viewport = this.GraphicsDevice.Viewport;
}

The logic to compare two DateTime values to see if the time has changed is just a little tricky because DateTime objects obtained during two consecutive Update calls will always be different because they have will have different Millisecond fields. For this reason, a new DateTime is calculated based on the current time obtained from DateTime.Now, but subtracting the milliseconds:

protected override void Update(GameTime gameTime)
{
// Allows the game to exit
if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit();
// Get DateTime with no milliseconds
DateTime dateTime = DateTime.Now;
dateTime = dateTime - new TimeSpan(0, 0, 0, 0, dateTime.Millisecond);
if (dateTime != lastDateTime)
{
text.Remove(0, text.Length);
text.Append(dateTime);
Vector2 textSize = segoe14.MeasureString(text); textPosition = new Vector2((viewport.Width - textSize.X) / 2, (viewport.Height - textSize.Y) / 2);
lastDateTime = dateTime;
}
else
{
SuppressDraw();
}
base.Update(gameTime);
}

If the time has not changed, SuppressDraw is called. The result: Draw is called only once per second.

DrawString also has an overload for StringBuilder:

protected override void Draw(GameTime gameTime)
{
GraphicsDevice.Clear(Color.Navy);
spriteBatch.Begin();
spriteBatch.DrawString(segoe14, text, textPosition, Color.White);
spriteBatch.End();
base.Draw(gameTime);
}

Output Result

Conclusion

I hope this article help you to understand how to managed the orientation in silverlight and xna windows phone 7 application.