Ano passado eu fiz alguns testes, utilizando alguns gráficos em Silverlight, e utilizei a Conjectura de Collatz para a geração dos gráficos, segue a definição da conjectura de Collatz que está na Wikipedia.

Eu realmente achei interessante, no final do post terá um gráfico em Silverlight onde poderá informar um número e ver que sempre chegará a 1 mesmo, independente do número informado. Fiz o código o mais simples possível, até porque o problema é simples de resolver, segue os códigos em C#, Python e Ruby.

class Program
{
    static void Main(string[] args)
    {
        Collatz(50);
        Console.Read();
    }

    static void Collatz(int numero)
    {
        Console.WriteLine(numero);

        if(numero == 1)
            return;

        if(numero % 2 == 0)
            Collatz(numero / 2);
        else
            Collatz(3 * numero + 1);
    }
}

def collatz(numero):
    print(numero)
    if numero == 1:
        return
    if numero % 2 == 0:
        collatz(numero / 2)
    else:
        collatz(3 * numero + 1)

collatz(50)

def collatz(numero)
  puts numero

  if numero == 1
    return
  end

  if numero % 2 == 0
    collatz(numero / 2)
  else
    collatz(3 * numero + 1)
  end
end

collatz(50)

Já que disse anteriormente, o algoritmo é simples, em todas as linguages utilizei um método recursivo, e mesmo sem experiência em Ruby ou Python da para entender o que o código faz, então não explicarei detalhes do código, mas confesso que Python tem me agradado muito!

Agora para quem quiser testar a Conjectura de Collatz, abaixo tem o gráfico em Silverlight, só escolher um número e clicar no botão Collatz, o número 50 fica legal, não geram muitos resultados e fica legal analisar o gráfico, já que o mesmo é pequeno!

O código fonte do projeto está no GitHub.

Abraços e até o próximo artigo.

Para quem nunca fez alguma animação no Silverlight, vou mostrar como funciona, quando falamos de animação, devemos ter em mente que vamos trabalhar com Storyboards, ou seja o nosso objeto, vai mudar de alguma forma durante a execução da Storyboard, quem trabalha com Flash é só pensar na Timeline do Flash, claro que com algumas diferenças .

Então vamos começar com uma animação simples, eu quero clicar em um botão, e fazer uma bola cair. Veja abaixo como ficará a tela do nosso “jogo”. A tela é simples só possui uma “bola” e um Button, vamos utilizar o botão para iniciar a animação para ver que podemos controlar uma Storyboard pelo C#.

No Expression Blend existe uma janela chamada Objects And Timeline, onde podemos ver toda estrutura de objetos do arquivo que estamos trabalhando, e também as Storyboars, é na tela abaixo no botão “+” que clicamos para adicionar uma nova Storyboard. Um detalhe, toda essa parte visual de animação só está disponível no Expression Blend, é possível fazer tudo isso no Visual Studio, mas trabalhando diretamente com XAML.

Ao clicar para adicionar uma nova Storyboard, uma janela será mostrada, nela vamos informar o nome da nossa Storyboard, nesse caso vamos colocar “AnimacaoBola”.

Quando estamos trabalhando com alguma Storyboard, o Blend grava tudo que fazemos, ele mostra que está nesse modo de gravação pela borda vermelha e um icone vermelho indicando que a gravação está ativa, veja na imagem abaixo que agora a janela de Objects And Timeline já mostra também a Timeline onde vamos marcar os pontos de interesse na nossa animação.

Agora vamos começar a animação, o primeiro passo é selecionar o objeto que deseja animar, no caso do exemplo a bola, feito isso devemos marcar o ponto 0 na timeline, quando fazemos isso estamos falando que no segundo 0 da animação a bola estará naquela posição. marcamos um ponto clicando no botão Record Key Frame, quando fazemos isso uma imagem é adicionada no segundo selecionado, na linha do objeto que estamos trabalhando.

O próximo passo é mover a barra amarela para 1 segundo, e arrastar a bola para baixo, automaticamente um novo Key Frame será gerado, o Blend vai criar uma linha pontilhada para ajudar na visualização da movimentação do objeto enquanto trabalhamos.

