Novo utilitário meu na PCMagazine


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.


Family.Show 2.0

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.

Zoom na aplicação

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>

 

Zoom

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.

Exemplo de programa em WPF

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.

familyshow

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.

Animação com efeitos especiais

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.

Crie um tablet com uma linha de código

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.

Lista de fontes do sistema em WPF sem código

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.

image

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…

WPF rodando no FireFox

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.