Silverlight 2: Trial Pen

"The best way to understand something is to explain it to another."
© Popular wisdom

I am almost a complete 0 in Silverlight, but there is a desire to fix it.
So let's get started.


What we will do:
1. Hello, World!
2. Simple component
')

Step # 1. Prerequires

So what we need.

1. Visual Studio 2008 SP1
   If there is no SP1, then we take it here:
   Full install: www.microsoft.com/downloads/details.aspx?familyid=27673C47-B3B5-4C67-BD99-84E525B5CE61&displaylang=en
   Updater that downloads everything by itself:
   www.microsoft.com/downloads/details.aspx?familyid=FBEE1648-7106-44A7-9649-6D9F6D58056E&displaylang=en
   
2. Silverligt Tools for VS 2008:
   Take here:
   www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

We put this and that.
Details and more read here: silverlight.net/GetStarted

Step # 2. Hello, World

In general, you can skip this step, because at silverlight.net/GetStarted there are video splints that describe everything in detail, but oh well.

Actually, how it all begins.

So, open a studio, create a new project.
File -> New -> Project

We are looking for Visual C # in the tree, and Silverlight is already in it. Next, select the Silverlight Application.
Project name essno HelloWorld.


OK, create. Next we are offered two ways to launch Silverlight applications. Select Automatically generate a test page to host Silverlight at build time (I select it because it’s not a bad thing to keep the memory running for the debug server as well).

And we have several automatically generated files:

1. App.xaml - used by Silverlight by the application to determine the global events of the application and something else that we are not interested in starting.
2. Page.xaml - a visual "presentation" of the application. An instance of Page is created in App.xaml.

So, open Page.xaml, open the Toolbox studio and drag TextBlock from the ToolBox to the xaml window.
Add a TextBlock text:

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

* This source code was highlighted with Source Code Highlighter .

Hit F6, then F5. Walla We are happy.


It was simple and trite.
The next step is, as our god OOP, we will make the component.

Step # 3. Create your component

Silverlight Class Library

To begin with, let's make our own plugin class library.
1. File -> New -> Project
2. Visual C # -> Silverlight Class Library
Name - MyClassLib

We will do component for hours. I do not know why, but I want to.

So, we rename the Class1.cs file created by the studio into Clocs.cs
The component must be visual, accordingly we follow the Clocks class from Control.

Next a bit of shamanism. (It cost a lot of blood)
In order for our component to have a visual presentation, we do the following:
Create a folder Themes, in it create a file generic.xaml

This is the default "theme" of the component. In it we register the following:

< 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 .

We have created a default template, to which we can reach out and get from it a link to the Canvas, in which we will draw.

So, now rule Clock class and get in it a link to the 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 .

Walla Now we draw a rectangle in Clocks, in order to exclaim: “Oh ** t! Works!".

In the constructor, we prescribe a listener for the resize event:

this .SizeChanged += new SizeChangedEventHandler(Clocks_SizeChanged);

* This source code was highlighted with Source Code Highlighter .

And we add a field with a link to the Rectangle and the methods for creating and drawing it:

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. Completing the component

Now we attach a TextBlock with a clock to our class and wala!

Class code in full:

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:


Fully Solution can be downloaded here: anychart.com/batsuev/smth/MyClassLib.zip

UPDATE
On a tip from konart (see comments habrahabr.ru/blogs/silverlight/47692/#comment_1228692 )

the book was published (in the electronic version) “Introduction to Silverlight 2” - fully in Russian
download link: msdb.ru/Downloads/expression/resources/IntroducingMicrosoftSilverlight2.pdf

PS: thank you MSDN Lightning Bulletin)