CODEWITHSUNDEEP
wpfxamlc#-4.0
Yuri
Yuri

Reputation: 2900

Programmatically adding image to StackPanel with a ScrollViewer

My code searching the directory for containing images and then should load them into scrollable panel.

foreach (FileInfo item in di.GetFiles())
        {
            if (item.Extension.ToLower().Contains("tif")){

                Image im = new Image();
                im.Height = 93; im.Width = 90;

                im.Margin =new Thickness( imLeft,217,0,0);
                im.Name = "Image" + imLeft.ToString();
                im.MouseLeftButtonDown += im_MouseLeftButtonDown;
                imLeft += 91;
                BitmapImage myBitmapImage = new BitmapImage();


                myBitmapImage.BeginInit();
                myBitmapImage.UriSource = new Uri(item.FullName);

                myBitmapImage.DecodePixelWidth = 200;
                myBitmapImage.EndInit();
                //set image source
                im.Source = myBitmapImage;
                im.Visibility = Visibility.Visible;
                SP1.Children.Add(im);


            }
        }

After this code executed, I see that scroll appear but images are invisible? While debugging I see that every line is being properly executed with correct parameters. So, my question is why images are invisible?

Thank you.

Here is my XAML:

<ScrollViewer Margin="0,216,0,9" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" Name="myScrollViever" >
        <StackPanel Height="90" HorizontalAlignment="Left" Name="SP1" VerticalAlignment="Top" Orientation="Horizontal" 
                    CanHorizontallyScroll="True" ForceCursor="False" SnapsToDevicePixels="True" OverridesDefaultStyle="True" >
        </StackPanel>

  </ScrollViewer>

Upvotes: 1

Views: 4285

Answers (1)

Clemens
Clemens

Reputation: 128145

Your images get a top margin of 217 where the StackPanel height is set to only 90. Hence the images are outside the visible area.

Try your solution without setting any margins at all, especially without the increasing left margin. That is what the StackPanel does, it places images side by side in horizontal direction, since you've set Orientation="Horizontal".

Anyway, a much better solution would be to replace the StackPanel by a ListBox and simply add the images to the Items collection:

<ListBox x:Name="list">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Width="90" Margin="1,0,0,0"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

In code you would just add images like this:

string directory = ...
foreach (var file in Directory.GetFiles(directory).Where(f => f.EndsWith(".tif")))
{
    // list.Items.Add(new BitmapImage(new Uri(file)));
    // or just add the filename, a default type converter will convert it into an ImageSource
    list.Items.Add(file);
}

The next step would probably be to create a view model object with something like an ImagePaths property of type ObservableCollection<string> and bind the ListBox's ItemsSource to that property.

Upvotes: 2

Related Questions