Conceitos do XAML (zãmeu) – Parte II

Neste artigo vou explicar mais detalhadamente alguns conceitos básicos do XAML. Este artigo é composto pelos seguintes itens:

• Propriedades e Layout (parte I);
• Containeres (este artigo);
• Brushes;
• Desenhos geométricos;

Containeres (Containers)

Em quase todos os artigos aparece o tal do container, mas afinal o quem são eles?

Bom. Os Containers são controles pais que podem conter filhos, ou seja, podem conter controles dentro deles, podendo ser ate mesmo outro container ou o mesmo. Por exemplo, dentro de um Canvas eu posso ter outro Canvas e dentro desse eu posso ter um StackPanel, independente da ordem ou tipo. Container agrupa controles e define a raiz do XAML em questão. Sendo assim todo controle XAML, como por exemplo, o Page.xaml, possui um controle raiz que deve ser um container, são eles: Canvas, StackPanel e Grid.

Canvas

O mais famoso dos containers. O controle Canvas possui a característica de posicionar os elementos em uma espécie de plano cartesiano, onde para seus controles filhos pode ser informada a posição em que serão desenhados, o X e o Y. Isso é definido pela attached property Canvas.Left e Canvas.Top respectivamente.

O xaml abaixo mostra como definir esta propriedade.

<UserControl x:Class="Blog_XamlBasics2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Rectangle Fill="Green" Width="200" Height="100"
                   Canvas.Left="50"/>
        <Rectangle Fill="Black" Width="200" Height="100"
                   Canvas.Left="100" Canvas.Top="180"/>
    </Canvas>
</UserControl>

A figura abaixo mostra o design deste XAML.

StackPanel

O StackPanel possui a característica de orientar seus controles filhos através da propriedade Orientation, que pode ter os valores Horizontal e Vertical. O XAML abaixo mostra um StackPanel com alguns controles sendo orientado horizontalmente e verticalmente, sendo, um StackPanel dentro do outro.

<UserControl x:Class="Blog_XamlBasics2.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <StackPanel x:Name="LayoutRoot" Background="White">
        <Rectangle Fill="Green" Width="100" Height="50"
                   Canvas.Left="50" Margin="0,10,0,0"/>
        <Rectangle Fill="Black" Width="100" Height="50"
                   Canvas.Left="100" Canvas.Top="180"/>
        <StackPanel Width="100" Height="160" Background="PeachPuff"
                    Orientation="Horizontal">
            <Button Content="Clique" Width="50" Height="25" />
            <Ellipse Fill="Blue" Width="50" Height="50"></Ellipse>
        </StackPanel>
    </StackPanel>
</UserControl>

(OBS: Por padrão o StackPanel recebe o valor Vertical na propriedade Orientation caso nenhum valor seja informado).

Abaixo uma figura ilustrando o design deste exemplo.

Se desejar deixar um espaço entre os controles basta mudar a propriedade Margin (Margem) dos controles filhos do StackPanel. A Propriedade Margin recebe um objeto Thickness que por sua vez recebe 4 valores sendo a quantidade de pixels que o controle se afastará dos vizinhos, na ordem esses 4 valores são respectivamente para a Esquerda (LEFT), Topo (TOP), Direita (RIGHT) e finalmente para Baixo (BOTTOM).

Já o valor Vertical da propriedade Orientation do StackPanel desenha seus controles verticalmente, um embaixo do outro.

(OBS.: A maioria dos controles que fazem parte do layout do Silverlight aceita a propriedade Margin).

Grid

O Grid foi adotado como controle container padrão no silverlight 2 (nas versões anteriores o container padrão era o Canvas) quando se cria um projeto, por exemplo. Este container traz muita facilidade na hora de estilizar o layout das páginas, pois utiliza o conceito de uma tabela (igual as tables no HTML) para desenhar os elementos filhos. Você pode tanto adicionar colunas como adicionar linhas e definir qual será sua largura (Width) e sua altura (Height) respectivamente.

O XAML e a figura abaixo mostra o Grid em ação.

<UserControl x:Class="Blog_XamlBasics2.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 Content="Clique Aqui!" Width="100"
               Height="35" Canvas.ZIndex="1"/>
        <Ellipse Fill="Red" Width="110" Height="40" />
    </Grid>
