Bruno Sonnino : WPF

Desenvolvendo com Multi Touch para Windows 7

bsonnino — Sat, 28 Nov 2009 07:37:00 GMT

Se você quer saber como desenvolver para multitouch em Windows 7, não pode perder o webcast que irei fazer no dia 3/12/2009, às 12:00.

Lá irei mostrar como desenvolver aplicações que usam o recurso do multitouch, usando .net Framework 3.5 e também mostrando como programar multitouch com o WPF4, que vem por aí. Ah, e se você não tem um hardware multitouch, não tem problema: eu irei mostrar como contornar isso, usando dois mouses.

A inscrição é gratuita e pode ser feita em https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032433821&EventCategory=4&culture=pt-BR&CountryCode=BR

Até lá

Bruno

Interoperabilidade entre WPF e Windows Forms

bsonnino — Sat, 14 Feb 2009 06:30:00 GMT

Se você tem aplicações Windows Forms e quer portá-las para WPF, não precisa fazer todo o trabalho de uma única vez. Você pode misturar controles e janelas WPF nas aplicações Windosw Forms (e também colocar controles WinForms em aplicações WPF). Se quer saber mais sobre isso, pode dar uma olhada em meu artigo no portal MSDN Brasil: http://msdn.microsoft.com/pt-br/library/dd448660.aspx

Lá eu mostro como colocar um controle WPF em janelas WinForms, controles WinForms em janelas WPF e como chamar janelas WinForms em programas WPF.

10K Smart Coding Challenge

bsonnino — Thu, 18 Dec 2008 18:43:00 GMT

Você quer ir ao Mix 2009, em Las Vegas, mas o dinheiro está curto? Bem, aqui está sua oportunidade de ir ao Mix, com entrada, hotel e mais $1500 no bolso: o concurso 10K Smart Coding Challenge: crie um programa Silverlight ou WPF com até 10K de código fonte e concorra a uma viagem ao Mix. O regulamento e os dados estão em http://2009.visitmix.com/MIXtify/TenKGallery.aspx

Boa Sorte!

Usando a DataGrid WPF

bsonnino — Fri, 12 Dec 2008 20:30:00 GMT

Uma das críticas ao WPF é que não havia uma DataGrid para mostrar os dados em formato de tabela. Bem, isso é passado. A Microsoft lançou a Datagrid no WPF toolkit, que pode ser baixado em http://www.codeplex.com/wpf. Ela é bastante poderosa e versátil. Se você não sabe como usá-la, pode checar meu artigo no portal Linha de Código em http://www.linhadecodigo.com.br/Artigo.aspx?id=2163

Vale a pena dar uma conferida!

Criação de aplicativos LOB (Line-of-Business) com WPF

bsonnino — Fri, 21 Nov 2008 20:42:00 GMT

