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.

Depois farei um post comentando os dois eventos.

A Microsoft disponibilizou o SP1 do Expression Blend 4, para quem não sabe, é a ferramenta que utilizamos para fazer projetos em Silverlight, WPF, SketchFlow e Windows Phone 7, ela é voltada para os Designers mas eu acho que é obrigatório, mesmo para os devs, conhecerem a ferramenta.

Para fazer o download clique aqui.

Dentre as novidades do SP1 estão a correção de bugs (novidade hehe), suporte a arquivos do tipo FXG (nunca vi isso ), suporte ao desenvolvimento para Windows Phone e melhoria na integração com as ferramentas da Adobe, como Photoshop e Illustrator.

Abraços.

Infelizmente o WPF não possuia o menu Ribbon nativo para utilizarmos em nossos projetos, digo nativamente por que com componentes de terceiros, como por semplo da Telerik, eu já utilizei Ribbon eu vários projetos.

Ontem, dia 02/08 foi liberado o RTM do Ribbon for WPF um menu do estilo Ribbon, para WPF, construído pela própria Microsoft, já utilizei esse menu a algum tempo, mas ainda era Beta e não funcionou bem.

Para começar, podemos fazer download do menu clicando aqui, temos a opção de fazer download do instalador do Ribbon, e também de exemplos de utilização e do código fonte, isso mesmo, podemos olhar o código fonte do projeto, bons estudos . Além do link para download, clicando aqui vemos a página de documentação do menu.

A primeira mudança quando instalamos o Ribbon, é que ganhamos um novo tipo de projeto para WPF Ribbon Application.

Com o projeto criado, por padrão é criado um menu com itens básicos, o que é muito bom para entender o funcionamento do controle. Abaixo imagem do menu padrão criado com o código gerado.

<ribbon:Ribbon x:Name="Ribbon">
    <ribbon:Ribbon.ApplicationMenu>
        <ribbon:RibbonApplicationMenu SmallImageSource="Images\SmallIcon.png">
            <ribbon:RibbonApplicationMenuItem Header="Hello _Ribbon"
                                              x:Name="MenuItem1"
                                              ImageSource="Images\LargeIcon.png"/>
        </ribbon:RibbonApplicationMenu>
    </ribbon:Ribbon.ApplicationMenu>
    <ribbon:RibbonTab x:Name="HomeTab"
                      Header="Home">
        <ribbon:RibbonGroup x:Name="Group1"
                            Header="Group1">
            <ribbon:RibbonButton x:Name="Button1"
                                 LargeImageSource="Images\LargeIcon.png"
                                 Label="Button1" />

            <ribbon:RibbonButton x:Name="Button2"
                                 SmallImageSource="Images\SmallIcon.png"
                                 Label="Button2" />
            <ribbon:RibbonButton x:Name="Button3"
                                 SmallImageSource="Images\SmallIcon.png"
                                 Label="Button3" />
            <ribbon:RibbonButton x:Name="Button4"
                                 SmallImageSource="Images\SmallIcon.png"
                                 Label="Button4" />

        </ribbon:RibbonGroup>

    </ribbon:RibbonTab>
</ribbon:Ribbon>

Como podem ver, não existe segredo na criação de Tabs, Grupos e Botões. Agora conseguimos utilizar um ótimo menu com Ribbon, sem recorrer a outras empresas.

Um outro detalhe, é que na Toolbox do Visual Studio, uma nova aba é criada, com todos os controles disponíveis para a criação do menu com Ribbon.

Aproveitem o Ribbon for WPF e é hora de começar a repensar a estrutura dos menus das aplicações .

Abraços.

Pois é, foi o melhor que encontrei :) mas logo o título fará sentido. Felizmente, sempre trabalhei com Web e Windows, apesar de não ter tanto talento como designer, adoro estudar padrões para UI, o que é certo, errado, o que fazer e o que não fazer.

É claro que não vou falar que todos os sites ou todas aplicações web seguem o que vou mostrar, mas felizmente a maioria das “bem feitas” seguem isso. Vou esquecer sites normais, e vou focar em aplicações web, só para facilitar.

