Пример того как можно реализовать приложение наподобие eJay в Silverlight.

PS: Было бы неплохо, чтобы вы хоть немного поработали с программой из серии eJay. Чтобы понимать, что мы собственно собираемся «эмулировать».

Ссылки

eJay
www.ejay.com/

Silverlight
msdn.microsoft.com/ru-ru/library/bb404300.aspx
ru.wikipedia.org/wiki/Silverlight
silverlight.net/GetStarted/

Введение

Для работы нам понадобятся Visual Studio 2008 SP1 (с установленным Silverlight Toolkit аддоном) и Microsoft Expression Blend SP1. Ну и раз уж мы делаем «красивое» приложение то нам также понадобится Microsoft Expression Design. Правда, понадобиться он нам чуточку позже, а пока в Expression Blend создаем «новый проект» (New project…) (Ctrl + Shift + N)

Указываем нужную нам папку и название проекта «Fake_eJay». В качестве языка «Visual C#». После того как проект создался активируем панель «Project».

Выбираем наш проект и в контекстном меню (которое появляется по нажатию ПКМ) выбираем пункт «редактировать в Visual Studio» (Edit with Visual Studio).

Появится Visual Studio с уже открытым проектом.

Теперь у нас открыты две программы Expression Blend и Visual Studio. В обоих открыт наш проект. В Expression Blend мы будем редактировать дизайн и анимацию, в Visual Studio – код

Мелкая, но гадкая проблема

Microsoft официально заявляет, что Expression Blend и Visual Studio – синхронизированы. Тоесть вы можете, к примеру, создать кнопку в Expression Blend, переключится на Visual Studio и написать код обрабатывающий нажатие добавленной нами кнопки. Будьте осторожны, это не всегда так! Не так все плохо. Microsoft нам не соврали, они всего лишь не сказали ВСЮ правду :)

Всего встречается 2 проблемы синхронизации Visual Studio и Expression Blend. Чтобы лучше их понять поэкспериментируем с нашим проектом. В Expression Blend добавим кнопку. Для этого в панели «объекты и временная шкала» (Objects and Timeline)

выберем объект «LayoutRoot», после чего проверим, обведен ли наш объект желтой рамкой, если нет — то кликнем 2 раза по нему. Желтая рамка означает, что этот элемент является «главным», то есть все новые объекты будут добавляться именно в этот элемент. Теперь на панели инструментов 2 раза кликнем по кнопке «кнопка» (Button) (Простите за тавтологию)

Если вы разбираетесь в XAML, то должны понять что мы всего лишь добавили код в файл разметки

Соответственно у нас изменился файл разметки «Page.xaml». Мы видим над ним маленькую звездочку

Теперь добавим обработчик нажатия кнопки. Для этого в панели «объекты и временная шкала» (Objects and Timeline) выберем нашу кнопку (Либо выберем кнопку мышкой :), после чего на панели «свойства» (Properties) нажмем на «события» (Events).

В появившемся списке событий, в текстбоксе напротив надписи «Click», кликнем два раза или напишем – «Button_Click» и нажмем Enter. Перед нами чудесным образом появится Visual Studio c уже написанным обработчикам события

Если вы разбираетесь с C# то понимаете что сейчас изменился файл «Page.cs» в котором находиться код. Вы можете убедиться в этом по звездочке. Добавим в этот обработчик события строку «MessageBox.Show(«Бла бла бла»);». Теперь ничего не делая, переключимся на Expression Blend и попробуем откомпилировать проект (F5).

Мы получим сообщение об ошибке. Это произошло, потому что мы не сохранили изменения в файле «Page.cs». Вернувшись в Visual Studio и сохранив изменения, после чего перейдя в Expression Blend вы сможете спокойно откомпилировать проект

Вот теперь вы встретились с первой проблемой синхронизации Visual Studio и Expression Blend – она не всегда идет в обоих направлениях. Если Expression Blend сам изменил файл «Page.cs» и открыл Visual Studio, то Visual Studio – ничего делать не стал.

Теперь давайте в Expression Blend добавим вторую кнопку аналогично первой. Только теперь на панели «свойства» (Properties) укажем значение Margin-Top равным 100

Теперь переключимся в Visual Studio и на панели «обозреватель решений» (Solution Explorer).

Откроем файл «Page.cs» изменим строчку «MessageBox.Show(«Бла бла бла»);» на «MessageBox.Show(«ХА ХА ХА»);». Теперь чтобы не допустить первую ошибку сохраним изменения в файле (Ctrl+S). После чего откроем файл «Page.xaml» и изменим цвет фона. Для этого в «коде разметки» (XAML) у элемента с именем (x:Name=…) «LayoutRoot». Изменим значение свойства «Background» на «Black»

Также сохраним изменения в файле (Ctrl+S). И чтобы было удобней откомпилируем проект, тут же, в Visual Studio (F5). Вот теперь вы наверняка заметили отсутствие второй кнопки, которую мы добавили в Expression Blend. Вот вторая проблема синхронизации Visual Studio и Expression Blend – нельзя редактировать один и тот же файл в разных программах предварительно не сохранив его.

А что было бы если бы мы сохранив изменения в файле «Page.xaml» откомпилировали бы проект в Expression Blend? Перейдя в Expression Blend перед нами появился бы диалог, который бы сообщил что файл «Page.xaml» был изменен вне Expression Blend. И предложит «загрузить измененные файлы» или «не загружать изменения».

Согласившись загрузить изменения, мы бы всеравно потеряли вторую кнопку. Отказавшись — мы бы потеряли все изменения, сделанные нами в Visual Studio (цвет фона и измененный текст сообщения в MessageBox)

Ну и что? Спросите вы. Я сразу заметил отсутствие кнопки. К чему такие банальности? Это очень хорошо, что вы сразу заметили отсутствие одной кнопки из двух. Но что будет, когда наш проект разрастется? Сможете ли вы проконтролировать присутствие хотя бы 10 кнопок из 100? И как вы будете контролировать присутствие анимации, которая никак не визуализируется? Что если вам в голову придет гениальная идея и вы захотите срочно её проверить? Так что проблема тривиальна лишь на начальном этапе и для простых проектов. В крупных и масштабных проектах она может доставить очень много неприятностей.

Решение этой проблемы весьма простое. Выработайте у себя привычку, перед тем как перейти к работе с другой программой ВСЕГДА сохранять весь проект (Ctrl+Shift+S). Это сбережет много нервов. Далее я не буду напоминать вам об этом. Надеюсь, что вы это запомните.

Теперь давайте отчистим наш проект от наших экспериментов. Удалим все кнопки в файле «Page.xaml» и обработчик события в «Page.cs». Оставим только черный цвет фона (далее он нам пригодится)

Убедитесь что проект сохранен, и одинаков как в Expression Blend так и в Visual Studio.

udp. продолжение следует :)