1

この質問は、いくつかの点でこれと似ています。

Windows 8 XAML: データ バインディングを使用して GridView に画像の一覧を表示する

そこにリストされている手順に従って、画像を独自の GridView にロードしました。いくつかの画像を多数の画像からロードすることから、最初の画像のみをロードするようになりました。残りは空白として表示されることさえありませんが、完全にロードされていない場合はすべてそこに表示されます。これが私のコードです。これは、前述の質問と同じものをほとんど使用しています。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.Storage;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Storage.Streams;

namespace present50_2
{
    public class SlideData
    {
        // slide collection that will be used to populate app slides page
        public List<Slide> Slides = new List<Slide>();

        // image files that will be asynchronously loaded
        public IReadOnlyList<StorageFile> files;

        public SlideData(IReadOnlyList<StorageFile> files)
        {
            this.files = files;
        }

        public async void loadSlides()
        {
            int counter = 1;
            Slides = new List<Slide>();

            foreach (var file in files)
            {
                using (var stream = await file.OpenAsync(FileAccessMode.Read))
                {
                    Slides.Add(new Slide(stream, counter.ToString()));
                }

                counter++;
            }
        }

        public class Slide
        {
            public Slide()
            {

            }

            public Slide(IRandomAccessStream stream, string name)
            {
                BitmapImage bmp = new BitmapImage();
                bmp.SetSource(stream);
                Image = bmp;
                this.Title = name;
            }

            /*
            public async void LoadImage()
            {
                IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
                BitmapImage bi = new BitmapImage();
                bi.SetSource(fileStream);
                this.Image = bi;
            } */

            public string Title { set; get; }
            public BitmapImage Image { set; get; }
        }
    }
}

そのクラスは、グリッドにバインドされるデータを保持するものです。これは、上記のクラスを呼び出すコードです。

protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
        {
            var folderPicker = new FolderPicker();
            folderPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
            folderPicker.FileTypeFilter.Add(".png");
            StorageFolder folder = await folderPicker.PickSingleFolderAsync();

            if (folder != null)
            {
                IReadOnlyList<StorageFile> files = await folder.GetFilesAsync();
                SlideData slides = new SlideData(files);
                slides.loadSlides();
                this.DefaultViewModel["Items"] = slides.Slides;
            }
        }

実際のグリッド レイアウトとバインドには、次の XAML のみを使用しています。

<!-- Grid-appropriate 125 pixel square item template as seen in the GroupedItemsPage and ItemsPage -->
    <DataTemplate x:Key="Standard125x125ItemTemplate">
        <Grid HorizontalAlignment="Left" Width="125" Height="125">
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            </Border>
            <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="7,0,7,0"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

このコードは、StandardStyles.xaml に含まれる 250x250 テンプレートを変更しただけです。

もともと、画面に画像をまったく読み込むことができませんでした (画像は灰色の四角として表示されるだけでした)。次に、ここで見た実装 (Kiwi の例) を使用して、いくつかの画像を読み込むことができましたが、ほとんどはまだグレーのままでした:

http://social.msdn.microsoft.com/Forums/windowsapps/en-US/252d4d14-1db3-4f04-93b6-d2eab2c386bc/c-metro-displaying-images-in-a-listview-or-gridview

次に、上に投稿した最後の解決策を使用して、最初のスライドだけを表示することができましたが、他のスライドは灰色のボックスとして表示されることさえありません。助けていただければ幸いです。

4

1 に答える 1