O item que estou falando é tão simples e básico, que todo mundo deveria seguir, que é alinhar corretamente os itens de um formulário, é tão comum quando vamos desenvolver um layout de site, utilizar grids para definir o espaçamento entre os itens, assim temos um layout organizado e agradável.

Quem liga para isso Márcio? Ahhh ninguém, é só mais uma prática boba que o pessoal segue. Todo mundo liga, e liga muito. Mesmo que mesmo sem perceber, um formulário bem organizado ajuda qualquer usuário a encontrar o que ele quer.

Quem nunca viu algum profissional falar algo do tipo, “meu cliente não acha nada, meu cliente não procura nada direito”, é tão fácil culpar o cliente, afinal “eu” fiz tal coisa, então essa coisa está “perfeita”.

Mas eu acho que isso é meio cultural, já cansei de passar estudos de como criar um layout agradável para formulários para programadores, o que eles fazem? Apertam delete no e-mail, afinal isso é trabalho do “designer”, eu acho isso um absurdo, não estou pedindo para algum programador de WinApps aprender como combinar cores, como utilizar o Photoshop, nada disso, mas só para prestar atenção em como organizar um formulário.

Chega de falar, e vamos ver dois exemplos, com Windows Forms mesmo, que é o que a maioria do pessoal utiliza :).

Padrão macarronada, nem sei se alguém já deu esse nome, mas falei ontem em um curso e gostei :).

Ok, a tela feita, funciona, mas eu acho horrível olhar telas dessa forma, podemos facilmente organizar da seguinte forma.

Olhando a imagem acima, sei onde tudo começa e acaba, tenho padrão de espaçamento entre os campos do formulário, joguei o Label acima dos campos só para facilitar a visualização, e prefiro assim, mas com o Label a esquerda funciona da mesma forma.

Quando eu trabalhava com o Heitor Althmann, é família de geek =D, ele é designer, nós criamos alguns padrões para formulários, na época definidos por CSS automaticamente, mas ainda utilizo o padrão com sucesso em aplicações para Windows. Segue abaixo a lista de possibilidades com o padrão.

Espero que gostem, e que utilizem o padrão, e que UI seja uma preocupação também de quem desenvolve aplicações para Windows, afinal, aquela tela com 100 campos, totalmente desorganizados, deixa qualquer usuário confuso.

Abraços.

Bom no primeiro artigo sobre painéis de layout eu falei sobre o StackPanel, hoje vou mostra o controle Canvas.

Criar layouts com o Canvas lembra muito o jeito WindowsForms clássico, onde arrastavamos controles, e eles eram posicionados por coordenadas.

No Canvas acontece o mesmo, informamos valores da margem esquerda e superior, então caso queira criar um Button a 50 pixels da margem esquerda e 50 da margem superior o código é.

<Canvas x:Name="LayoutRoot" Background="White">
    <Button Canvas.Left="50" Canvas.Top="50" Content="Botão 01" Height="23" Name="button1" Width="75" />
</Canvas>

Reparem que definimos a posição referente a margem esquerda do Canvas pela propriedade Canvas.Left do Button, o mesmo para a posição referente a margem superior do Canvas pela propriedade Canvas.Top.

Uma outra propriedade que temos acesso no Button é Canvas.ZIndex onde podemos definir qual elemento vai aparecer sobre outro, então no exemplo eu vou colocar mais um Button na posição Canvas.Top=”55” e Canvas.Left=”55”.

<Canvas x:Name="LayoutRoot" Background="White">
    <Button Canvas.Left="50" Canvas.Top="50" Content="Botão 01" Height="23" Name="button1" Width="75" />
    <Button Canvas.Left="55" Canvas.Top="55"  Content="Botão 02" Height="23" Name="button2" Width="75" />
</Canvas>

Tudo bem, ninguém coloca um botão sobre outro, mas como é só para exemplo vamos lá =). Agora eu quero modificar a ordem, quero que o Botão 01 fique sobre o Botão 02. Para isso definimos a propriedade Canvas.ZIndex de cada um dos Buttons. Informamos um valor numérico, o valor mais alto fica sobre o valor mais baixo, simples assim.

Segue o código.