</UserControl>

(OBS: Utilizamos o Canvas.ZIndex para posicionar o botão na frente do círculo, isso funcionaria se o XAML do círculo fosse escrito primeiro que o do botão).

Caso não queira linhas ou colunas na Grid você pode optar por não adicioná-las, o Grid entende que possui somente uma linha e uma coluna, ambas com 100% largura (Width) e altura(Height).

Vamos criar um simples formulário de cadastro utilizando o container Grid para você ver como é simples e como muito parecido com o table do HTML. Primeiramente você define o Grid e algumas de suas propriedades como Background (Cor de fundo) e ShowGridLines (mostra a borda das colunas e linhas, muito utilizado para identificá-las).

<UserControl x:Class="Blog_XamlBasics2.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"
          ShowGridLines="True">
        <!-- Content do Grid -->
    </Grid>
</UserControl>

Após, é preciso definir as colunas, que nesse caso serão duas, uma para o rótulo do campo e a outra para o controle de entrada do campo, como por exemplo, o TextBox. O Grid possui uma coleção de colunas e linhas. Para adicionar uma coluna basta inserir um ColumnDefinition dentro da coleção de colunas, o Grid.ColumnDefinitions.

<UserControl x:Class="Blog_XamlBasics2.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"
          ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>
</UserControl>

(OBS: para que as propriedades Width e Height representam um altura/largura de100% utiliza-se o valor "*")

A figura abaixo mostra o design deste layout.

Basta seguir o mesmo caminho para inserir linhas no Grid. Assim como para as colunas, o Grid possui uma coleção de linhas, o Grid.RowDefinitions. Dentro desta coleção basta adicionar um ou mais RowDefinition. O XAML abaixo mostra como fica o layout de nosso formulário.

<UserControl x:Class="Blog_XamlBasics2.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"
          ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    </Grid>
</UserControl>

A figura abaixo mostra a aplicação silverlight em execução.

Observe como a propriedade ShowGridLines do container Grid ajuda a visualizar o layout da aplicação.

Agora so nos resta adicionar os controles em nosso formulário.

Para ordenar os controles filhos do container Grid utiliza-se as propriedades Grid.Column (começa do valor 0 que é padrão) para especificar a coluna em que o determinado controle será posicionado e a propriedade Grid.Row (o mesmo de Grid.Column) que especifica a linha onde será apresentado no Grid.

O XAML abaixo mostra a aplicação completa.

<UserControl x:Class="Blog_XamlBasics2.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"
          ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
       
        <!--COLUNA 0 - ROTULOS-->
        <!--
            Observe que não é preciso informar Gri.Column para a
            primeira coluna pois o valor 0 já é padrão para todos
            controles filhos de um controle container Grid. O mesmo
            se aplica para Grid.Row.
        -->
        <TextBlock HorizontalAlignment="Right"
                   VerticalAlignment="Center"
                   Text="Nome:"/>
        <!--Agora é preciso informar a linha (Grid.Row) dos controles-->
        <TextBlock HorizontalAlignment="Right"
                   VerticalAlignment="Center"
                   Grid.Row="1" Text="Idade:"/>
        <TextBlock HorizontalAlignment="Right"
                   VerticalAlignment="Center"
                   Grid.Row="2" Text="Email:"/>
       
        <!--COLUNA 1 - CAMPOS-->
        <!--
            Agora é preciso informar a coluna (Grid.Column) para o
            primeiro campo e para o restante informar tanto a coluna
            quanto a linha(Grid.Row).
        -->
        <TextBox x:Name="txtNome" Width="200" Height="25"
                 Margin="5" HorizontalAlignment="Left"
                 Grid.Column="1"/>
        <TextBox x:Name="txtIdade" Width="50" Height="25"
                 Margin="5" HorizontalAlignment="Left"
                 Grid.Column="1" Grid.Row="1"/>
        <TextBox x:Name="txtEmail" Width="200" Height="25"
                 Margin="5" HorizontalAlignment="Left"
                 Grid.Column="1" Grid.Row="2"/>
       
        <!--BOTÃO CADASTRAR-->
        <Button x:Name="btnCadastrar" Width="100" Height="25"
                HorizontalAlignment="Left" VerticalAlignment="Top"
                Grid.Column="1" Grid.Row="3" Content="Cadastrar"
                Click="btnCadastrar_Click"/>
    </Grid>