Muito bem, nossa animação está quase pronta, já falamos que no segundo 0 a bola está em uma posição, no segundo 1 está em outra, o Blend já vai fazer o trabalho de mover o objeto de uma posição para outra, agora só falta no Click do botão falar para a animação começar, segue o código. Ahh outro detalhe, já que paramos de animar, lembrar de clicar no circulo vermelho que indica que o Blend está gravando, ou qualquer alteração na tela será gravada e vai participar da nossa animação .

private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
    AnimacaoBola.Begin();
}

O resultado até agora está abaixo, só clicar no botão Iniciar Animação.

Muito bem, agora vamos aprimorar nossa animação, eu quero que a bola se comporte da mesma forma que uma bola de verdade, ou seja não vai cair e parar, vai cair, subir um pouco, cair novamente, ou seja vai “pingar” até parar, fazer isso pela timeline é horrível, tem que ficar criando Key Frames, e arrastando o objeto, enfim poderia ser mais fácil, e no Silverlight é, podemos utilizar alguma Easing Animation .

Quando animamos algum objeto, podemos ver na janela de Objects and Timeline que agora ele possui objetos filhos, nesse caso um RenderTransform, devemos clicar nesse item para ter acesso a janela de Easing Animations.

Abaixo é a janela com as funções de animação, lembrando que só temos acesso clicando nos objetos da animação, ou via XAML fazendo tudo na mão .

Vamos trabalhar com EasingFunction que já vem selecionado, KeySpline e Hold In fica para um próximo artigo. Explicando de uma forma simples as Easing Functions são funções matemáticas, que trabalham diretamente com o objeto da animação, algumas Easing Functions tem propriedades para modificarmos por exemplo, Amplitude, Bounces, Oscillations. Mas todas vem com valores default então vamos utilizar sempre com o default nesse artigo.

Alista de Funções é grande, veja abaixo as funções disponíveis, a imagem ajuda a pré-visualizar o comportamento do objeto para cada função, e pela imagem abaixo já da para ver que a função é a Bounce do tipo Out.

Para ver o resultado da animação com a Easing Function Bounce aplicada, clique no Inicar Animação abaixo.

Existem muitas funções, com muitas variações, principalmente modificando as propriedades que falei anteriormente, por isso fiz o exemplo abaixo para que você consiga testar aqui os tipos de funções e o resultado das funções aplicadas no objeto.

Segue o código completo do exemplo, nele aplico o tipo de animação pelo C#.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    x:Class="EasingAnimations.MainPage"
    Width="400" Height="300">
    <UserControl.Resources>
        <Storyboard x:Name="Animacao">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="197" x:Name="Funcao"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Canvas x:Name="LayoutRoot" Background="#FFF3F3F3" d:LayoutOverrides="HorizontalAlignment">
        <Ellipse x:Name="ellipse" Height="47" Width="47" Fill="#FF45454E" RenderTransformOrigin="0.5,0.5" Canvas.Left="56" Canvas.Top="10">
            <Ellipse.RenderTransform>
                <CompositeTransform/>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Button Content="Iniciar Animação" Width="143" Click="Button_Click" Canvas.Left="204" Canvas.Top="174"/>
        <TextBlock TextWrapping="Wrap" Text="Easing Mode" Canvas.Left="204" Canvas.Top="81"/>
        <ComboBox x:Name="ModoDaAnimacao" Width="143" Canvas.Left="204" Canvas.Top="97" ItemsSource="{Binding}" SelectedValuePath="Nome" DisplayMemberPath="Nome">
        </ComboBox>
        <TextBlock TextWrapping="Wrap" Text="Easing Function" Canvas.Left="204" Canvas.Top="119"/>
        <ComboBox x:Name="FuncaoDaAnimacao" Width="143" Canvas.Left="204" Canvas.Top="135" ItemsSource="{Binding}" SelectedValuePath="Nome" DisplayMemberPath="Nome">
        </ComboBox>
    </Canvas>
</UserControl>

