How to set WrapPanel itemsource to list?

2019-02-06 11:23发布

问题:

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

回答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!



回答2:

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



回答3:

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

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

or you can use Xceed's SwitchPanel.