WindowsPhone 8.0 vs WindowsPhone 8.1:New ways for detecting Page Orientations on Phone(C#-XAML)

Introduction:

It is very important that your app looks good and functions perfectly in all orientations .And it is the best way to attract app users,fortunately windows phone can provide best strategies for making our app in all orientations ,but in some times we may need to  detect page orientations(portrait up, portrait down, landscape left, landscape right) and dynamically change the our UI design.However previously in windowsphone 8.0 we are detecting page orientations with help of 'OrientationChanged' event,but  in windowsphone store 8.1 this event is directly no longer available,so this post is explained about 'What are the alternative ways for detecting page orientation in wp8.1".In addition this post is explained about "SimpleOrientation" sensor class and how it is useful for detecting page orientations in windows phone store 8.1.

Building the sample:

• Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.
• I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.

• This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.
• This sample is having two projects for both WindowsPhone 8.0 and WindowsPhone 8.1

Description:

Ok,lets start to knowing about page orientations in both windowsphone 8.0 and windowsphone 8.1 .And what's the differences while detecting page orientations 

WindowsPhone 8.0:

In wp8.0 it is very simple,we can detect page orientations with help of OrientationChanged event like

XAML

<phone:PhoneApplicationPage  
    x:Class="OrientationWp8._0.MainPage"  
.............  
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" 
OrientationChanged="PhoneApplicationPage_OrientationChanged">

Here 'SupportedOrientation' defines the orientations that could be supported by your page,'Orientation' defines the current orientation of the page both are available from Microsoft.Phone.Controls namespace  

In c# at corresponding event ,we can get dynamic page orientation changes like this 

C#

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) 
        { 
            PageOrientation orientation = e.Orientation; 

            StatusTxtBlck.Text = "Curren Page Orientation is: " + orientation.ToString(); 
            if (orientation == PageOrientation.LandscapeRight) 
            { 
                txtOrientation.Text = orientation.ToString();//LandscapeRight 
            } 
            else if ((orientation & PageOrientation.LandscapeLeft) == PageOrientation.LandscapeLeft) 
            { 
                txtOrientation.Text = orientation.ToString();//LandscapeLeft 
            } 
             
            else if ((orientation & PageOrientation.Portrait) == PageOrientation.Portrait) 
            { 
                txtOrientation.Text = orientation.ToString();//PotraitUp 
            } 
             
            /******** to check for landscape******/ 
            if ((orientation & PageOrientation.Landscape) == PageOrientation.Landscape) 
            { 
                txtOrientation.Text = orientation.ToString();//Landscape 
            } 
           
        }

If you want to set page to specific orientation ,you can do like this.

C#

private void OrientationBtn_Click(object sender, RoutedEventArgs e) 
        {   
            //to support only landscape 
            SupportedOrientations = SupportedPageOrientation.Landscape; 
 
            //to support only potrait 
            SupportedOrientations = SupportedPageOrientation.Portrait; 
 
            //to support both landscape & potrait 
            SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape; 
        }

for example i taken the following design

XAML

<Grid x:Name="LayoutRoot" > 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
        <Grid> 
            <StackPanel> 
                <TextBlock FontSize="25" Text="WindowsPhone 8.0 Orientations" Name="TileTxt" VerticalAlignment="Top" Margin="10" TextWrapping="Wrap" Foreground="Yellow"/> 
                <TextBox  Name="txtOrientation" VerticalAlignment="Top"  TextWrapping="Wrap" Foreground="#FF1CB8D1"/> 
                <Button Content="Tap here to set your orientation" Name="OrientationBtn" Click="OrientationBtn_Click"/> 
                <TextBlock Name="StatusTxtBlck" Margin="10" /> 
            </StackPanel> 
        </Grid> 
    </Grid> 

and see how above above Ui design effected, when change the page orientations from your emulator toolbar/device rotation 

WindowsPhone 8.1:

So as we have earlier discussion from 'Introduction' section,now 'OrientationChanged' event is no longer available for windowsphone store 8.1 .

However even we miss it,there is two ways for detecting page orientations

• SizeChanged Event
• SimpleOrientation sensor class

1)SizeChanged event:

SizeChanged event is useful for detecting the page orientation changes when it occurs.

XAML

<Page 
    x:Class="OrientationWp.MainPage" 
..... 
SizeChanged="Current_SizeChanged">

and in c# at corresponding event ,we can get dynamic page orientation changes like this 

C#

private void Current_SizeChanged(object sender, SizeChangedEventArgs e) 
        { 
            string CurrentViewState = ApplicationView.GetForCurrentView().Orientation.ToString(); 
            StatusTxtBlck.Text = "Curren Page Orientation is: " + CurrentViewState; 
            if (CurrentViewState == "Portrait") 
            { 
               //To Do UI for potrait 
            } 
 
            if (CurrentViewState == "Landscape") 
            { 
                //To Do UI for landscape   
            } 
        }

2)SimpleOrientation Sensor:

