Опубликован: 01.11.2011 | Доступ: свободный | Студентов: 1425 / 63 | Оценка: 3.84 / 3.44 | Длительность: 15:38:00
Специальности: Программист
Практическая работа 6:

Создание простого приложения для телефона на Silverlight

< Лекция 8 || Практическая работа 6 || Практическая работа 7 >
Аннотация: На данном занятии мы познакомимся со средой разработки Microsoft Visual Studio 2010 Express for Windows Phone, в частности, с эмулятором телефона. Мы познакомимся с объектами PhoneApplicationFrame и PhoneApplicationPage и выведем на экран красиво отформатированный текст. После чего поработаем с элементом управления MapControl.

Дополнительные материалы к занятию можно скачать здесь.

Для телефона поддерживаются две технологии создания приложений: Silverlight и XNA. XNA в первую очередь предназначена для создания игр и приложений, работающих с 2D- и 3D-графикой.

Silverlight удобно использовать для бизнес-приложений, простых игр и прочих программ, имеющих "традиционный" управляемый событиями интерфейс (т.е. набор элементов управления типа строк ввода, списков и т.д.). Он приходит на смену более старым технологиям создания приложений Windows Forms. В основе Silverlight лежит принцип разделения разметки графического дизайна приложения и программного кода - интерфейс программируется с помощью XML-языка разметки XAML, а с действиями пользователя связываются события, программируемые отдельно на любом из .NET-языков (обычно на C#) [26].

Упражнение 14.1. Создание простейшего приложения MS Windows Phone 7

Запускаем Microsoft Visual Studio 2010 Express for Windows Phone

Создаем приложение p6. Выбираем пункт Windows Phone 7 Emulator.


Запускаем приложение, нажав кнопку F5:

В нашем приложении есть два заголовка - MY APPLICATION и PAGE NAME.

Внесем изменения в заголовки, заменив слово MY APPLICATION на Это-мое первое приложение и PAGE NAME - на Silverlight. Ниже приводится код xaml:

<phone:PhoneApplicationPage 
    x:Class="p6.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="Это-мое первое приложение " Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Silverlight" 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"></Grid>
    </Grid>

</phone:PhoneApplicationPage>
    

Результат:

Упражнение 14.2. Знакомство с элементом управления MapControl

Элемент управления Map позволяет в Silverlight-приложениях отображать карту.

Создаем новое приложение Windows Phone p6_2. Из панели инструментов перетаскиваем элемент управления Map.

При этом подключается пространство имен:

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

Запускаем проект

На карте при этом можно разглядеть белую надпись: Invalid Credentials. Sign up for a developer account - Нет достаточных прав, подпишитесь на учетную запись разработчика.

Для регистрации необходимо зайти на сайт http://www.bingmapsportal.com/ и зарегистрироваться в качестве нового пользователя:


Затем нужно создать свой ключ (Create or view keys):


После заполнения анкеты получаем примерно такой ключ:

Один пользователь может получить бесплатно до пяти ключей.

Полученный ключ можно добавить к элементу управления Map:

<my:Map Height="595" HorizontalAlignment="Left" Margin="0,6,0,0" Name="map1" VerticalAlignment="Top" 
Width="456" CredentialsProvider="AqCnwcyoxN8o6P1nM76x9QNHNMvHLf5pQa-H8L77yju6wcBx2vwvWUniEEpR-ifw" />
    

Белая надпись при этом исчезнет.

Упражнение 14.3. Добавление точки (Pushpin) на карту

Для добавления точки на карту нужно указать координаты и подпись. Добавлять можно как в разметке xaml, так и в коде C#.

Создаем новый проект practice_13_2. Так же из панели инструментов перетаскиваем элемент управления Map.

Добавим точку в XAML разметке.

Для этого выбираем географическую широту и долготу интересующей нас точки (54^0 44' северной широты и 55^0 58' восточной долготы) и задаем подпись (Уфа):

<my:Map Height="595" HorizontalAlignment="Left" Margin="12,6,0,0" Name="map1" VerticalAlignment="Top" 
  Width="438" CredentialsProvider="AqCnwcyoxN8o6P1nM76x9QNHNMvHLf5pQa-H8L77yju6wcBx2vwvWUniEEpR-ifw" >
    <my:Pushpin Location="54.73333333, 55.96666667" FontSize="30" Background="Orange" Content="Уфа" />
</my:Map>
    

Итоговый код приложения:

<phone:PhoneApplicationPage 
    x:Class="p6_3.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" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps">

    <!--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}"/>
            <TextBlock x:Name="PageTitle" Text="page name" 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">
            <my:Map Height="595" HorizontalAlignment="Left" Margin="12,6,0,0" Name="map1" VerticalAlignment="Top" 
              Width="438" CredentialsProvider="AqCnwcyoxN8o6P1nM76x9QNHNMvHLf5pQa-H8L77yju6wcBx2vwvWUniEEpR-ifw" Mode="Aerial" >
                <my:Pushpin Location="54.73333333, 55.96666667" FontSize="30" Background="Orange" Content="Уфа" />
            </my:Map>


        </Grid>
    </Grid>
 
</phone:PhoneApplicationPage>
    
< Лекция 8 || Практическая работа 6 || Практическая работа 7 >