Como deixar itens de um ListBox lado a lado

Question

Gostaria de saber como colocar os itens de uma lista lado a lado. É uma álbum de fotos, parecido com o app nativo do Windows phone, onde irei listar os albuns através de um XML externo. Segue abaixo o código atual:

<ListBox Name="fotos" Height="480" Visibility="Visible">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    
                                        <Border BorderThickness="2" BorderBrush="#0165C7" Background="#0165C7" Margin="0,0,10,10" UseLayoutRounding="True" 
                                                CornerRadius="3" Width="175" Height="185"  HorizontalAlignment="Left">                                            
                                            
                                            <TextBlock Text="{Binding Alb_Titulo}" FontSize="18" TextWrapping="Wrap" HorizontalAlignment="Left" 
                                                        Margin="-172,0,0,0" Width="170" VerticalAlignment="top" FontWeight="Bold" />
       
                                            <Image Source="{Binding Alb_Capa}" MaxHeight="175" MaxWidth="175" VerticalAlignment="Center" 
                                                       HorizontalAlignment="Center"/>             
                                                    <TextBlock Text="{Binding Alb_Coment}" FontSize="14" TextWrapping="Wrap" Width="170" 
                                                        Margin="-172,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
                                                
                                            
                                        </Border>
                                   
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>

Answer 1

Ora viva, para esse efeito penso que o ideal será substituir o Listbox.ItemsPanel para um WrapPanel:

<ListBox Name="fotos" Height="480" Visibility="Visible">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Só tens que colocar o resto do teu código, mas penso que dá para perceber a ideia através do exemplo em cima!

Nota: o WrapPanel faz parte do Silverlight for Windows Phone Toolkit!

---

Pedro Lamas
DevScope | Senior Software Development Engineer & WP7 Development Speaker
www.pedrolamas.com | @pedrolamas

Answer 2

Gilvan,

O nosso amigo Pedro está correto, a utilização do WrapPanel irá resolver seu problema.

Apenas para colocar um exemplo completo, segue um que utilizo em uma app minha:

<ListBox Margin="12,10,0,0" ItemsSource="{Binding TopProducts}">
	<ListBox.ItemsPanel>
		<ItemsPanelTemplate>
			<toolkit:WrapPanel Orientation="Horizontal" Margin="9,0,9,0" />
		</ItemsPanelTemplate>
	</ListBox.ItemsPanel>
	<ListBox.ItemTemplate>
		<DataTemplate>
            <Image Margin="0,15,10,0" 
                    Width="155"
                    Height="155" 
                    Source="{Binding product.thumbnail.url}"
                    VerticalAlignment="Top">

            </Image>
        </DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

[]s

---

Thiago J. Mônaco
MVP Windows Phone Development
MCP, MCAD, MCSD, MCDBA, MCTS, MCPD and MCT Professional
Scrum Developer I and Professional Scrum Master
http://www.windowsphonebrasil.net
@thiagojmonaco