O código em C#.

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace EasingAnimations
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();
            Loaded += (obj, args) =>
                          {
                              ModoDaAnimacao.ItemsSource = new ModoDeAnimacao().ObterModosDeAnimacao();
                              ModoDaAnimacao.SelectedIndex = 0;
                              FuncaoDaAnimacao.ItemsSource = new FuncaoDeAnimacao().ObterFuncoesDeAnimacao();
                              FuncaoDaAnimacao.SelectedIndex = 0;
                          };
        }

        private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            var funcaoDaAnimacao = ObterFuncaoDaAnimacao();
            Funcao.EasingFunction = funcaoDaAnimacao;
            Animacao.Begin();
        }

        private EasingMode ObterModoDaAnimacao()
        {
            var modoDaAnimacao = new EasingMode();
            switch (ModoDaAnimacao.SelectedValue.ToString())
            {
                case "EaseIn":
                    modoDaAnimacao = EasingMode.EaseIn;
                    break;
                case "EaseOut":
                    modoDaAnimacao = EasingMode.EaseOut;
                    break;
                case "EaseInOut":
                    modoDaAnimacao = EasingMode.EaseInOut;
                    break;
            }

            return modoDaAnimacao;
        }

        private IEasingFunction ObterFuncaoDaAnimacao()
        {
            EasingFunctionBase funcaoDaAnimacao = null;

            switch (FuncaoDaAnimacao.SelectedValue.ToString())
            {
                case "BackEase":
                    funcaoDaAnimacao =  new BackEase();
                    break;
                case "BounceEase":
                    funcaoDaAnimacao = new BounceEase();
                    break;
                case "CircleEase":
                    funcaoDaAnimacao = new CircleEase();
                    break;
                case "CubicEase":
                    funcaoDaAnimacao = new CubicEase();
                    break;
                case "ElasticEase":
                    funcaoDaAnimacao = new ElasticEase();
                    break;
                case "ExponentialEase":
                    funcaoDaAnimacao = new ExponentialEase();
                    break;
                case "PowerEase":
                    funcaoDaAnimacao = new PowerEase();
                    break;
                case "QuadraticEase":
                    funcaoDaAnimacao = new QuadraticEase();
                    break;
                case "QuarticEase":
                    funcaoDaAnimacao = new QuarticEase();
                    break;
                case "QuinticEase":
                    funcaoDaAnimacao = new QuinticEase();
                    break;
                case "SineEase":
                    funcaoDaAnimacao = new SineEase();
                    break;
            }

            funcaoDaAnimacao.EasingMode = ObterModoDaAnimacao();
            return funcaoDaAnimacao;
        }
    }

    public class ModoDeAnimacao
    {
        public string Nome { get; set; }

        public IList<ModoDeAnimacao> ObterModosDeAnimacao()
        {
            return new List<ModoDeAnimacao>
                       {
                           new ModoDeAnimacao {Nome = "EaseIn"},
                           new ModoDeAnimacao {Nome = "EaseOut"},
                           new ModoDeAnimacao {Nome = "EaseInOut"},
                       };
        }
    }

    public class FuncaoDeAnimacao
    {
        public string Nome { get; set; }

        public IList<FuncaoDeAnimacao> ObterFuncoesDeAnimacao()
        {
            return new List<FuncaoDeAnimacao>
                       {
                           new FuncaoDeAnimacao{Nome = "BackEase"},
                           new FuncaoDeAnimacao{Nome = "BounceEase"},
                           new FuncaoDeAnimacao{Nome = "CircleEase"},
                           new FuncaoDeAnimacao{Nome = "CubicEase"},
                           new FuncaoDeAnimacao{Nome = "ElasticEase"},
                           new FuncaoDeAnimacao{Nome = "ExponentialEase"},
                           new FuncaoDeAnimacao{Nome = "PowerEase"},
                           new FuncaoDeAnimacao{Nome = "QuadraticEase"},
                           new FuncaoDeAnimacao{Nome = "QuinticEase"},
                           new FuncaoDeAnimacao{Nome = "SineEase"}
                       };
        }
    }
}

É complicado mostrar animações em artigos, o ideal seria vídeos, mas enquanto não gravo espero que o artigo seja útil, principalmente para quem nunca fez animações com Silverlight.

Se quiser contribuir ou baixar o código fonte do projeto, é só clicar no link abaixo.

Código fonte do projeto.

Abraços.

