How to add images to listview in uwp?

Question

I want to create a image dynamically and add to listview.

And then, when i click the button, the other image is added, moved or updated new image to listview.

---

I used the stackpanel, but it didn't work as I thought.

Add function works well but remove or update wasn't

I think that the index value has trouble during processing

Here is my code

Please any help! Thanks.

async void Thumb_save(int index)
    {
        StorageFolder storageFolder = ApplicationData.Current.LocalFolder;

        sampleFile_thumb_back = await storageFolder.CreateFileAsync(MainPage.filename_thumb + index + ".jpg",CreationCollisionOption.ReplaceExisting);

        StorageFile file_thumb_back = sampleFile_thumb_back;

        IRandomAccessStream stream_thumb_back = await file_thumb_back.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);

        using (IOutputStream outputStream_thumb_back = stream_thumb_back.GetOutputStreamAt(0))
        {
            await ink1.InkPresenter.StrokeContainer.SaveAsync(outputStream_thumb_back);

            await outputStream_thumb_back.FlushAsync();
        }
        stream_thumb_back.Dispose();

        imgThumbnail_back = await file_thumb_back.GetThumbnailAsync(ThumbnailMode.PicturesView, 200, ThumbnailOptions.ResizeThumbnail);

        BitmapImage bitmapImage = new BitmapImage();

        bitmapImage.SetSource(imgThumbnail_back);


        Image img = new Image();

        img_stack.Children.Add(img); // Here, I add the image to my stackpanel

        img.Source = bitmapImage;

        return;
    }

Answer 1

I think you can use MVVM to bind the image to ViewModel and View.

In Model, you can write the List that includes the Image.

public class ImageThumbnail
{
    public ImageSource ImageSource { get; set; }
}

In ViewModel, you can insert, remove, update the Image.

public class ViewModel
{
    public ObservableCollection<ImageThumbnail> ImageThumbnailList { get; } =
        new ObservableCollection<ImageThumbnail>();

    public void ThumbRemove(int index)
    {
        ImageThumbnailList.RemoveAt(index);
    }

    public void ThumbUpdate(BitmapImage image, int index)
    {
        ImageThumbnailList.RemoveAt(index);
        ImageThumbnailList.Insert(index, new ImageThumbnail()
        {
            ImageSource = image
        });
    }

    public async Task Thumb_save(int index)
    {
        StorageFolder storageFolder = ApplicationData.Current.LocalFolder;

        var filename_thumb = "xx"; // I dont have filename thumb that you should replace it to your code.

        var sampleFile_thumb_back = await storageFolder.CreateFileAsync(filename_thumb + index + ".jpg",
            CreationCollisionOption.ReplaceExisting);
        // we suggeste that use camelCase. Try to replace sampleFileThumbBack to sampleFile_thumb_back

        StorageFile file_thumb_back = sampleFile_thumb_back;

        IRandomAccessStream stream_thumb_back =
            await file_thumb_back.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);

        using (IOutputStream outputStream_thumb_back = stream_thumb_back.GetOutputStreamAt(0))
        {
            // for I dont have any ink that you should uncomment in your code
            //await ink1.InkPresenter.StrokeContainer.SaveAsync(outputStream_thumb_back);

            //await outputStream_thumb_back.FlushAsync();
        }

        stream_thumb_back.Dispose();

        var imgThumbnail_back =
            await file_thumb_back.GetThumbnailAsync(ThumbnailMode.PicturesView, 200,
                ThumbnailOptions.ResizeThumbnail);

        BitmapImage bitmapImage = new BitmapImage();

        bitmapImage.SetSource(imgThumbnail_back);

        ImageThumbnailList.Add(new ImageThumbnail()
        {
            ImageSource = bitmapImage
        });
    }
}

You should bind ViewModel to xaml.

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    public ViewModel ViewModel { get; } = new ViewModel();
}

    <ListView ItemsSource="{x:Bind ViewModel.ImageThumbnailList}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:ImageThumbnail">
                <Grid>
                    <Image Source="{x:Bind ImageSource}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>