Silverlight 2: Проба пера

«Лучший способ понять что-то, это объяснить это другому»
© Народная мудрость

Я практически полный 0 в Silverlight, но есть желание это исправить.
Итак, приступим.


Что мы сделаем:
1. Hello, World!
2. Простой компонент

Step #1. Prerequires

Итак, что нам нужно.

1. Visual Studio 2008 SP1
   Если нет SP1, то берем его здесь:
   Full install: www.microsoft.com/downloads/details.aspx?familyid=27673C47-B3B5-4C67-BD99-84E525B5CE61&displaylang=en
   Апдейтер, который сам все скачает:
   www.microsoft.com/downloads/details.aspx?familyid=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en
   
2. Silverligt Tools for VS 2008:
   Берем здесь:
   www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

Ставим и то и то.
Подробности и прочее читаем здесь: silverlight.net/GetStarted

Step #2. Hello, World

Вообще можно пропустить этот шаг, ибо на silverlight.net/GetStarted есть видео туторы, которое все подробно описывают, ну да ладно.

Собственно, с чего все и начинается.

Итак, открываем студию, создаем новый проект.
File -> New -> Project

В дереве ищем Visual C#, а в нем уже Silverlight. Далее выбираем Silverlight Application.
Название проекта ессно HelloWorld.


Ок, создаем. Дальше нам предлагают два способа запуска Silverlight приложений. Выбираем Automatically generate a test page to host Silverlight at build time (выбираю его ибо несолько жалко памяти держать запущеным для дебага еще и сервер).

И имеем несколько автоматически сгенеренных файлов:

1. App.xaml — используется Silverlight приложением для определения глобальных событий приложения и еще чего-то-там, что нам для старта не интересно.
2. Page.xaml — визуальное «представление» приложения. В App.xaml создается экземпляр Page

Итак, открываем Page.xaml, открываем Toolbox студии и перетаскиваем TextBlock из ToolBox-а в окошко с xaml.
Добавляем TextBlock-у текст:

<TextBlock>
  <TextBlock.Text>Hello, World!</TextBlock.Text>
</TextBlock>

* This source code was highlighted with Source Code Highlighter.

Жмем F6, потом F5. Уаля. Радуемся.


Это было просто и банально.
Следующий шаг — так как наш бог ООП, будем делать компонент.

Step #3. Создаем свой компонент

Silverlight Class Library

Начнем с того, что сделаем свою подключаемую библиотеку классов.
1. File -> New -> Project
2. Visual C# -> Silverlight Class Library
Имя — MyClassLib

Делать будем компонент для часов. Не знаю почему, но хочется.

Итак, переименовываем созданый студией файл Class1.cs в Clocs.cs
Компонент должен быть визуальным, соответственно занаследуем класс Clocks от Control.

Дальше немного шаманства. (Стоило много крови)
Для того, что бы наш компонент имел визуальное представление, делаем следующее:
Создаем папку Themes, в ней создаем файл generic.xaml

Это дефолтная «тема» компонента. В ней прописываем следующее:

<ResourceDictionary
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:my="clr-namespace:MyClassLib;assembly=MyClassLib">
  <Style TargetType="my:Clocks">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="my:Clocks">
          <Canvas x:Name="RootElement" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

* This source code was highlighted with Source Code Highlighter.

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

Итак, теперь правим класс Clock и получаем в нем ссылку на Canvas:

namespace MyClassLib
{
  [TemplatePart(Name=Clocks.RootElement,Type=typeof(Canvas))]
  public class Clocks : Control
  {
    private const string RootElement = "RootElement";

    private Canvas rootElement;

    public Clocks()
    {
      this.DefaultStyleKey = typeof(Clocks);
    }

    public override void OnApplyTemplate()
    {
      base.OnApplyTemplate();

      this.rootElement = this.GetTemplateChild(RootElement) as Canvas;
    }
  }
}

* This source code was highlighted with Source Code Highlighter.

Уаля. Теперь нарисуем прямоугольничек в Clocks, дабы воскликнуть: «Ох**ть! Работает!».

В конструкторе прописываем слушателя для события изменения размера:

this.SizeChanged += new SizeChangedEventHandler(Clocks_SizeChanged);

* This source code was highlighted with Source Code Highlighter.

И добавляем поле со ссылкой на Rectangle и методы для его создания и рисования:

private Rectangle rect;

    private void CreateContent()
    {
      this.rect = new Rectangle();
      this.rect.Fill = new SolidColorBrush(Color.FromArgb(0xFF, 0xCC, 0xCC, 0xCC));
      this.rootElement.Children.Add(this.rect);
    }

    private void Render()
    {
      this.rect.Width = this.ActualWidth;
      this.rect.Height = this.ActualHeight;
    }


* This source code was highlighted with Source Code Highlighter.

3.3. Доделываем компонент

Теперь приделаем TextBlock с часами в наш класс и уаля!

Код класса полностью:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace MyClassLib
{
  [TemplatePart(Name=Clocks.RootElement,Type=typeof(Canvas))]
  public class Clocks : Control
  {
    private const string RootElement = "RootElement";

    private Canvas rootElement;

    public Clocks()
    {
      this.DefaultStyleKey = typeof(Clocks);

      this.SizeChanged += new SizeChangedEventHandler(Clocks_SizeChanged);      
    }

    private void Clocks_SizeChanged(object sender, SizeChangedEventArgs e)
    {
      this.Render();
    }

    private TextBlock textBlock;
    private DispatcherTimer timer;

    private void CreateContent()
    {
      this.textBlock = new TextBlock();
      this.textBlock.TextAlignment = TextAlignment.Center;      

      this.timer = new DispatcherTimer();
      this.timer.Interval = new TimeSpan(0, 0, 0);
      this.timer.Tick += new EventHandler(timer_Tick);
      this.timer.Start();

      this.UpdateClocks();

      this.rootElement.Background = new SolidColorBrush(Color.FromArgb(0xFF,0xDD,0xDD,0xDD));
      this.rootElement.Children.Add(this.textBlock);
    }

    private void timer_Tick(object sender, EventArgs e)
    {
      this.UpdateClocks();
    }

    private void UpdateClocks()
    {
      this.textBlock.Text = DateTime.Now.ToLongTimeString();
    }

    private void Render()
    {
      this.textBlock.Width = ActualWidth;
      this.textBlock.Height = ActualHeight;
    }

    public override void OnApplyTemplate()
    {
      base.OnApplyTemplate();

      this.rootElement = this.GetTemplateChild(RootElement) as Canvas;
      this.CreateContent();
    }
  }
}

* This source code was highlighted with Source Code Highlighter.

F6, F5:


Полностью Solution можно скачать здесь: anychart.com/batsuev/smth/MyClassLib.zip

UPDATE
По наводке konart (см в комментах habrahabr.ru/blogs/silverlight/47692/#comment_1228692 )

вышла книга(в эл. варианте) «Введение в Silverlight 2» — полностью на русском языке
линк на скачку: msdb.ru/Downloads/expression/resources/IntroducingMicrosoftSilverlight2.pdf

PS: спасибо «Бюллетень-молния MSDN» )