Hoje vou começar uma série de posts sobre realidade aumentada, claro que com foco em Silverlight, mas no primeiro post vamos ver o que é realidade aumentada e como podemos utiliza-la.

A imagem acima é um bom exemplo de utilização de realidade aumentada, mas para entender melhor o assunto vamos ver algumas definições sobre Realidade Aumentada definidas por Ronald Azuma.

• Combina elementos virtuais com o ambiente real
• É interativa e tem processamento em tempo real
• É concebida em três dimensões

Interessante, mas o que podemos fazer com realidade aumentada? Nós podemos levar a interação com o usuário final a outro nível, quer um exemplo nacional? Veja essa parte do submarino onde podemos ver como ficaria em nossa casa algum quadro vendido pelo site.

Existem vários exemplos disponíveis na internet, quer outro ótimo exemplo? Veja esse jogo utilizando realidade aumentada.

Independente da plataforma, utilizar Realidade Aumentada é incrível, que tal fazer um jogo do parecido com esse mostrado no IPhone mas no Windows Phone 7, utilizando Silverlight? Ou criar uma experiência diferente em seu e-commerce utilizando Silverlight da mesma forma que o Submarino fez?

Quando falamos em Realidade Aumentada no mundo do Silverlight, estamos falando do SLARTookit criado pelo MVP René Schulte, e é com esse framework que vamos trabalhar nos próximos artigos.

Veja abaixo uma demostração utilizando o SLARToolkit.

Nos próximos artigos vou detalhar todos os recursos do SLARToolkit e vamos criar um exemplo legal de realidade aumentada, mas já vou fazer um convite a todos aqui.

O Elemar Jr. que está escrevendo sobre arquitetura no Silverlight Planet, está criando uma engine de xadrez em .NET, que tal criamos a UX do jogo utilizando realidade aumentada? O que acha Elemar, um projeto da comunidade para contribuir com sua engine?

Por hoje é só pessoal, até o próximo artigo onde vamos avançar um pouco com Realidade Aumentada.

Abraços.

Muita notícia boa nos últimos dias, e agora mais uma. A Telerik disponibilizou para download 3 controles de Silverlight de graça. Sempre utilizei controles da Telerik, são de ótima qualidade, então não da para perder essa chance, faça o download agora mesmo.

Os controles são Book, Gauge e TileView.

Veja abaixo uma imagem de cada controle funcionando.

Abraços.

Hoje tivemos duas ótimas notícias para a nossa comunidade de Silverlight, a www.silverlightplanet.net.br uma é que está disponível para inscrição o webcast de lançamento da comunidade, pode se inscrever no link abaixo.

https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032471167&Culture=pt-BR

A outra é incrível, mas segredo ainda \o/

Abraços.

Depois de muito trabalho preparando a nova comunidade Silverlight Planet volto com o blog.

No artigo onde mostrei como trabalhar com o Grid no Silverlight, lembrando que não é o DataGrid onde exibimos dados, mas sim o painel de layout Grid, falei que mostraria mais sobre a propriedade Margin dos controles.

Na propriedade Margin definimos o espaçamento entre o controle, e o item “pai” dele, ou seja, onde esse controle está, por exemplo uma célula de um Grid.

Para demonstrar como podemos trabalhar com a margem dos controles, vamos utilizar o código abaixo.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>

    <Button Content="www.silverlightplanet.net.br"/>
</Grid>

Da forma como o código está, o botão ocupa toda a área disponível, veja abaixo,, o que será ideal para mostrar as formas de trabalhar com as margens.

A primeira forma é chamada de uniforme, onde informamos um valor para a propriedade Margin do Button, e o valor será atribuído para as quatro margens, que são esquerda, superior, direita e inferior.

Então agora informamos que todas as margens do botão em relação a célula do grid, tem 10 pixels.

<Button Content="www.silverlightplanet.net.br" Margin="10"/>

E o resultado.

Uma outra forma, é que podemos “agrupar” valores, por exemplo, gostaríamos que a margem esquerda e direita sejam igual a 10 pixels, e a superior e inferior igual a 20 pixels, então conseguimos informar dois valores somente Margin=”esquerda+direita, superior+inferior”.

