CODEWITHSUNDEEP
c#wpfimagelistboxwrappanel
Udayakiran Kallavi
Udayakiran Kallavi

Reputation: 21

WPF: Load images from a directory and list them in a WrapPanel

I am trying to learn WPF and I was learning about panels today. While trying out Wrap Panel, I got the amazing idea of loading a list of images from a directory and display them in a wrap panel. To also practice about Binding, I decided to load the list of images dynamically and display according to the list. But the list of images are not getting displayed through Binding. Here is the XAML code:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="28"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="90"/>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Column="0" Name="txtFolderPath" MinWidth="120" Margin="5" Text="C:\Users\Public\Pictures\Sample Pictures"/>
        <Button Grid.Column="1" Name="btnLoadFolderPath" Content="Load" MinWidth="80" Margin="5" Click="btnLoadFolderPath_Click"/>
    </Grid>
    <ListView Grid.Row="1" Margin="0,0.2,-0.4,-242.4" ItemsSource="{Binding lstImages}" Name="lstView">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Image Width="100" Height="100"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

And here is the C# part of the code:

List<Image> lstImages = new List<Image>();

private void btnLoadFolderPath_Click(object sender, RoutedEventArgs e)
{
    Image imgTemp;
    List<string> lstFileNames = new List<string>(System.IO.Directory.EnumerateFiles(txtFolderPath.Text, "*.jpg"));
    foreach (string fileName in lstFileNames)
    {
        imgTemp = new Image();
        imgTemp.Source = new BitmapImage(new Uri(fileName));
        imgTemp.Height = imgTemp.Width = 100;
        lstImages.Add(imgTemp);
    }
}

If I add the images to the list box in C# code, I am able to see the images but they do not wrap around. I am not sure what I am doing wrong.

Please note: I understand that this question might have been posted dozens of times in different forms. But I am new to WPF and hence unable find out the exact terms to use to find them. The few explanations I found were either too simplistic or too complex and I was not able figure out where exactly I am going wrong. Here is a question already posted, which I took as an example: Displaying images in grid with WPF. I do not want the text and stuff. But I need just the images to be displayed in a similar layout.

I would be grateful if anyone can provide the simplest possible solution for this. All I need is to dynamically display a list of images in a wrap panel. Thanks in advance for any help provided.

Upvotes: 2

Views: 6013

Answers (1)

dkozl
dkozl

Reputation: 33384

You need to set ScrollViewer.HorizontalScrollBarVisibility="Disabled" against ListView to disable horizontal scrolling ability: 

<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...

As @HenkHolterman pointed out in his comment you bind ItemsSource to lstImages but it's declared as private field which would be invalid binding source. I suspect it works in your case because somewhere in code you do something like:

lstView.ItemSource = lstImages;

if you would like to use it through binding you would need to convert it to public property. Something like this:

public List<Image> lstImages { get; set; }

and in the Window constructor do something like this:

lstImages = new List<Image>();
this.DataContext = this;

Upvotes: 2

Related Questions