Создание простого приложения для телефона на Silverlight
Дополнительные материалы к занятию можно скачать здесь.
Для телефона поддерживаются две технологии создания приложений: 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 разметке.
Для этого выбираем географическую широту и долготу интересующей нас точки ( северной широты и восточной долготы) и задаем подпись (Уфа):
<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>