<Button Content="www.silverlightplanet.net.br" Margin="10, 20"/>

Resultado.

E agora a última forma, onde podemos informar o valor para cada uma dar margens separadamente, da seguinte forma Margin=”esquerda, superior, direita, inferior”,

<Button Content="www.silverlightplanet.net.br" Margin="5, 10, 15, 20"/>

Resultado.

Exemplos simples, mas que precisamos saber para definir corretamente as elementos dos nossos layouts.

Abraços e até o próximo artigo.

Quem tem acompanhado o Twitter, deve ter visto que estou trabalhando em uma comunidade de Silverlight com o Ricardo Dorta e a Gesilene Martins.

Hoje lançamos oficialmente o endereço do site, a nossa logo, e o lançamento oficial da comunidade Silverlight Planet será no dia 28/11 as 15:00 com um Webcast, onde vamos anunciar todos os planos, como todos podem contribuir para a comunidade, e muitas novidades.

O endereço da comunidade é http://www.silverlightplanet.net.br todos estão convidados a participar, temos página no Facebook onde já podem se cadastrar, ainda temos muito trabalho, estão finalizando os últimos acertos e conteúdos para a comunidade começar a todo vapor.

Gostaria de agradecer aqui, mais uma vez, o Dorta e a Gesilene, pela ajuda e apoio na construção da comunidade, sem essa equipe o Silverlight Planet não existiria, muito obrigado aos dois.

Por enquanto é só, e fiquem ligados nas novidades do Silverlight Planet. Quem quiser seguir o Twitter oficial é @slplanet.

Abraços.

É, o PDC acabou, e uma entrevista do Bob Muglia, disponível aqui, está gerando a maior discussão, então resolvi falar o que eu acho sobre o assunto aqui no blog.

Bom resumindo a entrevista, ele fala que a Microsoft mudou a estratégia para o Silverlight, e que o Silverlight é para aplicações de negócios, vídeos, e sites é com HTML.

E alguém pode me falar qual a novidade disso?

Eu sempre achei estranho sites em Flash ou Silverlight, você ve carregando, ai a hora que o site abre, a maioria utilizou o Flash ou Silverlight só para fazer um menu deslizando ou algo assim, o problema não está na tecnologia mas na forma como ela é utilizada.

Agora quando caimos no mundo de aplicações de negócios, ou vídeos, o Silverlight da show, quem já testou Smooth Streaming sabe o que estou falando, o mesmo para aplicações, eu não uso Silverlight para sites, só para aplicações.

Agora vamos ao queridinho da vez, o HTML 5, se ele virar tudo que estão prometendo vai ser ótimo, perfeito, mas por enquanto são só promessas, e antes que digam um monte nos comentários vejam isso aqui, ainda tem muito que ser feito no HTML 5, mas vamos torcer para que esse dia não demore tanto.

Sem contar que ainda continuaremos com o seguine problema com o HTML 5 + CSS + JavaScript, cada browser vai abrir de um jeito, ou sou só eu que acho isso? Pode aparecer o HTML 5000, o IE vai fazer de um jeito, o Firefox de outro, o Chrome de outro, o Opera de outro, e vamos continar reclamando disso todos os dias.

Agora é hora de ter calma, e analisar bem as coisas, e principalmente onde estamos investindo a tecnologia x e y.

Abraços.

Quando estamos criando nossas aplicações com Silverlight, existem algumas fontes que estão por default no Silverlight, mas ficamos um pouco limitados, já que a lista de fontes é pequena, hoje me perguntaram como colocar outras fontes no projeto, sem que um usuário que não possua a fonte instalada consiga visualizar tudo corretamente.

Primeiro vamos ver a lista de fontes do Silverlight.

A janela acima é a de escolha de fontes do Blend, as fontes que estão com a logo do Silverlight na frente, são as padrões do Silverlight, ele já possui essas fontes.

Só que não precisamos ficar limitados a essa lista, podemos facilmente escolher outras fontes, por exemplo, a que mais gosto para criar janelas para sistemas é a Segoe UI.

Agora temos um problema, e se o usuário do meu sistema, não possuir a Segoe UI instalada? Em alguns casos uma simples troca de fonte compromete todo o layout, afinal a fonte não é um detalhe simples em um layout.

