Silverlight Hello World - não podia faltar

Um blog sem hello world não é um blog. O cara já começa com Avançado, assim não dá. ;D

Primeiramente quero dizer que estava pensando em um estilo diferente de "Hello World", vou mostrar diferentes maneiras de se criar um hello... oO. Cada um utilizando um recurso diferente do silverlight 2. Nos próximos posts vou focar nos conceitos básicos de controles e XAML, depois partir para animação. Então, aqui vai.

Crie uma aplicação silverlight, dei um nome de blogHelloWorld1, você pode dar um nome que deseja. Clique em OK para criar o projeto. Ao fazer isso, uma janela aparece perguntando se deseja criar uma aplicação WEB para residir sua aplicação silverlight, isso é explicado na seção Estrutura das aplicações Silverlight, assim como os arquivos gerados. Clique em OK novamente para criar a aplicação WEB. O Visual studio deve criar os arquivos e a aplicação vai parecer a figura abaixo.

Containers / Recipientes

No silverlight os controles são apresentados dentro de containers, que também são controles. Na versão 2 do silverlight podemos contar com alguns destes recipientes. O Grid, o StackPanel e o Canvas que tinha desde a versão 1 do silverlight. No próximo post estarei mostrando particularidades de cada um destes 3 controles. Mas para você não ficar na dúvida, basicamente o grid utiliza o recurso de linhas e colunas para formatar o layout de sua aplicação, já o StackPanel apresenta seus controles filhos de 2 formas diferentes, horizontalmente e verticalmente. O canvas por sua vez renderiza seus controles como se estivessem em um plano cartesiano, sendo X seu Width (Largura) e Y seu Height (Altura).
Por padrão, o Grid é o controle container que vem na Page.xaml, então, criaremos os controles dentro dele.

Propriedades dos controles

As propriedades dos controles silverlight tem um formato parecido com o ASP.Net porque é baseado em XML, mas para quem está bem acostumado com os controles WEB vai notar muitas diferenças. Por exemplo, todo controle ASP.Net possui um identificador chamado ID que é obrigatório, no silverlight podemos atribuir um identificador á um controle usando X:Name="abc", que não é obrigatório. A classe FrameworkElement prove uma API para todo controle que participa do layout do silverlight. Para exemplificar, abra o código fonte do controle Page.xaml no projeto silverlight, o arquivo Page.xaml.cs. Este código possui um método construtor da classe, nesse caso, o Page, e este possui um método InitializeComponent() que é basicamente encarregado por inicializar os controles que a página possui. Insira o código abaixo, que mostra como deve ficar o Construtor Page.

public Page()
{
InitializeComponent();


Button btn = new
Button();
btn.Name = "Hello_abc";


Rectangle rect = new
Rectangle();
rect.Name = "Hello_def";


FrameworkElement fnBtn = btn as
FrameworkElement;

FrameworkElement fnRect = rect as
FrameworkElement;


MessageBox.Show(fnBtn.Name + "\n" + fnRect.Name);
}

Como pode ver a classe FrameworkElement entende que o controle button, que herda de System.Windows.Controls e que Rectangle, que hera de System.Windows.Shapes são controles que fazem parte do layout do silverlight.

Eventos

Os eventos de controles no silverlight 2 é muito parecido com o que estamos acostumados em qualquer linguagem de programação, assim como com o C# no ASP.Net. Controles possuem propriedades e eventos. Eventos ocorrem basicamente numa interação de usuário, um Click de um botão, ou por questões da lógica do programa em si. Futuramente falarei melhor a respeito de eventos.

Vamos implementar um segundo exemplo no click de um botão, para apresentar um Olá Mundo/Hello World em um outro controle. Se desejar criar outro projeto para este segundo exemplo fique à-vontade, continuarei neste mesmo projeto. No controle Page.xaml crie os seguintes controles mostrado no XAML abaixo.

Podemos definir eventos para controles de 2 maneiras, via código, criando um EventHandler para o evento ou no próprio XAML, que o evento é definido igual as propriedades, colocando o nome do evento para o qual deve apontar. A primeira maneira é mostrado no código abaixo.

this.btnHelloWorld.Click += new RoutedEventHandler(btnHelloWorld_Click);

Quando terminar de digitar o ".Click +=", pressione TAB 2x para que crie automaticamente o EventHandler do Click do botão, o código abaixo mostra como deve ficar.

private
void btnHelloWorld_Click(object sender, RoutedEventArgs e)
{

throw
new
NotImplementedException();
}

A segunda maneira é mais simples ainda, no XAML do controle, basta definir o evento Click. (OBS: Apague o exemplo acima, se não o código vai possuir 2 EventHandler para um mesmo evento).

Clique em <New Event Handler> na janelinha que apareceu como mostra a figura acima, para criar no código o evento para o Click deste botão. Para ir até o evento no código clique com o botão direito no Click já preenchido com o nome do evento criado, aparecerá um menu, então clique em Navigate to Event Handler como mostra a figura abaixo.

No código de Page.xaml, o arquivo Page.xaml.cs, no evento Click do botão insira o seguinte código.

private
void btnHelloWorld_Click(object sender, RoutedEventArgs e)
{

if (lblHelloWorld.Text != "Hello World!")
lblHelloWorld.Text = "Hello World!";

else
lblHelloWorld.Text = "Dinovo não!";
}

Execute o projeto silverlight e veja como funciona! As 3 figuras abaixo mostra a aplicação silverlight em execução. Espero que tenham gostado e até a próxima.

Obrigado,
Danillo.