CODEWITHSUNDEEP
xamlwindows-phone-8
Bryony Lloyd
Bryony Lloyd

Reputation: 62

Windows Phone Allignment of a repeating image control

I am developing an application and I have an image control that displays however many images are stored in the database. So I have got the images to display. However the images are displaying below the previous one and not next to the previous one. enter image description here (ignore the names next to the picture I have taken them out now).

So my question is what method can I use to get them aligned, I'm not sure what I need to search for in Google, everything I can think of doesnt bring back anything close to what I am looking for. The XAML code is below:

 <Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->
    <phone:Pivot Title="Share This!">
        <!--Pivot item one-->
        <phone:PivotItem Header="All Photos">
            <Grid>
                <ListBox Height="559" HorizontalAlignment="Left" Margin="6,20,0,0" x:Name="lst_viewPhotos" VerticalAlignment="Top" Width="444" FontSize="30" ItemsSource="{Binding}" SelectionChanged="lst_viewPhotos_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,10,0,0" >
                                <Image Source="{Binding}" HorizontalAlignment="Left" Height="100" Width="100"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </phone:PivotItem>
    </phone:Pivot>
</Grid>

Upvotes: 0

Views: 129

Answers (1)

SWilko
SWilko

Reputation: 3612

You can get them displaying alongside each other by setting the ItemsPanel

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
         <VirtualizingStackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

However I would recommend a GridView for this so that you can use a Wrapgrid which will reach the end of a Row or Column and wrap to a new Row or Column. Something like this

<GridView>
    <GridView.ItemsPanel>
         <ItemsPanelTemplate>
             <WrapGrid Orientation="Horizontal" />
         </ItemsPanelTemplate>
     </GridView.ItemsPanel>
 </GridView>

Upvotes: 2

Related Questions