July 2007 - Posts
Você tem uma porção de arquivos MP3 e WMA jogados em seu disco e nem sabe que músicas eles contém. O meu novo utilitário da PCMagazine, o RenaMusic permite verificar (e alterar) os tags dos arquivos e renomeá-los ou movê-los para uma pasta, usando os dados contidos nas tags para criar o novo nome. Assim, se você criar um padrão como "C:\Musicas\<Artist>\<Title>", o programa irá criar uma pasta para cada artista no diretório "C:\Musicas" e organizar as músicas nestas pastas, renomeando-os usando o título da música contido na tag.
Se você se interessou, dê uma olhada em http://www.pcmag.com/article2/0,1895,2162882,00.asp
Aproveite também para conferir os outros meus utilitários, como o InstaBack, NetShare Manager, ou mesmo o NoteWhen, entre muitos outros.
Se você gostou do Family.Show, que descrevi aqui, você não foi o único. Os downloads e o feedback para o programa foram tão grandes, que está sendo lançada a versão 2.0, com novos recursos, como temas, entrada de dados em uma grid, visual mais rico.
Se você ainda não conferiu, pode baixar a nova versão no CodePlex. O código fonte também está disponível para você analisar.
Celso Gomes, um brasileiro que está trabalhando na Microsoft, em Redmond, na equipe do Expression Blend, é um designer de mão cheia, com trabalhos muito bonitos.
Ele criou um site com tutoriais de Silverlight e WPF, o NibblesTutorials, vale a pena conferir. Se você prefere os tutoriais em português, dê uma olhada aqui
Um efeito muito interessante é aquele que temos no Expression Blend, quando selecionamos Tools/Options e mudamos o valor de Workspace zoom: podemos mudar o tamanho dos controles, aumentando-os ou diminuindo-os como um todo, permitindo que a visualização fique mais comoda.
A obtenção deste efeito com WPF é muito simples: basta colocar todos os controles que queremos dar o zoom num conteiner, por exemplo, num Canvas e aplicar uma transformação de escala (ScaleTransform) sobre ele. Todos os controles dentro dele serão aumentados ou diminuídos simultaneamente, dando o mesmo efeito que temos no Blend.
Ao digitar este código no XamlPad ou XamlCruncher, você verá que pode alterar o zoom dos componentes na janela ao mudar a posição do Slider:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid RenderTransformOrigin="0,0">
<Grid.RowDefinitions>
<RowDefinition Height="0.85*"/>
<RowDefinition Height="0.15*"/>
</Grid.RowDefinitions>
<StackPanel Margin="8,8,8,8" Grid.Row="1">
<Slider Width="308" Height="16" Maximum="2" x:Name="Slider" Value="1"/>
</StackPanel>
<Canvas>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform
ScaleX="{Binding Path=Value, ElementName=Slider, Mode=Default}"
ScaleY="{Binding Path=Value, ElementName=Slider, Mode=Default}"
/>
</TransformGroup>
</Canvas.RenderTransform>
<TextBox Text="TextBox" Canvas.Left="10" Canvas.Top="10"/>
<Label Content="Label" Canvas.Left="10" Canvas.Top="50"/>
<CheckBox Content="CheckBox" Canvas.Left="10" Canvas.Top="100"/>
<ListBox Width="188" Height="100" Canvas.Left="10" Canvas.Top="150">
<ListBoxItem Content="Item 1"/>
<ListBoxItem Content="Item 2"/>
<ListBoxItem Content="Item 3"/>
<ListBoxItem Content="Item 4"/>
<ListBoxItem Content="Item 5"/>
</ListBox>
<ComboBox Width="196" Canvas.Left="10" Canvas.Top="282">
<ComboBoxItem Content="Item 1"/>
<ComboBoxItem Content="Item 2"/>
<ComboBoxItem Content="Item 3"/>
</ComboBox>
</Canvas>
</Grid>
</Window>
O segredo está nestas linhas:
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding Path=Value, ElementName=Slider, Mode=Default}"
ScaleY="{Binding Path=Value, ElementName=Slider, Mode=Default}" />
</TransformGroup>
</Canvas.RenderTransform>
Aqui fazemos a escala do canvas que contém os outros componentes. Note que estamos fazendo o data binding com a posição do slider. Assim, quando movimentamos o slider, todos os componentes aumentam ou diminuem.
Meu filho Roberto e eu escrevemos um novo artigo sobre WPF, o sexto da série, sobre animação. Se você quer conhecer um pouco sobre este recurso do WPF, confira em http://www.microsoft.com/brasil/msdn/tecnologias/netframework/Animacao_WPF.mspx
Se você ainda não está convencido que o WPF irá mudar a maneira que desenvolvemos programas (e a maneira que nossos usuários irão vê-las), sugiro que dê uma olhada no Family.Show, em http://www.vertigo.com/familyshow.aspx.
Esta é uma aplicação de árvore genealógica, porém ela dá uma renovada no aspecto da aplicação: seu design é muito bonito, a interface com o usuário é simples mas, ao mesmo tempo, o programa é completo e eficiente.
O programa mostra a árvore genealógica na parte esquerda da janela. À direita, é mostrada a pessoa selecionada. Podem-se acrescentar fotos, dados sobre a pessoa ou mesmo textos que descrevam-na. Quando você seleciona outra pessoa, a árvore genealógica se desloca, mostrando o ramo referente a ela.
Uma característica interessante é o slider de visualização da linha do tempo: à medida que alteramos a posição (mudando o ano), as pessoas ficam transparentes (não nascidas) ou escuras (já falecidas). Este é um exemplo típico de data binding, que pode ser feito sem código no WPF.
Neste programa vemos exemplos de data binding, animações, visual rico, textos WYSIWYG, estilos e templates e muito mais...
Você pode instalá-lo via ClickOnce e montar sua própria árvore genealógica, ou mesmo estudar o código fonte, que está disponível aqui.
Nesta postagem irei mostrar duas coisas interessantes em WPF: como é fácil fazer uma animação e como podemos dar um efeito interessante, mais realista a ela, de maneira muito simples.
Uma animação em WPF é criada usando-se um Storyboard. Nele colocamos os efeitos de animação que queremos dar a um elemento do desenho. Um efeito de animação pode ser gerado, por exemplo, com o DoubleAnimation. O DoubleAnimation, como o nome já diz, anima uma propriedede do objeto que tem tipo Double, como por exemplo a posição (Canvas.Left ou Canvas.Top).
O seguinte código faz que uma elipse fique ziguezagueando na janela quando ela é carregada:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Width="100" Height="100" Fill="Red">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="300" To="0" RepeatBehavior="Forever"
AutoReverse="True" Duration="0:0:0.5"
Storyboard.TargetProperty="(Canvas.Top)" />
<DoubleAnimation From="0" To="600" RepeatBehavior="Forever"
Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:3"
AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Canvas>
Esta linha anima a posição vertical (Canvas.Top), da posição 300 até a posição 0, com duração de 5 segundos. Esta animação é repetida indefinidamente e, ao final, o movimento é revertido
<DoubleAnimation From="300" To="0" RepeatBehavior="Forever" AutoReverse="True"
Duration="0:0:0.5" Storyboard.TargetProperty="(Canvas.Top)" />
A outra linha anima a posição horizontal, com duração de 3 segundos. A composição das duas animações faz com que a elipse fique fazendo um ziguezague até que a aplicação seja fechada. Mas isso não é tudo. Podemos ainda dar o efeito da gravidade à elipse, fazendo que ela simule uma bola pulando. Para isso usamos o DecelerationRatio. Esta propriedade varia entre 0 e 1 e irá dizer o percentual da animação que será desacelerada. Por exemplo, se o valor dela for 0.33, então o último terço do movimento será desacelerado. Para simularmos o efeito da gravidade, aplicamos o DecelerationRatio na animação da posição vertical:
<DoubleAnimation From="300" To="0" RepeatBehavior="Forever" AutoReverse="True"
Duration="0:0:0.5" Storyboard.TargetProperty="(Canvas.Top)" DecelerationRatio="1"/>
Com esta alteração simples, nossa animação que era um simples ziguezague, passa a simular uma bola pulando, com o efeito da gravidade.
Se você ainda não está convencido do que é possível fazer com o WPF, sugiro que teste a seguinte linha no XamlPad (ou então crie um arquivo no bloco de notas e salve-o com extensão XAML):
<InkCanvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" />
Você acabou de criar um tablet. No XamlPad, você pode desenhar usando o mouse ou, se tiver um tablet, usando a caneta. Você pode ainda incrementar um pouco seu desenho mudando as cores de desenho, com
<InkCanvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<InkCanvas.DefaultDrawingAttributes>
<DrawingAttributes Color="Red" />
</InkCanvas.DefaultDrawingAttributes>
</InkCanvas>
Se quiser, pode ainda suavizar as curvas desenhadas, transformando-as em splines com o atributo
FitToCurve:
<InkCanvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<InkCanvas.DefaultDrawingAttributes>
<DrawingAttributes Color="Red" FitToCurve="True"/>
</InkCanvas.DefaultDrawingAttributes>
</InkCanvas>
Fácil, não? Mas isso não é tudo. Se você salvar este código em um arquivo com extensão XAML e abri-lo no Internet Explorer, você terá transformado seu browser num tablet.
Para mostrar um pouco do poder do data binding (ligação de dados - para ver mais, dê uma olhada aqui) no WPF, vamos criar uma lista de fontes do sistema.
Esta lista mostra todos os fontes instalados e mostra um exemplo do texto quando selecionamos um dos fontes da lista.
No XamlPad (se você não tiver instalado o Windows SDK, pode usar outro editor XAML, como o XamlCruncher ou o KaXaml), digite o seguinte código:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<ListBox HorizontalAlignment="Stretch"
Margin="0,0,5,0" x:Name="ListBox"
VerticalAlignment="Stretch"
ItemsSource="{Binding Source={x:Static
Fonts.SystemFontFamilies}}"
IsSynchronizedWithCurrentItem="True"/>
<GridSplitter HorizontalAlignment="Right"
VerticalAlignment="Stretch" Width="5"/>
<TextBox HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontFamily="{Binding Path=SelectedItem,
ElementName=ListBox, Mode=Default}"
FontSize="48" Grid.Column="1"
Text="The quick brown fox jumps over the lazy dog"
TextWrapping="Wrap"/>
</Grid>
</Window>
Pronto. Ao teclar F5 (ou F7, no XamlCruncher) você tem uma nova janela que mostra todos os fontes do sistema.
O segredo está nos seguintes códigos:
ItemsSource="{Binding Source={x:Static Fonts.SystemFontFamilies}}"
FontFamily="{Binding Path=SelectedItem, ElementName=ListBox, Mode=Default}"
O primeiro liga os itens da ListBox à coleção SystemFontFamilies da classe Fonts da CLR e a segunda liga o nome do fonte da caixa de texto ao item selecionado da ListBox.
Fácil, não? Isto é só um pequeno exemplo do que pode ser feito...
Até agora, programas WPF só podiam rodar no Windows como aplicações desktop, ou no IE6/IE7, como XBAPs (para dar uma olhada como isso funciona, abram o link http://scorbs.com/workapps/woodgrove/FinanceApplication.xbap no IE - o .net Framework 3.0 deve estar instalado), sem necessidade de alterar o código fonte.
Já com Silverlight é uma outra história: ele roda em IE/FireFox/Safari para Windows ou Mac, mas é mais limitado que um programa WPF e só roda no browser.
Mas, sem muito alarde, foi anunciado que os programas WPF deverão rodar em FireFox, com o .net Framework 3.5. Veja aqui: http://blogs.zdnet.com/Stewart/?p=320. Quando isso acontecer, teremos mais uma plataforma para rodar os programas WPF, expandindo ainda mais as possibilidades de uso.
O WPF (Windows Presentation Foundation) foi introduzido com o .net Framework 3.0 e tem muitos recursos para o desenvolvimento de aplicações ricas:
- Independente de resolução
- Mesmo código para Windows e Web
- Layouts dinâmicos
- Estilos
- Modelos (Templates) – possibilidade de skins
- Data binding
- Gráficos vetoriais
- Visual rico
- Animações
- 3D
- Internacionalização, Reconhecimento de voz, Ink...
Se você ainda não conhece o WPF, aqui vai uma introdução de como você pode se aprofundar um pouco mais:
- Baixe o .net Framework 3.0 (se você está usando Vista, não precisa, pois ele já vem instalado)
- Instale o Visual Studio 2005 Express ou o Visual Studio 2008 ("Orcas")
- Se você instalou o VS2005, instale as extensões para o Visual Studio
- Opcionalmente, instale o Windows SDK. Não é obrigatório, mas ele tem muitos exemplos e ferramentas para ajudar no desenvolvimento
- Baixe o Expression Blend. A versão 1 é paga, você pode baixar um trial e a versão 2 está em beta e pode ser baixada aqui
Uma vez que você baixou e instalou os programas necessários, é hora de conhecer o WPF. Uma boa sugestão é a coleção de artigos que eu e meu filho Roberto criamos para o MSDN:
Vale a pena conhecer esta nova tecnologia que, sem dúvida, irá revolucionar a maneira que fazemos programas.