none
Como deixar itens de um ListBox lado a lado RRS feed

  • Pergunta

  • 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>

    sexta-feira, 4 de maio de 2012 00:04

Respostas

  • 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

    • Sugerido como Resposta hamiltonj segunda-feira, 7 de maio de 2012 14:17
    • Marcado como Resposta GilvanDev segunda-feira, 7 de maio de 2012 23:52
    sexta-feira, 4 de maio de 2012 09:24
  • 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

    • Marcado como Resposta GilvanDev segunda-feira, 7 de maio de 2012 23:53
    sexta-feira, 4 de maio de 2012 12:03
    Moderador

Todas as Respostas

  • 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

    • Sugerido como Resposta hamiltonj segunda-feira, 7 de maio de 2012 14:17
    • Marcado como Resposta GilvanDev segunda-feira, 7 de maio de 2012 23:52
    sexta-feira, 4 de maio de 2012 09:24
  • 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

    • Marcado como Resposta GilvanDev segunda-feira, 7 de maio de 2012 23:53
    sexta-feira, 4 de maio de 2012 12:03
    Moderador