É por isso que temos aquele CheckBox Embed logo abaixo do nome da fonte, assim que marcarmos esse CheckBox, os arquivos da fonte, os .ttf, serão compactados e adicionados em nosso projeto.

Agora no projeto, foi criada uma pasta Fonts e as fontes estão lá, detalhe que pelo Blend, não vamos ver o arquivo compactado, mas sim os arquivos da fonte.

Agora um último detalhe para quem quiser fazer esse processo manualmente, é que no XAML, a propriedade Font-Family recebe o caminho completo do arquivo .zip com as fontes mais o nome da fonte.

<Grid x:Name="LayoutRoot" Background="White">
    <TextBlock Height="31" Margin="167,190,165,0" TextWrapping="Wrap" Text="Márcio Fábio Althmann" VerticalAlignment="Top" FontFamily="/FontesCustomizadas;component/Fonts/Fonts.zip#Segoe UI" FontSize="13.333"/>
</Grid>

Com esse recurso, conseguimos utilizar qualquer fonte no nosso projeto, mas vale lembrar que, estamos adicionando mais arquivo ao .xap final, então o tamanho final do arquivo vai aumentar, temos que tomar cuidado com isso para não jogarmos 10 mb de fontes depois reclamarmos que o site está “lento” para carregar .

Abraços.

Uma dúvida comum, não confundir o controle Grid que é o que mostrarei aqui, para layout, com o controle DataGrid onde mostramos dados.

Para facilitar o entendimento do Grid, para quem está acostumado a trabalhar com Web, pense na <table> onde temos linhas e colunas, para quem trabalha com Windows Forms, pense no TableLayoutPanel.

O Grid é colocado por padrão quando criamos um projeto com Silverlight ou WPF. Todos os códigos mostrados aqui serão feitos feitos utilizando um projeto em Silvelight.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Grid.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

O código acima é o da MainPage criada por padrão no projeto, e é nele que vamos fazer os exemplos.

Antes de mostrar mais detalhes sobre o Grid, em palestras, ou mesmo no trabalho, algumas pessoas questionam porque trabalho diretamente com o XAML e não utilizo o editor visual. E se é obrigatório fazer assim. A resposta é não, tudo que vamos fazer aqui pode ser feito visualmente, no Blend ou no Visual Studio. Mas prefiro trabalhar direto com o XAML, acho muito mais prático e rápido, pode parecer estranho, mas é mais fácil alterar diretamente um elemento no XAML do que clicar em algo, ir para a janela de propriedades e ai sim alterar. Também é bom para quem está começando com XAML, com WPF ou Silverlight, eu acho que facilita muito o aprendizado escrever os códigos do que ficar clicando em botões.

Então chega de falar e vamos ao que interessa.

Como falei anteriormente, conseguimos configurar o Grid com linhas e colunas, a idéia desse artigo é fazer botões adição, subtração, multiplicação e divisão de uma calculadora, veja imagem abaixo.

Os cadeados e linhas na imagem acima, são do editor visual do Blend, depois faço um artigo demonstrando os recursos do Blend.

O primeiro passo no nosso Grid é configurar as linhas e colunas, que nesse caso serão duas linhas e duas colunas. Veja o código abaixo.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
</Grid>

Dentro de Grid.RowDefinitions criamos as linhas do nosso Grid, ali colocaremos a quantidade, tamanho, cor, o mesmo com as colunas que colocaremos dentro de Grid.ColumnDefinitions.

Depois voltaremos para detalhar melhor as opções de definição das linhas e das colunas.

Para terminar a criação dos elementos do nosso layout, falta criar os botões, e falar em qual célula do Grid cada botão ficará, veja abaixo.

<Button x:Name="Adicao" Content="+" Margin="5" />
<Button x:Name="Subtracao" Grid.Column="1" Content="-" Margin="5"/>
<Button x:Name="Multiplicacao" Grid.Row="1" Content="*" Margin="5"/>
<Button x:Name="Divisao" Grid.Row="1" Grid.Column="1" Content="/" Margin="5"/>

