O Silverlight tem se consolidado no mercado de desenvolvimento de aplicativos Web de interfaces ricas e neste artigo veremos uma aplicação onde alguns conceitos são aplicados, como criação de estilos, o uso de telas modais, otimização do uso do controle ComboBox e a customização do DataGrid. O bom entendimento desses conceitos pode fazer a diferença em seu aplicativo.
Para que serve
Customizar a interface do usuário, fazendo com que um aplicativo tenha uma boa aparência, não cansativa, mas, mais do que isso, deve ser eficiente para exibir a maior quantidade de dados relevantes, para que se facilite a usabilidade.
Em que situação o tema é útil
Para a apresentação de dados, de uma forma mais perceptível. Por exemplo, o que é mais fácil de ser analisado, uma tabela repleta de números ou um gráfico que representa os números da tabela? Seguindo esse princípio uma exibição coerente pode dar mais agilidade ao usuário em suas tomadas de decisão.
Resumo do DevMan
Silverlight 3.0 vem sendo cada
vez mais utilizado na criação de aplicações ricas e interativas. Criar módulos
externos que se encaixam em aplicações e-business ficou fácil com Silverlight.
Um ponto importante é que desenvolvedores que trabalham com sistemas Windows
Forms sentem menos dificuldade ao desenvolver aplicações Silverlight do que
desenvolver aplicações ASP.NET, isto ocorre pelo fato de utilizar C# no
cliente.
Autores: Brenno Sant'Anna Scarpelini e Drausio Henrique Chiarotti
Neste artigo focamos a parte de formatação e estilo Silverlight, ou seja, vamos mostrar para o desenvolvedor uma forma simples e rápida de criar uma aplicação com o mínimo de estilo e formatação. Vamos iniciar criando uma tela principal que exibe o nome do usuário, menu e informações de rodapé. Em seguida, vamos mostrar uma alternativa para formulário modal. Nos formulários modais vamos apresentar como utilizar a grade de visualização (DataGrid), explicando como alinhar os dados nas colunas, como aplicar formatação de números e datas, e como alterar a cor das linhas. Ainda, nas telas modais vamos mostrar como trabalhar com caixa de listagem (ComboBox) em cascata, dando dicas importantes no Silverlight e por fim criar estilos que serão aplicados nas caixas de texto, botões, e outros controles do Silverlight 3.0.
Para conquistar maior intimidade com os controles xaml, não utilizamos o Blend neste artigo. Para acompanhar é importante que seu Visual Studio 2008 esteja preparado para o Silverlight 3.0. Se você ainda não configurou seu Visual Studio, acesse o link disponível no fim do artigo e baixe os pacotes necessários.
Criando a solução
A solução é utilizada para agrupar projetos que estão relacionados e guardar as informações das dependências dos projetos que são utilizadas no processo de construção (build). Na nossa aplicação a solução será composta por uma aplicação Silverlight e o Web Site. Para criar uma nova solução abra o Visual Studio 2008, no menu File>New e então selecione Project. Será exibida a janela New Project. Localize a janela Project types, clique sobre (expandir) o item Other Project Types e então selecione o item Visual Studio Solutions. Na janela Templates selecione o item Blank Solution. Na parte inferior da janela altere a propriedade Name para EstiloSilverlight e altere também a propriedade Location informando o local onde a solução será salva. No Visual Studio vá no menu View > Solution Explorer. Note que foi criada uma solução chamada EstiloSilverlight onde vamos adicionar nossos projetos.
Criando a aplicação Silverlight e o Web Site
Vamos inserir a aplicação Silverlight e o Web Site na solução. Para criar um novo projeto, abra a solução, acesse o menu File>Add>New Project. Na janela Add New Project localize a janela Project types e selecione o item Silverlight, conforme Figura 1. Ainda, na janela Add New Project, selecione o template Silverlight Application, altere o campo Name para SilverlightApplication e na propriedade Location aponte para a pasta onde está sua solução (exemplo: C:\ProjetosSolucaoSilverlight).
Figura 1. Criando o projeto Silverlight
Será exibida uma mensagem comunicando que para rodar uma aplicação Silverlight você precisa de uma página. Neste artigo optamos por criar um Web Site na mesma solução para hospedar a aplicação Silverlight. Marque a opção para adicionar um novo projeto Web ASP.NET na solução. Na parte de opções selecione ASP.NET Web Site e informe um nome para o Web Site, conforme Figura 2.
Figura 2. Criando o Web Site
O foco deste artigo é a aplicação Silverlight, isto é, não vamos detalhar como o Web Site roda a aplicação ou como criar uma nova página no Web Site para rodar a aplicação Silverlight, mas vamos direcionar nosso conteúdo para o Silverlight.
Quando uma nova aplicação Silverlight é criada, são adicionados na aplicação os arquivos App.xaml e MainPage.xaml. O arquivo App.xaml é a aplicação, ou seja, é semelhante ao arquivo Program.cs de uma aplicação Windows Forms.
O arquivo MainPage.xaml é um UserControl, ou seja, um controle com extensão .xaml que pode ser implementado pelos desenvolvedores. Este arquivo permite que os desenvolvedores possam implementar funcionalidades interação com o usuário dentro de controles re-utilizáveis.
Como nossa aplicação está sendo criada do zero, vamos excluir o arquivo MainPage.xaml e criar um novo controle que será exibido quando a aplicação for iniciada. Clique sobre o arquivo MainPage.xaml e selecione a opção Exclude From Project.
Criando a interface da tela principal
Vamos iniciar o desenvolvimento adicionando um novo controle que será iniciado quando a aplicação for iniciada. Este controle será o nosso formulário principal onde vamos implementar o menu. Para adicionar um novo controle na aplicação Silverlight, clique com o botão direito no projeto SilverlightApplication, selecione o item Add e clique na opção New Item. Na janela Add New Item selecione o template Silverlight User Control, altere o campo Name para FrmPrincipal e clique em Add. Para este controle ser exibido quando a aplicação for iniciada, vá no código (.cs) do arquivo App.xaml e altere no método Application_Startup, em sua única linha para:
this.RootVisual = new FrmPrincipal();Esta alteração faz com que o controle FrmPrincipal seja o primeiro a ser executado quando a aplicação for iniciada.
Clique com o botão direito sobre o controle FrmPrincipal e selecione Open. No código xaml remova a largura e a altura (width e height) do controle. Note que o código xaml contém um grid chamado LayoutRoot. Altere o nome para GridPrincipal e remova a cor de fundo (background), conforme mostra Listagem 1. O primeiro passo que devemos seguir é adicionar as barras de rolagem no controle principal. As barras serão o container do GridPrincipal, conforme Listagem 1.
Listagem 1. Adicionando barra de rolagem no controle principal
<UserControl x:Class="SilverlightApplication.FrmPrincipal"
xmlns="http://schemas.microsoft.com/
winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/
winfx/2006/xaml">
<ScrollViewer HorizontalScrollBarVisibility=
"Auto" VerticalScrollBarVisibility=
"Auto" BorderThickness="0" Padding="0">
<Grid x:Name="GridPrincipal">
</Grid>
</ScrollViewer>
</UserControl>Note que foi adicionado o elemento ScrollViewer que contém os atributos: HorizontalScrollBarVisibility, como o próprio nome diz, é a visibilidade da barra horizontal, o atributo VerticalScrollBarVisibility é a visibilidade da barra vertical, BorderThickness define a espessura da borda e o atributo Padding define o espaçamento. Marcando o valor das propriedades como Auto faz com que as barras sejam exibidas somente quando necessárias.
Agora vamos definir o número de linhas e colunas do GridPrincipal e adicionar um segundo Grid, conforme ...