Se você achava que é muito difícil desenvolver aplicações LOB com WPF, precisa ver este meu novo artigo que foi publicado no site Linha de Código (http://www.linhadecodigo.com.br/Artigo.aspx?id=2138). Lá eu mostro como desenvolver uma aplicação LOB com WPF, usando LINQ to SQL.

No artigo eu mostro como fazer a inclusão, alteração e exclusão usando LINQ to SQL. Lá também mostro como criar um UserControl que é instanciado em tempo de execução e permite editar os registros detalhes tabelas relacionadas como mestre-detalhe. Vale a pena dar uma olhada e ver que não é tão complicado desenvolver aplicações LOB com WPF

Gravação de meu Webcast no MSDN

bsonnino — Sat, 08 Nov 2008 08:37:00 GMT

Se você não teve oportunidade de assistir meu webcast Aplicações = Desenvolvedores + Designers do dia 30/10, agora pode baixá-lo no MediaCenter do MSDN. O link é https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?culture=pt-BR&EventID=1032392195&CountryCode=BR

Vale a pena assistir, ele mostra como a interação entre designers e desenvolvedores pode transformar uma aplicação simples como um catálogo de móveis numa bonita aplicação. Este webcast foi baseado numa apresentação dada no Mix 2008, pelo Kirupa Chinnathambi e pelo Celso Gomes, dois feras do time de Expression Blend.

O código fonte da aplicação está anexo a este post

Novos controles para WPF

bsonnino — Fri, 31 Oct 2008 15:05:00 GMT

Uma das críticas mais ouvidas sobre o WPF é a falta de alguns controles, como a Grid, o DateTimePicker, entre outros. Pouco a pouco, a Microsoft está lançando estes controles. Você pode baixar o código fonte da Grid e do DateTimePicker no CodePlex em http://www.codeplex.com/wpf/Release/ProjectReleases.aspx?ReleaseId=15598

Se quiser, pode baixar também o Ribbon para WPF. Para isso, você deve it para o site de licenciamento do Office, aceitar a licença do Office UI e baixar o código fonte. Os passos para isso estão em http://www.codeplex.com/wpf/Wiki/View.aspx?title=WPF%20Ribbon%20Preview

Mas isto não é tudo, porque aí vem mais. Dêem uma olhada em http://www.codeplex.com/wpf/Wiki/View.aspx?title=Futures%20Roadmap&referringTitle=Home

Webcast sobre criação de aplicações WPF com Visual Studio e Blend

bsonnino — Mon, 27 Oct 2008 18:25:00 GMT

Na quinta feira, dia 30/10/2008, às 12:00, estarei apresentando um novo webcast no MSDN, sobre desenvolvimento de aplicações WPF com o Visual Studio e o Blend. Este webcast vai mostrar a interação entre designers e desenvolvedores, com a finalidade de criar uma bonita aplicação em WPF. Vale apena assistir. O link para inscrição é https://msevents.microsoft.com/CUI/WebCastEventDetails.aspx?EventID=1032392194&EventCategory=4&culture=pt-BR&CountryCode=BR

Lançado o starter kit para criação de readers em WPF

bsonnino — Wed, 16 Jan 2008 20:27:00 GMT

Se você ainda não conhece o New York Times Reader vale a pena conhecê-lo, pois é um ótimo exemplo de aplicação WPF.

Se você gostou mesmo dele e quer desenvolver algo semelhante, chegou a hora: a Microsoft lançou o reader toolkit, com o nome de Syndicated Client Experiences Starter Kit para que qualquer um possa desenvolver seus readers. Além diss, ela disponibilizou um reader muito interessante do MSDN Magazine com código fonte. Vale a pena dar uma olhada!

Zoom no canvas em WPF

bsonnino — Fri, 11 Jan 2008 13:50:00 GMT

Muitas vezes, queremos fazer um zoom em componentes WPF. Como todo o desenho é vetorial, não há perda de resolução neste processo.

Uma maneira de fazer o zoom é usar uma transformação, do tipo ScaleTransform. O ScaleTransform aumenta ou diminui o tamanho do componente, segundo suas propriedades ScaleX e ScaleY. Por exemplo, se quisermos aumentar ou diminuir o zoom no canvas do post anterior, podemos fazer o seguinte: no arquivo xaml, criamos um DockPanel para armazenar os botões e o canvas:

<DockPanel> <StackPanel Orientation="Horizontal" Height="40" DockPanel.Dock="Top"> <Button x:Name="maisZoom" Click="maisZoom_Click" Margin="5" Content="Mais zoom"/> <Button x:Name="menosZoom" Click="menosZoom_Click" Margin="5" Content="Menos zoom"/> <TextBlock x:Name="textZoom" Text="Zoom: 100%" VerticalAlignment="Center" Margin="5"/> </StackPanel> <Canvas....> </Canvas> </DockPanel>

Na parte superior do DockPanel colocamos um StackPanel. Nesse StackPanel colocamos dois botões e um textblock que irá mostrar o zoom atual.

Em seguida, criamos uma transformação (LayoutTransform) para o canvas, inicializando a escala para 1:

      <Canvas...>
      <Canvas.LayoutTransform>
        <ScaleTransform x:Name="canvasZoom" ScaleX="1" ScaleY="1" />
      </Canvas.LayoutTransform>

Finalmente, colocamos o código para o evento Click dos botões:

        private void maisZoom_Click(object sender, RoutedEventArgs e)
        {
            canvasZoom.ScaleX += 0.1;
            canvasZoom.ScaleY += 0.1;
            textZoom.Text = String.Format("Zoom: {0}%", canvasZoom.ScaleX * 100);
        }

        private void menosZoom_Click(object sender, RoutedEventArgs e)
        {
            canvasZoom.ScaleX -= 0.1;
            canvasZoom.ScaleY -= 0.1;
            textZoom.Text = String.Format("Zoom: {0}%", canvasZoom.ScaleX * 100);
        }

Executando o programa, vemos que os botões aumentam ou diminuem o zoom do canvas, sem nenhuma perda de resolução.

Quando aumentamos o zoom, o Canvas aumenta de tamanho, mas não há nenhuma indicação disso: devemos aumentar nossa janela para ver o restante da imagem. Podemos usar barras de rolagem para ver o restante da imagem quando o zoom é maior que 100%. Para isso, colocamos o Canvas dentro de um ScrollViewer:

     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
      <Canvas ...>
         ....      
      </Canvas>
    </ScrollViewer>

O ScrollViewer apresenta barras de rolagem que são mostradas quando o tamanho de seu conteúdo é maior que seu tamanho. Assim, se dermos um zoom no Canvas que faça que ele fique maior que a área útil do ScrollViewer, as barras de rolagem aparecerão.

O projeto completo pode ser baixado aqui

Movendo Shapes com o mouse em WPF

bsonnino — Wed, 09 Jan 2008 07:30:00 GMT

Em WPF, uma Shape (retângulos, elipses, linhas,..) é um FrameworkElement e recebe os eventos de mouse e teclado, como qualquer outro FrameworkElement (botões, por exemplo). Isto é muito diferente de WinForms, onde as formas desenhadas usando GDI+ são apenas desenhos na tela e não recebem nenhum evento.

Podemos usar isso para movimentar nossas shapes com o mouse usando os eventos PreviewMouseLeftButtonDown, PreviewMouseLeftButtonUp e PreviewMouseMove.

Inicialmente, colocamos algumas shapes no Canvas:

Como podemos ver, colocamos os manipuladores de eventos no Canvas. Devido ao recurso de Bubbling e Tunneling, os eventos são propagados por toda a árvore de elementos e, quando clicamos em qualquer uma das shapes, o Canvas recebe o evento também. Assim, podemos processar os eventos em um único local, não nos preocupando de atribuir os manipuladores para cada shape do desenho.

No código fonte, definimos alguns campos auxiliares:

        Point start; // Ponto base para a movimentação
        int currentZ = 0; // Z-Index atual
        bool isDragging = false; // Está movendo?
        Shape movedElement; // Elemento sendo movido

O manipulador para o evento PreviewMouseLeftButtonDown é:

        private void canvas1_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            // Verifica se clicamos numa Shape
            if (e.Source is Shape)
            {
                // Pega posição atual do mouse
                start = e.GetPosition(canvas1);
                // Inicializa variáveis e configura opacidade da shape para 0.5
                isDragging = true;
                movedElement = (Shape)e.Source;
                ((Shape)e.Source).Opacity = 0.5;
                canvas1.CaptureMouse();
                e.Handled = true;
            }
        }

