Урок 1: Конечно не “Hello World”, но похоже

«Hello World» у нас призван чему научить? Наверное созданию проекта Silverlight, пониманию из чего он состоит и собственно запуску проекта.

Еще раз акцентирую внимание на том что я чайник, то есть НЕ ПРОФЕССИОНАЛ в программировании. И буду благодарен за КОНСТРУКТИВНУЮ критику или коментарии (остальное нахрен поудаляю).

Что понадобится VS2008 (не Express, он конечно потдерживается, но со сторонним хаком – поэтому даже не рассматриваем), Silverlight 2 Beta 2 Tools, установленый Silverlight 2 Beta 2 плагин и иногда для удобства будем использовать Expression Blend 2.5 June Preview (но не в этом уроке). Опять замечу, что как это все устанавливать есть множество статей в интернете – поэтому повторятся не буду.

Сразу несколько уточнений на будущее: 1) VS2008 не поддерживает визуальное редактирование контролов, чесно говоря меня это сначало очень смутило. Потом наоборот понял – это полезно для привыкания к синтаксису XAML. Лично мне очень помогает. 2) Если вы используете одновременно VS2008 для кодинга и Expression Blend для визуальной доводки UI (User Interfase), то есть у Вас открыт в них ОДНОВРЕМЕННО ОДИН Silverlight проект. Вам нужно помнить, что для того чтобы Expression Blend увидел изменения проекта его нужно ОТБИЛДИТЬ в VS2008. А в обратном случае достаточно просто сохранить проект в Expression Blend. Чесно говоря меня иногда сильно раздражает – пытаешься забиндить какое нибудь свойство и неможешь его найти в Blend’е, а потом соображаешь что забыл собрать проект в студии.

Начнем, с богом.

Создадим новый проект VS2008, выбераем в меню File->New Project. Если у нас все правильно установлено получаем похожую на следующий скрин картинку:

Нажимаем ОК, и видем «к сожалению» еще один диалог:

А вот тут нам предлагается выбрать создавать ли ПОЛНОЕ новое решение для хостинга или будем тестить на тестовой html страничке. В первом случае среда сгенерит нам полное решение для веб сервера. Пока это нас не интересует, поэтому мы выбираем второй вариант – наша цель пока Silverlight.

Среда сгенерировала нам следующее:

Page.xaml and App.xaml – это XAML файлы использующие XML разметку для описания UI (Юзер интерфейса). Page.xaml.cs and App.xaml.cs это файлы программного кода на C# (code-behind). Silverlight, так же как и WPF использует разделение файлов для описания интерфейса и собственно програмного кода.

App.xaml используется для декларирования ресурсов (кистей, стилей и.д.) которые используются во всем приложении. App.xaml.cs используется как правило для описания событий уровня приложения Application_Startup, Application_Exit и Application_UnhandledException.

Page.xaml файл поумолчанию это UI загружаемый при старте программы. Page.xaml.cs -собственно C# код нашего юзер интерфейса.

Но лучше продолжим. У Вас экран должен выглядеть подобным образом:

Если как-то по другому, просто откройте Page.xaml. Красным у нас обведено визуальное представление нашего интерфейса, а зеленым собственно сам xaml код.

Давайте добавим на страницу кнопку.

Это можно сделать просто перетащив с тулбокса в xaml значок кнопки – это добавит нам сразу теги кнопки: <Button></Button>. Перетаскивать нужно в пустое место между тегами <Grid x:Name=”LayoutRoot” Background=”White”> и </Grid>. Как вы видите кнопка заняла все родительсоке полотно. И вы не можете ее визуально редактировать, пораметры нопки надо вписывать непосредственно в xaml файл.

Эсли вы сторонник визуального проектирования интерфейса вам прямая дорога в Expression Blend. Хочу заметить только одно, Blend как и любой визуальный редактор генерит огромное количество ненужно мусора в xaml файле. Поэтому советую или писать ручками в случае простого интерейса или темиже самыми ручками чистить xaml в любой студии (мне удобней в VS)

Но мы поступим немножко по другому. Мы начнем набирать тег <Button, и сразу закроем его /> результат тот же, но теперь начиная набирать в теге что ни будь – мы будем видеть подсказки:

Кроме того, что это помогает нам делать меньше ошибок, это ОЧЕНЬ полезно в свете того, что можно увидеть – какие свойства и методы возможны для данного контрола.

В итоге нам нужно получить следующую кнопку: <Button Height=”24″ Width=”100″ Content=”Нажми меня”/>. Нбирая тег вы видите за что какое свойство отвечает.

Поэкспериментируйте со свойствами, это поможет вам лучше понять xaml.

Обратите внимание что в выпадающем списке некоторые строчки помечены скобками, некоторые молнией, а некоторые – листочком с рукой. Листочек это свойства контрола. Скобки, даже не знаю как назвать, скорее всего это имя класса дочернее свойство которого является свойством данного контрола. Например Canvas.Top задаст высоту расположения данного контрола на родительском полотне.