</UserControl>

(OBS: Não esqueça de tirar a propriedade ShowGridLines do controle Grid)

Observe que adicionamos um Evento (EventHandler) no Click do botão Cadastrar para mostrar uma mensagem de sucesso simulando que o cadastro foi efetuado e apresentando os dados informados. Abaixo segue o código do evento de Click do botão.

private void btnCadastrar_Click(object sender, RoutedEventArgs e)
{
    string cadastro = "O Cliente {0} do e-mail {1} e idade {2} " +
                      "foi cadastrado com sucesso!";

    MessageBox.Show(string.Format(cadastro, txtNome.Text,
        txtEmail.Text, txtIdade.Text));
}

As figuras abaixo mostram o programa em execução.

Clicando no botão Cadastrar...

Obrigado e até a próxima.

Silverlight Toolkit

Faz algum tempo que este projeto, open-source, está disponível para download no codeplex. O Silverlight toolkit é uma coleção de controles, componentes e utilitários que facilitam a vida do desenvolvedor e designer na plataforma silverlight. São muitos controles, desde gráficos, styling, layout, entrada de usuário.

Foto de alguns controles.

Acesse o site e fique por dentro desse pacote de facilidades que está ajudando o silverlight crescer mais ainda!

No blog do Jesse Liberty já possui muitos posts a respeito do controle mais fascinante do Toolkit, o AutoCompleteBox.
http://silverlight.net/blogs/jesseliberty/archive/2008/11/03/autocompletebox-control-worker-threads.aspx
(Obs.: Em inglês)

O Toolkit é open-source e você pode explorar como os controles foram desenvolvidos, lembrando que tudo foi desenvolvido com o silverlight e disponibilizado as DLL dos controles para que possamos adicioná-los em nossos projetos silverlight.

Logo estarei publicando artigos de como trabalhar com esses controles, por enquanto, estou arranjando tempo para terminar os artigos básicos para todos começarem a desenvolver nessa plataforma que só cresce!

Conceitos do XAML (zãmeu) - Parte I

Primeiramente gostaria de pedir desculpas pela demora para postar novos artigos, estou tendo muito problema com formatação dos códigos, perco mais tempo formatando do que fazendo o artigo. Desculpas também pelos erros de português.

Neste artigo vou explicar mais detalhadamente alguns conceitos básicos do XAML (lê-se zãmeu, no português ajeitado ;D). Este artigo é composto pelos seguintes itens:

• O XAML;
• Propriedades e Layout;
• Containeres;
• Brushes;
• Desenhos geométricos;

O XAML

Não podemos viver sem a definição concreta do XAML. Então ai está ;D.

