ScrollViewer 中带有图像的 StackPanel 不显示图像答案

【问题标题】：StackPanel with Images in ScrollViewer don't shows imagesScrollViewer 中带有图像的 StackPanel 不显示图像
【发布时间】：2014-03-12 12:21:18
【问题描述】：

我正在从 IsolatedSotrage 下载大量图片，并将它们显示在 StackPanel 的屏幕上。当我启动应用程序时，我看不到手机中的图像（照片不可见（为什么？！）），但是当我锁定手机并解锁时，我拥有所有图片，一切正常。

为什么会这样？

XAML：

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

C# - 将图像添加到 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]);       
}

从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;
        }
    }
}

目前我对这个问题有 2 个令人失望的解决方案：

当我删除 ScrollViewer 时，我没有任何问题，但我的图像在屏幕之外。但是当我使用 Grid 并将每张图片保存在单独的 Grid 中时，它可以工作，但加载图像需要更长的时间

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);
}

编辑：

看起来像这样：

【问题讨论】：

最初包含ScrollViewer 的内容是什么？是否有足够的高度来显示图像？
ScrollViewer 在 LayoutRoot 中，整个屏幕用于显示图片。 ScrollViewer 最初只包含 stackpanel。
你用什么方法调用你发布的代码来填充 StackPanel？
什么类型的元素被用来承载StackPanel？添加一个包含 StackPanel 的 Border，这样您就可以看到在加载图像时StackPanel 的大小应该如何变化。
在 StackPanel 我只想使用图像 (*.jpg)。我的英语很差，所以我不太明白我如何处理这个边界:)

标签： c# windows-phone-7 windows-phone-8 windows-phone scrollview

【解决方案1】：

问题是当图像被添加到StackPanel 中时，它们没有宽度或高度。您可以通过添加以下内容来验证这一点，并且图像应该是可见的（设置为全宽）：

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

我可能会建议您在ScrollViewer 中使用ListBox 而不是StackPanel。这可以通过以下 XAML 完成：

<ListBox x:Name="myListbox" />

并更改代码以添加图像（您也在此循环中跳过索引 0）：

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;

在某些情况下，您可能还需要关闭延迟创建，这可以通过在位图上设置 CreateOptions 来完成。

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

【讨论】：

为什么要使用ListBox？如果选择不重要，则会增加不必要的开销。我也不会把它放在ScrollViewer 中，因为它里面有一个。
当然我的意思是用一个列表框替换堆栈面板和滚动查看器。建议使用 ListBox 的另一个原因是因为它很容易给出想要的结果（显示彼此全宽的图像），但是是的，它可能会产生另一个解决方案可能没有的小开销。

【解决方案2】：

BitmapImage 有一个 ImageOpened 和 ImageFailed 事件。为这些事件添加处理程序并进行调试 - 查看是否触发了 ImageFailed 事件，如果是，原因是什么。

【讨论】：