Aqui, inicializamos a variável start com a posição que o mouse foi clicado, configuramos isDragging para true, deixamos o elemento semi-transparente e capturamos o mouse. O manipulador para o evento PreviewMouseMove é:

        private void canvas1_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                Point Pt = e.GetPosition(canvas1);
                // Pega posição atual da shape
                double CurrentLeft = (double)movedElement.GetValue(Canvas.LeftProperty);
                double CurrentTop = (double)movedElement.GetValue(Canvas.TopProperty);

                // Calcula nova posição
                double newLeft = CurrentLeft + Pt.X - start.X;
                double newTop = CurrentTop + Pt.Y - start.Y;

                // Reposiciona elemento
                movedElement.SetValue(Canvas.LeftProperty, newLeft);
                movedElement.SetValue(Canvas.TopProperty, newTop);

                start = Pt;
                e.Handled = true;
            }
        }

Aqui verificamos se estamos arrastando um elemento. Se estivermos, pegamos a nova posição do mouse, recalculamos a posição da Shape e movemos. Como a posição é dada por attached properties, devemos usar SetValue e GetValue para obter e alterar as propriedades Canvas.Left e Canvas.Top. Finalmente, fechamos o movimento no evento PreviewMouseLeftButtonUp:

        private void canvas1_PreviewMouseUp(object sender, MouseButtonEventArgs e)
        {
            // Restaura valores
            movedElement.Opacity = 1;
            movedElement.SetValue(Canvas.ZIndexProperty, ++currentZ);
            isDragging = false;
            canvas1.ReleaseMouseCapture();
        }

