Display TextBox Orientation in Windows Phone7

Introduction

In this article we show text box orientation on a Windows Phone7. Windows Phone 7 users can see text box orientations which are quite simple; just by tilting the device and watching the screen tilt as phones do, but as a developer when that happens we have to handle much of the orientations programmatically as needed. The the builtin sensors play a major role of handling the text box orientations for the developers to design the application so it looks easy for the end users to use the application effectively. We can make use of these orientations in a page level so that for each of the pages we can specify a different orientation for better usability.

In the Windows Phone 7 development by default the screens are in a horizontal mode and we have 2 types of supported Screen Orientations as below:

Portrait
Landscape

Step 1: Open Visual Studio.

Select new -> project
Select your preferred language
Select Silverlight for Windows Phone application
Name the project
Now name of project is "WindowsPhoneApplication".

Step 2: To start, create a new Windows Phone application. In the Windows Phone application we take four TextBoxes add four TextBoxes horizontally.

Code

<phone:PhoneApplicationPage

x:Class="textorientations.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Landscape" Orientation="Landscape"

shell:SystemTray.IsVisible="True">

!--LayoutRoot is the root grid where all page content is placed-->

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

Step 3: Now in this step we define a MainPage.xaml.cs file. In a cs file we set a Portrait Orientation, Landscape Orientation and set both orientation Landscape and Portrait.

Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace textorientations

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

// Portrait Orientation

SupportedOrientations = SupportedPageOrientation.Portrait;

// Landscape Orientation

SupportedOrientations = SupportedPageOrientation.Landscape;

// For Lanscape and Portrait

SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;

}

Step 4: Now to run the application, press F5.

Output

Resources