Опыт первого приложения для Windows Phone 7 Series с использованием Silverlight

Приветствую вас, Хабрасообщество.
В данном топике я расскажу как написать свое первое приложение на Windows Phone 7 на примере своего приложения.

Итак к делу. Сразу скажу, что в .NET я начинающий программист, посему судить строго мой неоптимизированный код не стоит. Заинтересовала меня недавно платформа Windows Phone 7 Series и решил попробовать написать для нее простенькое приложение — поиск для сайта Ozon.ru

Покопавшись на сайте магазина я нашел XML-интерфейс для работы с поиском по сайту. Находится он здесь:
www.ozon.ru/webservice/webservice.asmx/SearchWebService?searchText=test&searchContext=

В GET параметре searchText содержится поисковый запрос.

1. Итак, приступим. Сперва необходимо создать проект Windows Phone Application в Visual Studio 2010 (именно эту среду разработки мы будем использовать).



Назовем проект ozon. В итоге получаем дефолтную страницу с разметкой.



2. Теперь применим разметку для нащей будущей страницы приложения

1. <phone:PhoneApplicationPage
2.   x:Class="ozon.MainPage"
3.   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4.   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5.   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6.   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7.   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8.   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9.   xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
10.   mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
11.   FontFamily="{StaticResource PhoneFontFamilyNormal}"
12.   FontSize="{StaticResource PhoneFontSizeNormal}"
13.   Foreground="{StaticResource PhoneForegroundBrush}"
14.   SupportedOrientations="Portrait" Orientation="Portrait"
15.   shell:SystemTray.IsVisible="True">
16.  
17.   <controls:Pivot>
18.     <controls:Pivot.Title>
19.       <TextBlock>OZON.RU</TextBlock>
20.     </controls:Pivot.Title>
21.     <controls:PivotItem Header="Поиск" Foreground="Black">
22.       <Grid x:Name="LayoutRoot" Background="Transparent">
23.         <Grid.RowDefinitions>
24.           <RowDefinition Height="Auto"/>
25.           <RowDefinition Height="*"/>
26.         </Grid.RowDefinitions>
27.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" UseLayoutRounding="True" HorizontalAlignment="Left">
28.           <TextBox Grid.RowSpan="2" Height="72" Margin="0,0,0,0" Name="textBox1" Text="" Width="288" />
29.         </StackPanel>
30.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
31.           <ListBox x:Name="Results" Height="Auto" HorizontalAlignment="Left" Margin="4,3,0,0"
32. VerticalAlignment="Top" Width="423" >
33.             <ListBox.ItemTemplate>
34.               <DataTemplate>
35.                 <StackPanel Orientation="Horizontal" Height="100" Margin="0,10,0,0">
36.                   <Image Source="{Binding PictureURL}" Width="80" Height="100" Stretch="Fill"
37. DataContext="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,10,0" />
38.                   <StackPanel Orientation="Vertical" Height="100" VerticalAlignment="Top">
39.                     <StackPanel Orientation="Horizontal" Height="Auto" VerticalAlignment="Top">
40.                       <TextBlock Width="320" FontSize="18" Text="{Binding Name}"
41. TextWrapping="Wrap" VerticalAlignment="Top" />
42.                     </StackPanel>
43.                     <StackPanel Orientation="Horizontal" Height="60">
44.                       <TextBlock Width="320" FontSize="32" Text="{Binding PriceFormatted}" />
45.                     </StackPanel>
46.                   </StackPanel>
47.                 </StackPanel>
48.               </DataTemplate>
49.             </ListBox.ItemTemplate>
50.           </ListBox>
51.         </Grid>
52.         <Button Content="Искать" Height="72" Name="button1" Width="160" Margin="288,17,8,28" Click="button1_Click" />
53.       </Grid>
54.     </controls:PivotItem>
55.   </controls:Pivot>
56. </phone:PhoneApplicationPage>

* This source code was highlighted with Source Code Highlighter.

Для того, чтобы данная разметка заработала нормально не забудьте подключить необходимые библиотеки (Windows Phone Controls). Также можно сразу добавить еще несколько библиотек, таких как System.Net (будем использовать ее для доступа к классу WebClient), а также System.Xml.Linq для доступа к класс XDocument.
Сильно углублятся в разметку не будем, здесь впринципе все понятно: Размещаем все на элементе Pivot (вдруг потом захочется расширить приложение до нескольких страниц), даем главной странице заголовок «Поиск». Под этим безобразием размещаем TextBox и Button, по нажатию на который будет осуществляться поиск. Ну а выводить мы все будем в обычный ListBox, правда немного видоизмененный для более приятного просмотра результатов.

Итак, в итоге мы имеем нечто такое:



3. Разметку мы получили, теперь необходимо прикрепить к ней данные. Для начала мы напишем класс OzonItem, который будет представлять из себя контейнер данных об одном результате поиска.

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Text;
5.  
6. namespace ozon
7. {
8.   public class OzonItem
9.   {
10.     public int ID { get; set; }
11.     public string Name { get; set; }
12.     public string PictureURL { get; set; }
13.     public int isAvailable { get; set; }
14.     public string Price { get; set; }
15.     public string PriceFormatted { get; set; }
16.  
17.     public OzonItem(int ID, string Name, string PictureURL, int isAvailable, string Price)
18.     {
19.       this.ID = ID;
20.       this.Name = Name;
21.       this.PictureURL = PictureURL;
22.       this.isAvailable = isAvailable;
23.       this.Price = Price;
24.       this.PriceFormatted = double.Parse(Price).ToString() + " руб.";
25.     }
26.  
27.     public override string ToString()
28.     {
29.       string info = "";
30.       info += this.GetType().ToString()+"\n";
31.       info += "ID: "+ this.ID + "\n";
32.       info += "Name: " + this.Name + "\n";
33.       info += "PictureURL: " + this.PictureURL + "\n";
34.       info += "isAvailable: " + this.isAvailable + "\n";
35.       info += "Price: " + this.Price + "\n";
36.  
37.       return info;
38.     }
39.   }
40. }

* This source code was highlighted with Source Code Highlighter.

Как видно из кода мы будем хранить ID, Picture, Name, Availability и Price. Также сразу добавим поле для хранения форматированной даты.

4. Логика приложения. При запуске мы получаем страницу с TextBox, куда вводим поисковый запрос. Затем жмем кнопку «Искать» и получаем результаты от Ozon.ru.

Собственно, вот код класса страницы.

1. public partial class MainPage : PhoneApplicationPage
2.   {
3.     // Constructor
4.     public MainPage()
5.     {
6.       InitializeComponent();
7.     }
8.  
9.     private void button1_Click(object sender, RoutedEventArgs e)
10.     {
11.       WebClient data = new WebClient();
12.       data.DownloadStringCompleted += new DownloadStringCompletedEventHandler(OnDownloadItemsCompleted);
13.       data.DownloadStringAsync(new Uri("http://www.ozon.ru/webservice/webservice.asmx/SearchWebService?searchText=" + textBox1.Text + "&searchContext="));
14.     }
15.  
16.     private void OnDownloadItemsCompleted(object sender, DownloadStringCompletedEventArgs e)
17.     {
18.       if (e.Error != null)
19.       {
20.         // throws NotFound
21.         throw e.Error;
22.       }
23.  
24.       XDocument xml = XDocument.Parse(e.Result);
25.  
26.       // results from search
27.       List<OzonItem> results = new List<OzonItem>();
28.  
29.       IEnumerable<XElement> list = xml.Descendants("SearchItems");
30.  
31.       if (list != null)
32.       {
33.         foreach (XElement node in list)
34.         {
35.           results.Add(new OzonItem(
36.                       int.Parse(node.Element("ID").Value),
37.                       node.Element("Name").Value,
38.                       node.Element("Picture").Value.Replace("/small", "").Replace(".gif", ".jpg"),
39.                       int.Parse(node.Element("ItemAvailabilityID").Value),
40.                       node.Element("Price").Value
41.                     ));
42.         }
43.       }
44.  
45.       this.Results.ItemsSource = results;
46.     }
47.   }

* This source code was highlighted with Source Code Highlighter.

Здесь из интересного можно отметить процесс загрузки XML. Кто использовал уже в своих приложениях Silverlight, тот знает, что все запросы в любым сервисам необходимо делать асинхронно в фоне, что мы здесь и делаем. Метод button1_Click является обработчиком нажатия кнопки «Искать». По нажатию XML начинает скачиватся, а по окончанию выполняется функция OnDownloadItemsCompleted (это видно из передаваемого делегета в data.DownloadStringCompleted). После скачки я думал воспользоваться классом XMLDocument, но его не оказалось в простарнстве System.Xml. Поэтому я решил воспользоваться классом XDocument. Что же мы делаем дальше? Мы распаршиваем полученную строку от Ozon.ru, делаем выборку по тегу «SearchItems», затем пробегаемся по массиву этих элементов, попутно записывая их в коллекцию List. В итоге имеем все результаты в типизированной коллекции, которую присоединяем к ListBox'у как источник данных.

Вот скрин с примером работы приложения:


Если есть какие-либо вопросы или дополнения, то с радостью выслушаю.