<Canvas x:Name="LayoutRoot" Background="White">
    <Button Canvas.Left="50" Canvas.Top="50" Canvas.ZIndex="1" Content="Botão 01" Height="23" Name="button1" Width="75" />
    <Button Canvas.Left="55" Canvas.Top="55" Canvas.ZIndex="0"  Content="Botão 02" Height="23" Name="button2" Width="75" />
</Canvas>

Resultado, agora o Botão 01 está sobre o Botão 02.

O Canvas é simples mas pouco flexível, mas muito útil para quem quer desenvolver jogos, algumas animações onde vamos trabalhar diretamente com objetos posicionados, fica muito mais fácil.

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

E o código para rotacionar o conteúdo do botão.

<Button>
      <Button.Content>
            <TextBlock RenderTransformOrigin="0.5,0.5">
                  <TextBlock.RenderTransform>
            	        <TransformGroup>
            		<RotateTransform Angle="90"/>
                        </TransformGroup>
            	  </TextBlock.RenderTransform>Botão 06</TextBlock>
       </Button.Content>
</Button>

Esse foi um post simples e rápido, a explicação de cada cada item fica para os próximos artigos, mas fica claro que temos uma flexibilidade para criar ou alterar elementos do nosso layout.

Abraços.

Eu considero o StackPanel o mais simples dos painéis, com ele conseguimos colocar os controles ordenados horizontal ou verticalmente.

Para criar os quatro botões da primeira imagem o código utilizado foi.

<StackPanel>
      <Button Content="Botão 01" />
      <Button Content="Botão 02" />
      <Button Content="Botão 03" />
      <Button Content="Botão 04" />
</StackPanel>

É possível definir a orientação dos elementos filhos do StackPanel através da propriedade Orientation, se a propriedade não for informada, por padrão a orientação dos elementos filhos é vertical.

O código abaixo é da segunda imagem, com os elementos filhos dispostos horizontalmente, um ao lado do outro, reparem que nesse exemplo coloquei a propriedade Orientation com o valor Horizontal.

<StackPanel Orientation="Horizontal">
      <Button Content="Botão 01" />
      <Button Content="Botão 02" />
      <Button Content="Botão 03" />
      <Button Content="Botão 04" />
</StackPanel>

Vale lembra que conseguimos adicionar StackPanel como elemento filho de outro StackPanel como por exemplo na imagem e código abaixo.

<StackPanel>
      <Button Content="Botão 01" />
      <Button Content="Botão 02" />
      <Button Content="Botão 03" />
      <Button Content="Botão 04" />
      <StackPanel Orientation="Horizontal">
            <Button Content="Botão 05" />
            <Button Content="Botão 06" />
            <Button Content="Botão 07" />
            <Button Content="Botão 08" />
            <Button Content="Botão 09" />
            <Button Content="Botão 10" />
      </StackPanel>
</StackPanel>

Por hoje é só, a utlização do StackPanel é simples, no próximo artigo vou mostrar opções de alinhamento e margens utilizando ainda o StackPanel.

Abraços.

Para começar vou mostrar uma breve descrição de cada painel disponível para criação do layout das aplicações, e depois dedicarei um artigo para cada um dos painéis. Vale lembrar que é muito importante entender o funcionamento e a utilização de cada um desses painéis para facilitar o desenvolvimento das nossas aplicações, como disse anteriormente WPF não é difícil, o que é difícil é mudar a forma de pensar e utilizar todo o poder da tecnologia.

Chega de papo e vamos ver quais painéis temos disponíveis.

• StackPanel: Disponibiliza os elementos em forma de pilha, vertical ou horizontalmente.
• Grid: Disponibiliza os elementos em linhas e colunas. É um dos mais utilizados para a criação de formulários.
• Canvas: Os elementos são posicionados por coordenadas x, y. Lembra o jeito WindowsForms de desenhar formulários, é simples mas pouco flexível.

Ainda temos o WrapPanel e o DockPanel mas vamos deixá-los por último.

Até o próximo artigo onde veremos mais detalhes sobre o StackPanel.

Abraços.

Como assim aplicações Windows Forms com WPF?

Bom simplesmente desenvolvendo pensando na forma errada, esse eu acho o maior problema, o paradigma é outro, antes de sair escrevendo código, temos que pensar antes em todos os recursos que o WPF oferece para fazer da melhor forma possível.

