CODEWITHSUNDEEP
c#.netwpfxamldata-binding
user3024750
user3024750

Reputation: 105

WPF - ItemControl DataBinding in a WrapPanel/Grid

I would like to read out images from my own datatype and sync the List to a Grid/WrapPanel via ItemControl Binding.

My XAML:

    <WrapPanel >
    <ItemsControl Name="images">
        <ItemsControl.ItemTemplate>
            <DataTemplate>

                <Image Source="{Binding Link}" Stretch="None"  ></Image>


            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</WrapPanel>

C# code:

 public MainWindow()
    {
        InitializeComponent();
        List<Movie> items = new List<Movie>();
        items.Add(new Movie() { Name = "Movie1", Link = "http://www.airvana.com/default/cache/file/1601D22D-9266-DE31-D6B8D178DB2933DC_small.png", Column =0 });

      items.Add(new Movie() { Name = "Movie2", Link = "http://www.airvana.com/default/cache/file/1601D22D-9266-DE31-D6B8D178DB2933DC_small.png"});
      items.Add(new Movie() { Name = "Movie2", Link = "http://www.airvana.com/default/cache/file/1601D22D-9266-DE31-D6B8D178DB2933DC_small.png"});
       // items.Add(new Movie() { Name = "Movie3"});

        images.ItemsSource = items;
    }
}
public class Movie
{
    public string Name { get; set; }
    public string Link { get; set; }
}

This works all really well, only problem I have (and why I tried the WrapPanel instead of the Grid) is that all 3 images are below each other, not next to each other.

how it looks

If I do it without the Binding and just using a WrapPanel and adding 3 images, it works perfectly.

Basically what I'd like to do is a set of images, like a picture collage - is there a better way to do so?

Upvotes: 2

Views: 1498

Answers (1)

Xiaoy312
Xiaoy312

Reputation: 14477

ItemsPanelTemplate that defines the panel to use for the layout of the items. The default value for the ItemsControl is an ItemsPanelTemplate that specifies a StackPanel.

Wraping a bunch of vertically stacked images in a WrapPanel is not going to make them horizontal. You need to change the layout to this : 

<ItemsControl Name="images" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Link}" Stretch="None" ></Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Upvotes: 2

Related Questions