/> </LinearGradientBrush> </Window.Background> <Grid> <!--Definindo as linhas da grid para o layout. O "*" representa o tamanho que sobrar da jenala, apos utilizar os 80 da linha de cima--> <Grid.RowDefinitions> <RowDefinition Height="80" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Label Content="Meu Cliente de Twitter" Height="28" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" FontWeight="Bold" FontSize="16" FontFamily="Verdana" /> <TextBox Height="23" HorizontalAlignment="Left" Margin="12,46,0,0" Name="txtUsuario" VerticalAlignment="Top" Width="213" /> <Button Content="Carregar o Twitter" Height="23" HorizontalAlignment="Left" Margin="231,46,0,0" Name="btnCarregar" VerticalAlignment="Top" Width="124" Click="btnCarregar_Click" /> <ListBox Grid.Row="1" Name="lstConteudo" BorderBrush="{x:Null}" Background="{x:Null}"> <!--Template que define o layout de cada item da ListBox--> <ListBox.ItemTemplate> <DataTemplate> <!--Perceba que foi utilizado um outro painel para definir o layout--> <StackPanel Orientation="Horizontal" Height="132"> <Image Source="{Binding UrlFoto}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0" /> <StackPanel Width="370"> <TextBlock Text="{Binding Usuario}" Foreground="#FFC8AB14" FontSize="28"/> <TextBlock Text="{Binding Conteudo}" TextWrapping="Wrap" FontSize="23"/> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </Window> Para fazer o fundo em gradiente, utilizamos o LinearGradientBrush com duas cores definidas para a Janela. A primeira linha da Grid, que separa a ListBox dos demais controles do cabecalho, tem 80 pixels de altura, o restante, definido como *, fica para a segunda linha que e onde esta a ListBox. Agora vem uma parte importante, a definicao do layout dos itens que forem carregados no ListBox. Para isso temos que criar um painel de Layout, dentro do template de dados da ListBox. Nesse caso o painel de layout utilizado foi o StackPanel, ou painel empilhador. Ele empilha os controles, um sobre o outro, seja na vertical ou na horizontal. Dentro desse painel, colocamos um controle Image, para exibir a foto do usuario, com altura e largura de 73 pixels. Colocamos tambem dois TextBlock, um para o nome do usuario, com fonte um pouco maior, e outro para o tweet em si, com a quebra de linha ativada (propriedade TextWrapping="Wrap"). Uma outra curiosidade: se voce vem do desenvolvimento Windows Forms e quer uma maneira de organizar layout semelhante aos bons e velhos formularios, opte pelo painel chamado Canvas. Ao analisar o XAML uma coisa deve estar te deixando cmo a pulga atras da orelha: O que sao aqueles bindings. O pessoal do ASP.NET deve ate desconfiar. Bem, os bindings sao definicoes de vinculo. Ou seja, nesse caso, passaremos uma lista de objetos para o ListBox. Esses objetos serao do tipo ItemTwitter, que criaremos mais adiante. Ou melhor, vamos cria-lo agora. Clique com o botao direito no projeto > Add > Class. Veja na imagem abaixo: O nome dela sera ItemTwitter, o codigo fonte esta abaixo: namespace MeuClienteDeTwitter { public class ItemTwitter { public string UrlFoto { get; set; } public string Usuario { get; set; } public string Conteudo { get; set; } } } Basicamente tres propriedades string estao definidas. Voltando ao binding, quando passarmos para o ListBox uma lista do tipo ItemTwitter, para cada objeto da lista sera criado um item no ListBox. Mas como vincular o layout com as informacoes dos itens da lista? Definindo um binding no controle e propriedade desejados. No caso da foto, colocaremos no controle Image, na propriedade Source (pois vincularemos a URL da foto do usuario). Nos TextBlocks a propriedade de vinculo sera a Text.