O XAML (sigla de eXtensible Application Markup Language) foi criado pelo Microsoft e é a base do WPF (Windows Presentation Foundation) para criar interfaces de usuário (UI) ricas de forma muito simples e rápida. É uma linguagem declarativa baseado em XML. Você pode criar controles, nomeá-los, modificar propriedades de layout, enfim, produzir a UI. Ela separa a UI da lógica da aplicação através dos arquivos code-behind (os .cs, caso use C# como linguagem de programação). O mais importante é que o XAML representa a instanciação dos objetos na lógica da aplicação, isso é, o código conhece os controles criados dentro de um arquivo .xaml (conhecidos como managed objects). Com isso temos facilidades como depuração do projeto e acesso aos objetos da UI. Outra vantagem muito importante é que a estrutura do XAML permite não só separar a lógica do design como as duas profissões, o programador e o designer.

Propriedades e Layout

A maioria dos elementos que fazem parte do layout do Silverlight possui propriedades sendo elas próprias dos controles, herdadas de uma classe pai ou as chamadas "attached properties" que significa propriedades "amarradas". As Attached Properties são propriedades globais, muitas vezes modificam a apresentação de um controle que a utiliza. No exemplo abaixo, temos o XAML do Page.xaml (como criar projetos Silverlight utilizando Visual Studio 2008).

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
  <Button Content="Clique aqui!"
          Width="100" Height="50"
          Canvas.Left="100" Canvas.Top="5" />
</Canvas>
</UserControl>

Como pode notar, um caso bem comum de attached properties é a propriedade Canvas.Left ou Canvas.Top que define em que ponto o botão no XAML acima será desenhado. Estas propriedades não pertencem ao botão, ela é uma Attached property, uma variável global. Supondo que o não fosse o Canvas o container de Page.xaml e sim um Grid, por exemplo, esta propriedade não seria considerada, pois o botão não está dentro de um Canvas.

A apresentação dos controles XAML segue o estilo em camadas, o último controle aparece na frente dos outros caso esteja-os sobrepondo/cobrindo. O XAML abaixo mostra este exemplo, a figura 1 mostra a aplicação em execução.

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
  <Rectangle Fill="Green" Width="100" Height="100"
             Canvas.Top="50" Canvas.Left="150"/>
  <Rectangle Fill="Red" Width="100" Height="100"
             Canvas.Top="90" Canvas.Left="200"/>
</Canvas>
</UserControl>

Note que o retângulo vermelho esta cobrindo o verde, podemos mudar esta situação com a attached property Canvas.ZIndex, o controle com essa propriedade que possuir maior valor será visível acima de todos os outros. Já esta propriedade, ela pode ser considerada para outros controles containers como o Grid. Para que o retângulo verde sobreponha o vermelho basta definir o XAML de Page.xaml como mostrado abaixo.

<UserControl x:Class="BlogXamlBasics.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
  <Rectangle Fill="Green" Width="100" Height="100"
             Canvas.Top="50" Canvas.Left="150"
             Canvas.ZIndex="1"/>
  <Rectangle Fill="Red" Width="100" Height="100"
             Canvas.Top="90" Canvas.Left="200"/>
</Canvas>
</UserControl>

A figura abaixo mostra a aplicação em execução.

O Silverlight dispõe de inúmeras propriedades, não só attached properties, que constroem e estilizam interfaces de usuário (User Interfaces, UI), abaixo, coloquei algumas das mais utilizadas e para que servem.

Opacity (Opacidade)

Como o próprio nome já diz esta propriedade define a opacidade de um elemento. Seu valor pode ser atribuído de 0 (totalmente transparente) até 1 (totalmente opaco).

Cursor

Esta propriedade define a um determinado elemento qual cursor será visível quando o mouse pairar sobre ele. Supondo que vamos colocar um Cursor no botão do XAML abaixo. A lista de cursores possíveis está abaixo do XAML.

<Button Cursor="Hand" Content="Clique Aqui!" Width="100"
  Height="50" Canvas.Left="50" Canvas.Top="50"/>

• Arrow;
  
  
• Default – Nenhum cursor de preferência, utiliza o cursor do controle pai, se definido;
  
• Hand – Normalmente utilizado em links;
  
  
• IBean – Normalmente utilizado para seleção de texto;
  
  
• None – Sem cursor;
  
  
• Wait – Indica estado de espera e/ou processamento;
  

HorizontalAlignment e VerticalAlignment

Com essas propriedades podemos alinhar os elementos nos seguintes estilos:

Para a propriedade HorizontalAlignment temos:

• Center - Centraliza o elemento em relação ao seu container;
  
• Left - Posiciona o elemento na parte esquerda do container;
  
• Right - Posiciona o elemento na parte direita do container;
  
• Stretch - Faz com que o elemento preencha toda a parte horizontal do container;

e para a propriedade VerticalAlignment temos:

• Bottom - Posiciona o elemento na parte inferior do container;
  
• Center - Posiciona o elemento no centro do container, imagine um plano cartesiano e os eixos X e Y onde, para VerticalAlignment, o posicionamento é feito no eixo Y;
  
• Stretch - Faz com que o elemento preencha toda a parte vertical do container;
  
• Top - Posiciona o elemento na parte superior do container;

OBS.: Quando digo container me refiro ao controle que reside outro(s) controle(s), não sendo obrigatório os controles Canvas, StackPanel ou Grid.

Continua no próximo episódio... ;D

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.