Vou dar um exemplo abaixo do que eu chamo de desenvolver Windowns Forms com WPF, imaginem a tela de segurança de banco de dados, onde o usuário pode escolher a forma de segurança, disponível por 2 RadioButtons, Segurança Integrado do Windows  ou Usuário e Senha do SQL Server e dois TextBox para informar o Usuário e Senha caso o usuário escolha Usuário e Senha do SQL Server.

A tela é simples:

Pensando na forma Windows Forms no eu vou programar o evento Checked de cada RadioButton, eles irão chamar um método que analisa se o Usuário e Senha do SQL Server está selecionado, e habilita os TextBox de Usuário e Senha.

   1: private void radSegurancaIntegradaWindows_Checked(object sender, RoutedEventArgs e)

   2: {

   3:     VerificarFormaSeguranca();

   4: }

   5:  

   6: private void radUsuarioSenhaSQLServer_Checked(object sender, RoutedEventArgs e)

   7: {

   8:     VerificarFormaSeguranca();

   9: }

  10:  

  11: private void VerificarFormaSeguranca()

  12: {

  13:     if(radUsuarioSenhaSQLServer != null)

  14:         txtUsuario.IsEnabled = txtSenha.IsEnabled = (bool) radUsuarioSenhaSQLServer.IsChecked;

  15: }

O código funciona perfeitamente, mas eu não preciso fazer nada disso, eu posso utilizar os recusos de Binding do WPF, e faço todo esse tratamento direto no XAML.

Veja abaixo.

   1: <TextBox Name="txtUsuario" Width="250"  IsEnabled="{Binding ElementName=radUsuarioSenhaSQLServer, Path=IsChecked}"/>

   2: <PasswordBox Name="txtSenha" Width="250" IsEnabled="{Binding ElementName=radUsuarioSenhaSQLServer, Path=IsChecked}"/>

Vejam que a propriedade IsEnabled do TextBox  e do PasswordBox estão fazendo um Binding a outro elemento do meu formulário, ElementName=radUsuarioSenhaSQLServer na propriedade IsChecked, Path=IsChecked.

Resumindo, utilizar todo o poder do WPF da sim um pouco de trabalho, no que diz respeito a ter que estudar, aprender, etc… mas o resultado final recompensa todo o esforço!

Abraços e até a próxima.

Com um projeto WPF criado, coloque 4 TextBox no formulário.

Feito isso, vá até o evento PreviewKeyDown do mesmo. O código para fazer o Enter pular de controle está abaixo.

private void Window_PreviewKeyDown(object sender, KeyEventArgs e){    var elemento = e.OriginalSource as UIElement;

    if (elemento == null)        return;

    if(e.Key == Key.Enter)        elemento.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));}

O código é simples, primeiro criamos uma variável a partir do e.OriginalSource que é o controle que estamos, e será a partir dele que vamos mudar o foco. Depois só temos uma verificação que se elemento for nulo retorna e não faz mais nada;

O if é simples, verifico se a tecla pressionada foi o Enter, e ai chamamos o método MoveFocus() que move o foco de um controle para outro, esse método recebe uma nova instância da classe TraversalRequest que representa uma requisição para mover o foco para outro controle.

No construtor da TraversalRequest passamos o enum FocusNavigationDirection que contém as opções abaixo:

• Next
• Previous
• First
• Last
• Left
• Right
• Up
• Down

Cada uma das opções move o foco de acordo com o TabOrder do formulário ou pela posição dos controles.

Com esse enum fica fácil criarmos mais opções para o usuário, por exemplo se o usuário clicar a seta para cima mudamos o foco para o controle acima, o código ficaria assim.

private void Window_PreviewKeyDown(object sender, KeyEventArgs e){    var elemento = e.OriginalSource as UIElement;

    if (elemento == null)        return;

    if(e.Key == Key.Enter)        elemento.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));    if (e.Key == Key.Up)        elemento.MoveFocus(new TraversalRequest(FocusNavigationDirection.Up));}

Fica aqui a dica principalmente para quem está migrando de WindowsForms para WPF, e vai ver que alguns (muitos) detalhes funcionarão de forma diferente.

Abraços.