CODEWITHSUNDEEP
c#windows-phone-7windows-phone-8windows-phonescrollview
lukas
lukas

Reputation: 35

StackPanel with Images in ScrollViewer don't shows images

I'm downloading a lot of pictures from IsolatedSotrage and displaying them on the screen in a StackPanel. When I start the app I don't see the images in my phone (photos are not visible(why?!)), but when I lock the phone and unlock I have all the pictures, everything is ok.

Why this is happening?

XAML:

<ScrollViewer x:Name="ScrollViewer1">
    <StackPanel x:Name="myStackPanel"/>
</ScrollViewer>

C# - Adding images to StackPanel: 

Image[] myImage = new Image[30];

for (int n = 1; n < 30; n++)
{
    myImage[n] = new Image();
    myImage[n].Source = getBitmap(n, "/image/");  
    myStackPanel.Children.Add(myImage[n]);       
}

Method to open images from IsolatedStorage:

public BitmapImage getBitmap(int n, string path)
{
    BitmapImage myBitmap = new BitmapImage();

    using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
    {
        if (store.FileExists(path + n.ToString() + ".jpg"))
        {
            using (var isoStream = store.OpenFile(path + n.ToString() + ".jpg", FileMode.Open, FileAccess.Read))
            {
                myBitmap.SetSource(isoStream);
                return myBitmap;
            }
        }
        else
        {
            return myBitmap= null;
        }
    }
}

At this moment I have 2 disappointing solution to this problem:

When I remove the ScrollViewer I don't have any problem, but my images is outside the screen. But when I use the Grid and I hold each picture in a separate Grid it works, but loading images takes much longer

Image[] myImage = new Image[30];

for (int n = 1; n < 30; n++)
{
    Grid myGrid = new Grid();
    myImage[n] = new Image();
    myImage[n].Source = getBitmap(n, "/image/");
    myGrid.Children.Add(myImage[n]);
    myStackPanel.Children.Add(myGrid);
}

Edit:

It looks like this:

enter image description here

Upvotes: 1

Views: 248

Answers (2)

Johan Falk
Johan Falk

Reputation: 4359

The problem is that when the images are added inside the StackPanel they get no width or height. You can verify this by adding the following and the images should be visible (this sets to full width):

myImage[n].Width = 480;
myImage[n].Height = (float)myBitmap.PixelHeight / myBitmap.PixelWidth * 480;

Altought I would probably recommend you to use a ListBox instead of a StackPanel inside a ScrollViewer. This can be done with the following XAML:

<ListBox x:Name="myListbox" />

And change the code to add the images (also you were skipping index 0 in this loop):

Image[] myImage = new Image[30];

for (int n = 0; n < 30; n++)
{
    myImage[n] = new Image();
    myImage[n].Source = getBitmap(n, "/image/");    
}
myListbox.ItemsSource = myImage;

In some cases you might also need to turn of delayed creation, this is done with setting CreateOptions on the bitmap.

BitmapImage myBitmap = new BitmapImage() { CreateOptions = BitmapCreateOptions.None };

Upvotes: 2

Deeko
Deeko

Reputation: 1539

BitmapImage has an ImageOpened and ImageFailed event. Add handlers to those events and debug - see if the ImageFailed event is being fired, and if so, why.

Upvotes: 1

Related Questions