Aqui apenas restauramos os valores. Uma coisa que deve ser notada é que estamos alterando a propriedade Canvas.ZIndex. Isto é devido ao fato que queremos que os elementos que movemos fiquem sempre por cima dos outros. Assim, usamos a variável currentZ para guardar o ZIndex, incrementando-o a cada movimento, de maneira que a cada vez que movemos um elemento, ele tenha um ZIndex maior que o anterior.

Desta maneira, podemos mover os elementos dentro de uma janela WPF. Note que este código pode ser estendido a qualquer FrameworkElement, não sendo apenas para Shapes.

Trocando o Enter pelo Tab em WPF

bsonnino — Thu, 27 Dec 2007 12:25:00 GMT

Uma pergunta muito comum que vejo por aí é como trocar o Enter pelo Tab. Normalmente, deve-se manipular o evento de tecla pressionada, verificar se é um Enter e mudar o foco para o elemento seguinte na lista de tabulação. Em WPF, podemos criar um manipulador para o evento PreviewKeyDown da janela (no WPF, os eventos são propagados por toda a árvore de elementos, assim, os eventos de tecla obrigatoriamente passam pela janela, independente de onde tenham sido gerados), como o seguinte:

private void Window_PreviewKeyDown(object sender, KeyEventArgs e)

{

if (e.Key == Key.Return)

{

FocusNavigationDirection focusDirection = FocusNavigationDirection.Next;

TraversalRequest request = new TraversalRequest(focusDirection);

UIElement elementWithFocus = Keyboard.FocusedElement as UIElement;

if (elementWithFocus != null)

elementWithFocus.MoveFocus(request);

e.Handled = true;

}

Entrevista comigo no XAMLCast

bsonnino — Thu, 27 Dec 2007 11:10:00 GMT

Meu filho Roberto e o Rodrigo Kono criaram um podcast sobre WPF e XAML, que vale a pena conferir. Eles estão fazendo uma série de entrevistas com os palestrantes de WPF/Silverlight do TechEd e fizeram uma entrevista comigo, de 30 minutos. Vale a pena dar uma conferida em http://www.xamlcast.net

Artigo meu sobre acesso a banco de dados com WPF e LINQ

bsonnino — Fri, 21 Dec 2007 20:43:00 GMT

Hoje postei um novo artigo no CodeProject sobre acesso a dados com WPF e LINQ, mostrando como você pode criar um visual bonito, filtrar, classificar e agrupar os dados sem código usando WPF. Isso ligado ao LINQ, que sem dúvida é uma tecnologia que veio para ficar. Se você quer saber mais, dê uma conferida em http://www.codeproject.com/KB/WPF/wpfviews.aspx. Se você gostar do artigo, cadastre-se e vote nele.

Meu filho Roberto também postou um artigo sobre 3D interativo, a tecnologia introduzida com o .net 3.5, vale a pena conferir em http://www.codeproject.com/KB/WPF/3D-BookWriter.aspx

Family.Show 2.0

bsonnino — Sun, 29 Jul 2007 13:09:22 GMT

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.

Tutoriais de WPF/Silverlight

bsonnino — Sun, 29 Jul 2007 12:56:52 GMT

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

Zoom na aplicação

bsonnino — Fri, 20 Jul 2007 12:44:33 GMT

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.

Novo artigo de WPF

bsonnino — Tue, 17 Jul 2007 15:43:45 GMT

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

Exemplo de programa em WPF

bsonnino — Tue, 17 Jul 2007 11:08:00 GMT

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.

Crie um tablet com uma linha de código

bsonnino — Fri, 13 Jul 2007 09:26:00 GMT

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.