Post
Ask Question

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".
clock1.gif

clock2.gif

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>


orin2.gif

 

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

orin1.gif

Resources


Similar Articles