How to set WrapPanel itemsource to list?

Question

I want to show in WrapPanel a list of images. How can I do that or maybe I shall use other control ?

Bleach

Answer 1

You can absolutely use the WrapPanel to show a list of images, scrolling vertically or horizontally. To get the kind of panoramic tile effect like in People hub with your images, you could do something like this:

       <controls:PanoramaItem Header="something" Orientation="Horizontal" Margin="0,-15,0,0" >                
            <ListBox Name="SomeList" Margin="0,0,-12,0" ItemsSource="{Binding SomeItemsList}" >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel x:Name="wrapPanel" Width="700" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,17">                                
                            <Image Height="200" Width="200" Margin="12,0,9,0" Source="{Binding ImageURL}" />                                
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </controls:PanoramaItem>

Please note that a WrapPanel inside a ListBox does pick up the DataTemplate you define .. so you have complete liberty to bind any list to your WrapPanel.

Hope this helps!

Enclitic

Instead of the ListBox you can use the simpler ItemsControl. – Kawai

Answer 2

Search for the same thing and came across this: Displaying a Collection of Items in a WrapPanel.

<ItemsControl ItemsSource="{Binding ActorList}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}" Height="100"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

or you can use Xceed's SwitchPanel.

Melancholic

Answer 3

Yes definetly not the WrapPanel, it has not ItemsSource, it can't take a list. Use the ListBox, and you can set the ItemsSource.

Edit

Scare

I know about ListBox but it doesn't show well photos. ItemSource Is example, I want to say that I give WrapPanel a list and it automatically show these list. – Bleach

Well you can play with the ControlTemplate of the ListBox to show as you want. WrapPanel, inherits from Panel. You basically need something that implements Itemscontrol. Check my answer to see the elements that implement the ItemsControl for the choices you have. – Scare