Но нас сейчас заинтересовал метод кнопки Clic (как самый интуитивный):

Выерем его и назначаем в нем название функции которая будет вызываться при клики на данную кнопку (Кто програмировал на Delphi, обратите внимание, что мы не присваеваем контролу имя, но обэтом чуть позже):

Кстати вы можете придумать свое имя функции. Нажимаем правой кнопкой на данное имя и выбираем редактировать реакцию на событие, мы переходим в файл Page.xaml.cs к редактированию данной функции. Добавим в ее тело следующие строчки:

SolidColorBrush newColor = new SolidColorBrush(Color.FromArgb(255, 200, 77, 0));

LayoutRoot.SetValue(Canvas.BackgroundProperty, newColor);

Первая строчка создает кисть заливки нужного нам цвета. А вторая строчка присваивает объекту LayoutRoot свойство Background.

Собственно и все. Можем собрать и запустить проект просто нажав F5. Смотрим, как работает.

На этом можно было и закончить, но лично мне на Вашем месте захотелось бы понять философию всего этого безобразия что мы написали. Поэтому встречайте:

Урок 1.5: Вот я набирал что-то, а что не совсем понимаю

У нас получились следующие файлы.

Page.xaml:

<UserControl x:Class=”SilverlightApplication1.Page”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Width=”400″ Height=”300″>
<Grid x:Name=”LayoutRoot” Background=”White”>
<Button Height=”24″ Width=”100″ Content=”Нажми меня” Click=”Button_Click”/>
</Grid>
</UserControl>

Page.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication1
{
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
}

private void Button_Click(object sender, RoutedEventArgs e)
{
SolidColorBrush newColor = new SolidColorBrush(Color.FromArgb(255, 200, 77, 0));
LayoutRoot.SetValue(Canvas.BackgroundProperty, newColor);
}
}
}

Собственно Page.xaml.cs мы особо смотреть не будем, там ничего военного нет. Кроме фунции SetValue, крайне полезная вещь для доступа к свойствам контрола. Как вы увидите в процессе кодинга – не ко всем свойствам контрола можно обратится на прямую, поэтому SetValue и GetValue фунции с которыми надо дружить.

А вот Page.xaml мы рассмотрим по подробнее: Я не буду объяснять что такое теги. Поэтому сразу к делу:

<UserControl – это тег родительского элемента нашего UI, его кстате, в случае необходимости, можно поменять на <Grid, <Canvas или любой контрол. Получив при этом необходимую функциональность родительской страницы. Не забудьте только поменять родительский класс страницы в Page.xaml.cs.

x:Class=”SilverlightApplication1.Page” – это вообще пока не советую трогать, логически связывает Page.xaml и Page.xaml.cs.

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” – расказывают о синтаксисе нашего xaml файла студии, для дальнейшей зборки

Width=”400″ Height=”300″ – ширина и высота нашей UI родительской страницы, кстате если вы их уберете, то при дизайне ничего кроме дочерних элементов с установлеными размерами не увидете а при работе наша страница будет растягиватся на весь браузер. Еще один момент – если дочерний элемент будет выходить за границы родительской страницы вы его увидите полностью и работать он будет, но тольо в том случае если начало координат этого элемента находится В ВИДИМОЙ области родительской страницы. В противном случае работать он будет – но вы ничего не увидете.

Говорят еще, что дописав следующие строчки

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d”
d:Width=”600″ d:Height=”480″ >

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

<Grid x:Name=”LayoutRoot” Background=”White”> – это элемент способа выравнивания контролов на странице. Вообще их существует 3: Grid, Canvas и StackPanel. Это собственно тема другого урока, сейчас просто коротко. Canvas выравнивание самое простое указываешь координаты верхнего левого угла контрола и все – он там прилеплен на вечно. StackPanel – панель на которую добавляешь контрол и он прикрепляется автоматически за последним (можно сделать вертикальную или горизонтальную), панель уже сама следить за всем остальным. И наконец Grid самый мощный способ выравнивания, можно назначать фиксированные и не фиксированные размеры на колонки и сроки. У нас не указана высота нашей сетки поэтому она растягивается полностью на родительсую страницу.

Background=”White” – цвет бекграунда нашего грида

x:Name=”LayoutRoot” – самое интересное. Имя нашего элемента, если оно присвоено мы можем из C# кода обратится к нему. И программно манипулировать свойствами UI контрола. Для этого достаточно присвоить контролу имя: x:Name=”Имя_Контрола” вписав данную строчку в тег нужного контрола. Вы например можете аналогично нашему примеру поменять надпись на кнопке, только не забудьте присвоить ей имя.

Вот теперь точно все)).