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 x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

         <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="My Application" Style="{StaticResource PhoneTextNormalStyle}" Foreground="#FFFF3DC4" />

            <TextBlock x:Name="PageTitle" Text="Text Orientations" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="#FFCE1A1A" />

        </StackPanel>

         <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1"   Margin="12,0,12,0" Background="#FF000096">

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,47,0,0" Name="textBlock1" Text="Name" VerticalAlignment="Top" />

            <TextBox Height="72" HorizontalAlignment="Left" Margin="143,27,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="307" Background="#BF40CE15" />

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,0,0,164" Name="textBlock2" Text="AGE" VerticalAlignment="Bottom" />

            <TextBox Height="72" HorizontalAlignment="Left" Margin="143,105,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="307" Background="#BF23B439" />

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="42,203,0,0" Name="textBlock3" Text="ADDRESS" VerticalAlignment="Top" />

            <TextBox Height="72" HorizontalAlignment="Left" Margin="143,183,0,0" Name="textBox3" Text="" VerticalAlignment="Top" Width="307" Background="#BF2DC15A" />

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="28,0,0,6" Name="textBlock4" Text="MOBILE NO." VerticalAlignment="Bottom" />

            <TextBox Height="72" HorizontalAlignment="Left" Margin="143,261,0,0" Name="textBox4" Text="" VerticalAlignment="Top" Width="307" Background="#BF159332" />

            <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,359,0,0" Name="textBlock5" Text="City" VerticalAlignment="Top" />

            <TextBox Height="72" HorizontalAlignment="Left" Margin="143,339,0,0" Name="textBox5" Text="" VerticalAlignment="Top" Width="307" />

        </Grid>

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

•  Orientation Hint for Windows Phone7
• Working with Silverlight and XNA windows phone 7 application Orientation
• Create a Watermark TextBox Effect from Windows Phone 7
• Capturing Screen Resolution Information