Nesse caso só Botões foram adicionados no layout, mas em qualquer outro elemento temos que definir as proprieades Grid.Column e Grid.Row, são nessas propriedades que definimos em qual linha ou coluna o controle será mostrado.

Os valores de linha e coluna são definidos por índice, então se temos duas linhas, os índices são 0 e 1, o mesmo para as colunas. O primeiro Button, que é o de Adição, ficará na primeira coluna da primeira linha, então não preciso definir Grid.Column nem Grid.Row, automaticamente ele ficará na posição 0 para linha e coluna.

O segundo Button que é o de Subtração ficará na linha 0 e coluna 1, novamente não precisamos informar qual é o Grid.Row, será definido 0 automaticamente, mas agora precisamos definir Grid.Column = 1.

O terceiro Button que é o de Multiplicação vai ficar na primeira coluna e na segunda linha, como a primeira coluna é a 0, não precisamos definir, o que não acontece com a linha, por isso informamos Grid.Row=1.

E por último, o Button de Divisão, que ficará na segunda linha e na na segunda coluna, esse não tem como omitir alguma configuração, então colocamos Grid.Column=1 e Grid.Row=1.

Vale notar também que em cada um dos Buttons coloquei Maring=5, só para ter uma margem de 5 pixels em cada lado e um botão não ficar grudado no outro, depois farei um artigo só sobre margens.

Vamos ver o XAML completo até o momento e o resultado final.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Grid.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button x:Name="Adicao" Content="+" Margin="5" />
        <Button x:Name="Subtracao" Grid.Column="1" Content="-" Margin="5"/>
        <Button x:Name="Multiplicacao" Grid.Row="1" Content="*" Margin="5"/>
        <Button x:Name="Divisao" Grid.Row="1" Grid.Column="1" Content="/" Margin="5"/>
    </Grid>
</UserControl>

Disse anteriormente que voltaria a falar mais sobre RowDifinitions e ColumnDefinitions, vamos ver alguns detalhes sobre Height e Width das linhas e colunas.

Conseguimos definir 3 formas de redimensionamento para o Grid.

• Tamanho fixo: Onde definimos em pixels os valores para Width e Height.
• Tamando automático: Onde cada linha ou coluna ocupa o tamanho que precisa e nada mais.
• Tamanho proporcional: O espaço é dividido entre as linhas ou colunas, esse é o modo padrão e que nosso exemplo está utilizando no momento.

Para definir o tamanho fixo, informamos o valor em pixel, veja abaixo a primeira linha com 100 pixels de altura.

<Grid.RowDefinitions>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition></RowDefinition>
</Grid.RowDefinitions>

Resultado.

Agora vamos definir o tamanho da segunda linha como automático, ou sejá vai ocupar somente o tamanho necessário para mostrar o conteúdo.

<Grid.RowDefinitions>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>

Resultado.

O tamanho proporcional pode ser definido cmo *, 2*, depende do que estamos construindo, vou definir agora a segunda linha para ocupar o resto do espaço do grid.

<Grid.RowDefinitions>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>

Resultado.

Outro detalhe importante no Grid, é que existe Column e Row Span, ou sejá, posso colocar um TextBox por exemplo na primeira coluna, e falar que ele pode aumentar de tamanho até a segunda coluna, ele não ficará limitado ao tamanho da primeira coluna.

Para demonstrar isso vo criar mais uma linha no nosso layout.

<Grid.RowDefinitions>
    <RowDefinition Height="100"></RowDefinition>
    <RowDefinition Height="*"></RowDefinition>
    <RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>

E agora vou colocar um TextBox, e quero que ele ocupe o tamanho das duas colunas, também mudei a cor de fundo desse TextBox para facilitar a visualização, então agora é só definir Grid.ColumnSpan=2 no TextBox e ele ocupa o tamanho das duas colunas, detalhe para a propriedade Width=Auto do TextBox.

<TextBox x:Name="Resultado" Grid.Row="2" Grid.ColumnSpan="2" Background="Yellow" Width="Auto" />

Resultado.

Essa foi uma pequena demonstração de todo o poder do Grid, o painel de layout mais poderoso e flexível disponível no XAML.

O código fonte está disponível para download logo abaixo.

Abraços.