As like previous event 'SizeChanged', SimpleOrientation sensor is also to determine the current device orientation (portrait up, portrait down, landscape left, landscape right) as well as the device's face-up or face-down status.And this class sensor readings which is equlal to page orientations like

Portrait Up         ->  NotRotated

Landscape Left   ->  Rotated90DegreesCounterclockwise

Portrait Down     ->  Rotated180DegreesCounterclockwise

Landscape Right ->  Rotated270DegreesCounterclockwise

Note: To work with SimpleOrientation sensor,The device or emulator that you're using must support an accelerometer.

Ok,lets start work with this sensor class 

Step1:

Get default page orientation,After creating an object for sensor,and finally assign the handle for sensor orientation changed event like this,

C#

private SimpleOrientationSensor _simpleorientation; 
        public MainPage() 
        { 
            this.InitializeComponent(); 
             
            _simpleorientation = SimpleOrientationSensor.GetDefault(); 
            // Assign an event handler for the sensor orientation-changed event 
            if (_simpleorientation != null) 
            { 
                _simpleorientation.OrientationChanged += new TypedEventHandler<SimpleOrientationSensor, SimpleOrientationSensorOrientationChangedEventArgs>(OrientationChanged); 
            } 
        }

Here you should check sensor object whether it is null or not.if it is null means your device doesn't support the above sensor. 

Step2:

In corresponding event ,access page orientation changes like this way,

C#

private async void OrientationChanged(object sender, SimpleOrientationSensorOrientationChangedEventArgs e) 
        { 
            await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => 
            { 
                SimpleOrientation orientation = e.Orientation; 
                switch (orientation) 
                { 
                    case SimpleOrientation.NotRotated: 
                        //Portrait Up 
                        txtOrientation.Text = "Not Rotated"; 
                        break; 
                    case SimpleOrientation.Rotated90DegreesCounterclockwise: 
                        //LandscapeLeft 
                        txtOrientation.Text = "Rotated 90 Degrees Counterclockwise"; 
                        break; 
                    case SimpleOrientation.Rotated180DegreesCounterclockwise: 
                        //PortraitDown 
                        txtOrientation.Text = "Rotated 180 Degrees Counterclockwise"; 
                        break; 
                    case SimpleOrientation.Rotated270DegreesCounterclockwise: 
                        //LandscapeRight 
                        txtOrientation.Text = "Rotated 270 Degrees Counterclockwise"; 
                        break; 
                    case SimpleOrientation.Faceup: 
                        txtOrientation.Text = "Faceup"; 
                        break; 
                    case SimpleOrientation.Facedown: 
                        txtOrientation.Text = "Facedown"; 
                        break; 
                    default: 
                        txtOrientation.Text = "Unknown orientation"; 
                        break; 
                } 
            }); 
        }

If you want to set page to specific orientation ,you can do like this.

Note: Above 'OrientationChanged' changed event will not be fire,when we set orientaion through code.And it will be fire only when user switch the orientation from emulator toolbar/device rotations. 

C#

private void OrientationBtn_Click(object sender, RoutedEventArgs e) 
        { 
            /***To support both***/ 
            DisplayInformation.AutoRotationPreferences = DisplayOrientations.None; 
             
            /***To support only landscape***/ 
            DisplayInformation.AutoRotationPreferences = DisplayOrientations.Landscape; 
 
            /***To support only potrait 90 degress clock wise***/ 
            DisplayInformation.AutoRotationPreferences = DisplayOrientations.Portrait; 
             
            /***To flip 180 degrees from potrait mode***/ 
            DisplayInformation.AutoRotationPreferences = DisplayOrientations.PortraitFlipped; 
 
            /***To flip 180 degrees from landscape mode***/ 
            DisplayInformation.AutoRotationPreferences = DisplayOrientations.LandscapeFlipped; 
        }

Note: If your app really can't work in multiple orientations, you might want to lock it to a specific format by setting the preferred orientations in the Package.appxmanifest file. Clearly this is not ideal, but if the design is
fixed, it might be your only choice.

However for the final step i taken the following design

XAML

<Grid> 
        <StackPanel> 
        <TextBox Header="WindowsPhone Store Orientations" Margin="10"  Name="txtOrientation" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="#FF1CB8D1"> 
            <TextBox.HeaderTemplate> 
                <DataTemplate> 
                    <TextBlock Text="{Binding}" FontSize="25" Foreground="Yellow"/> 
                </DataTemplate> 
            </TextBox.HeaderTemplate> 
        </TextBox> 
            <Button Name="OrientationBtn"  Content="Tap here to set your orientation" HorizontalAlignment="Center" Click="OrientationBtn_Click"/> 
            <TextBlock Name="StatusTxtBlck" Margin="10" FontSize="20"/> 
        </StackPanel> 
    </Grid>

Here observe TextBox control having header property which is not available in windows phone 8.0.So please read about latest TextBox control from here.And see how above above Ui design effected, when change the page orientations from your emulator toolbar/device rotation 

Source file at: OrientationSampleWP

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)