Статьи

Как: Ориентация экрана в эмуляторе Windows Phone

Январь 7, 2019

В этом уроке мы узнаем, как эффективно использовать ориентацию экрана при разработке для Windows Phone. Прежде чем мы напрямую переключим ориентацию в эмуляторе Windows Phone, сначала давайте разберемся, что такое ориентация экрана в Windows Phone, используя статью « Работа с ориентацией экрана в WP7 ». Предполагая, что у нас все хорошо с ориентацией экрана в Windows Phone, если мы разрабатываем приложение, ориентированное на ориентацию, и если нам нужно проверить ориентацию приложения с помощью эмулятора Windows Phone, то это руководство будет полезно для читателей. Давайте посмотрим, как протестировать наше приложение на основе ориентации экрана в Windows Phone.

Для начала откройте Visual Studio 2010 IDE и создайте новый проект Silverlight для Windows Phone с допустимым именем проекта, как показано на экране ниже. После создания проекта добавьте некоторые элементы управления, которые используются для отображения деталей сетевых операций, как показано на экране ниже.

SNAGHTML14f42976

Теперь перетащите несколько элементов управления на экран, который показывает ориентацию на телефоне для горизонтальной и вертикальной видимости. После того, как мы разработали экран, чтобы показать желаемый результат, наш экран выглядит следующим образом.

образ

Код XAML:

 

<phone:PhoneApplicationPage
    x:Class="F5debugHowto35.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="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    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="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Screen Orientation" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <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" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,125,0,0" Name="textBlock2" Text="Age" VerticalAlignment="Top" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="143,105,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="307" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,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" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="41,281,0,0" Name="textBlock4" Text="Mobile No" VerticalAlignment="Top" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="143,261,0,0" Name="textBox4" Text="" VerticalAlignment="Top" Width="307" />
            <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" />
            <Button Content="Add" Height="72" HorizontalAlignment="Left" Margin="54,456,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
            <Button Content="Clear" Height="72" HorizontalAlignment="Left" Margin="240,456,0,0" Name="button2" VerticalAlignment="Top" Width="160" />
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

Теперь нам нужно изменить ориентацию устройства, исходя из необходимости, если приложение должно поддерживать Portrait или оно должно поддерживать альбомную ориентацию или даже обе в событии загрузки, как показано в коде ниже.

Код позади:

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 F5debugHowto35
{
    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;
        }
    }
}

образ

Здесь наше приложение должно поддерживать как книжную, так и альбомную ориентацию, поэтому комментируйте весь код и оставляйте только последний поддерживаемый параметр. Теперь, чтобы проверить ориентацию на эмуляторе (виртуальном устройстве), у нас есть несколько встроенных опций с эмулятором. Мы можем изменить ориентацию с помощью кнопок (панель инструментов справа) с эмулятором, как показано на экране ниже.

образ

Теперь, когда мы закончили с нашим кодом, просто запустите приложение, нажав F5 непосредственно на клавиатуре, или мы можем использовать опцию Build и выполнить проект из панели инструментов для запуска приложения. После успешного завершения сборки мы можем увидеть эмулятор Windows Phone с приложением и ожидаемые результаты, как показано на экранах ниже.

Экраны вывода:

образ

Итак, в этом коротком руководстве мы увидели, как эффективно использовать ориентации при тестировании нашего приложения с помощью эмулятора Windows Phone со встроенными инструментами, которые доступны для его тестирования в соответствии с кодом. Это работает точно так же с реальным устройством без каких-либо дополнительных усилий, чтобы заставить его работать. Вот именно из этого урока на Windows Phone скоро увидимся в следующем уроке. Значит пока счастливого программирования !!!

 

 

 

35
Share: