Создание простого приложения при помощи Silverlight 2 и VS 2008

Для того чтобы создать приложение ("Silverlight Application"), прежде всего следует выбрать пункт File->New Project в Visual Studio 2008 или Visual Web Developer 2008 Express (он предоставляется бесплатно) и использовать диалоговое окно New Project (Новый проект). Обратите внимание, что для того чтобы проделать все это , вам понадобится загрузить и установить Silverlight Tools для VS 2008:


Мы назовем проект "DiggSample".  При нажатии кнопки "OK" Visual Studio выведет дополнительное диалоговое окно, которое позволит нам выбрать создание простого проекта приложения (Silverlight Application) либо  также опционально добавить веб-проект ASP.NET серверной стороны к нашему проекту для предоставления хостинга для приложения Silverlight. Для нашего примера мы выберем также опцию добавления проекта веб-приложения ASP.NET и назовем его "DiggSample_WebServer". После того, как вы нажмете "ok", Visual Studio создаст проект, который будет иметь в себе как клиентское приложение Silverlight, так и приложение веб-сервера ASP.NET:


Если мы нажмем кнопку "build", Visual Studio автоматически скопирует скомпилированное приложение Silverlight к нашему проекту веб-сервера (не требуется никакой настройки). По умолчанию, проект веб-сервера, который создал VS, содержит как  ASP.NET-страницу, так и статическую HTML-страницу, которую мы можем использовать для тестирования приложения Silverlight. 

Обратите внимание: приложения Silverlight могут быть использованы с любым веб-сервером (включая Apache на Linux) и быть доступным посредством статических HTML-файлов или любой другой страницы, сгенерированной сервером (включая PHP, Java, Python, Ruby и т.д.).  Для данного примера Digg.com мы не будем писать никакого серверного кода - вместо этого мы будем использовать междоменное сетевое свойство Silverlight для осуществления прямого доступа к программному интерфейсу сервиса Digg.com (API). Я решил создать проект веб-сервера ASP.NET главным образом для автоматического использования и применения его встроенного веб-сервера для тестов.

Изучение содержимого приложения Silverlight

По умолчанию, созданный проект приложения Silverlight содержит файлы Page.xaml и App.xaml, а также связанные с ними файлы класса с фоновым кодом (которые могут быть написаны на языках VB, C#, Ruby или Python) :


Файлы XAML являются текстовыми файлами типа XML , которые могут быть использованы для декларативного указания пользовательского приложения Silverlight или WPF. XAML также может быть более широко использован для декларативного представления объектов .NET.

Файл App.xaml обычно используется для объявления ресурсов, таких как кисти и объекты стиля, которые используются во всем приложении. Класс с фоновым кодом файла App.xaml может быть использован для обработки события уровня приложения - к примеру Application_Startup, Application_Exit и Application_UnhandledException.

Файл Page.xaml по умолчанию является стандартным элементом управления пользовательским интерфейсом (UI control), который загружается при активации приложения. В его пределах мы можем использовать элементы управления пользовательским интерфейсом для определения нашего пользовательского интерфейса, и затем обработки их событий в пределах класса Page.

При создании нашего проекта DiggSample, Visual Studio по умолчанию компилирует код и разметку .XAML в стандартный файл сборки .NET , и затем упаковывает его и все статические ресурсы (такие как изображения или статические файлы, которые мы хотим включить в него) в файл "DiggSample.xap": 


Файлы ".xap" используют стандартный алгоритм компресии .zip для того, чтобы уменьшить размер загрузочных файлов. Приложение .NET Silverlight , выводящее сообщение "hello world" (и написанное при помощи VB и C#) занимает всего 4KB памяти.

Для предоставления хостинга и запуска приложения Silverlight 2 вы можете добавить тег <object> в любую стандартную страницу HTML (нет необходимости в JavaScript) , которая ссылается на файл .xap.  Silverlight автоматически загрузит файл .xap, создаст его экземпляр и сделает доступным в пределах данной страницы HTML в обозревателе. Это работает среди различных обозревателей (Safari, FireFox, IE и т.д) и платформ (Windows, Mac, и Linux).

Тестовые страницы HTML и ASP.NET (содержащие ссылку на тег <object> , который указывает на наше приложение Silverlight) были автоматически добавлены во время создания нашего проекта - то есть мы можем просто нажать F5 для сборки, запуска и тестирования.

Учимся добавлять элементы управления и обработчики событий

На данный момент наше приложение Digg ничего не делает, и во время работы оно выводит пустую страницу.

Мы можем изменить это открыв файл Page.xaml в проекте и добавив немного кода: 


Мы начнем с изменения фона табличной сетки и объявления элемента управления Button в его пределах. Мы присвоим кнопке значение атрибута "x:Name" принадлежащего "MyButton" - это позволит нам программно сослаться на него в пределах нашего класса фонового кода. Мы также установим его свойства Content (Содержимое), Width (Ширина) и Height (Высота):


При запуске приложения наша кнопка с текстом "Push Me" появится посередине страницы :

 

Чтобы добавить функциональность к данной кнопке мы можем создать обработчик события "Click" для нее. Мы можем сделать это в режиме исходника (Source view), введя название события:


Затем нас спросят об обработчике события в нашем классе с фоновым кодом, который мы хотим использовать:


Теперь мы можем ввести название метода обработчика события либо просто нажать кнопку ввода (Enter) для того, чтобы назвать метод обработчика события при помощи стандартного названия:


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


Проделав данные изменения мы можем перезапустить приложение и заново нажать кнопку, и теперь ее содержимое обновлено и содержит сообщение "Pushed!":


Следующие шаги

Нам все еще предстоит проделать некоторые шаги до того, как мы закончим создание полноценного приложения

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

Источник