Question

我想动态创建图像并添加到列表视图。

然后，当我单击按钮时，另一幅图像被添加，移动或更新到列表视图中。

我使用了堆栈面板，但是它没有按照我的想法工作。

添加功能效果很好，但没有删除或更新

我认为索引值在处理过程中有问题

这是我的代码

请任何帮助！谢谢。

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

我认为您可以使用MVVM将图像绑定到ViewModel和View。

在模型中，您可以编写包含图像的列表。

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

在ViewModel中，您可以插入，删除，更新图像。

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

您应该将ViewModel绑定到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>

如何在uwp中将图像添加到列表视图？

1 个答案: