如何检索所选图像并将其保存到列表框中或从列表框中保存到独立存储中

Question

I am retriving images from the media library to list box inside a wrap panel now I want to save the images selected (its a multiple selection listbox) to the isolatedstorage.

xaml of listbox

    <ListBox Name="vaultbox" SelectionMode="Multiple" 
                ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
     <TextBlock Text="It is so lonely here..." Visibility="Collapsed" />
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel ItemWidth="200" ItemHeight="200"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Image Name="image2" 
                               Stretch="Fill" 
                               VerticalAlignment="Top" Source="{Binding}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

I am lost here. I was trying to do this.

    List<BitmapImage> vltBitmapImage = new List<BitmapImage>();

        foreach (string fileName in fileStorage.GetFileNames("images//*.*"))
        {
            if (fileName == null)
                break;
            string filepath = System.IO.Path.Combine("images", fileName);
            using(IsolatedStorageFileStream imageStream =        
                          fileStorage.OpenFile(filepath,FileMode.Open,FileAccess.Read))
            {
                var imageSource=PictureDecoder.DecodeJpeg(imageStream);
                BitmapImage bitmapImage = new BitmapImage();
                bitmapImage.SetSource(imageStream);
                vltBitmapImage.Add(bitmapImage);
            }
        }


        this.vaultbox.ItemsSource = vltBitmapImage;

using above code i get this exception

'System.Invalid.Operation.Exception Items collection must be empty before using ItemsSource'

dont know why its the same code almost from what i am showing pictures from media library to the listbox.

also from a similar list box above but different one i try to save the files to isolatedstorage but i can seem to find out how can i get the image name... see here. Currently am using "name" what can I do for that?

foreach (BitmapImage item in lstImageFromMediaLibrary.SelectedItems)
{     
    string filepath =System.IO.Path.Combine("images", "name");
    IsolatedStorageFileStream ifs = fileStorage.CreateFile(filepath);
            {
                var bmp = new WriteableBitmap(item);
                bmp.SaveJpeg(ifs,item.PixelWidth,item.PixelHeight,0,90);
            }

        }

Answer 1

I would like to recommend you using MVVM pattern: create the ViewModel and put the collection property inside. Also, it it very convenient to have the "selected item" property in this ViewModel class and bind the selected item of the ListBox to it.

It seems it is necessary to introduce the image item representation: it is image with name.

public class ImageViewModel : ViewModelBase
{
    public ImageViewModel(string name, string image)
    {
        Name = name;
        Image = image;
    }

    // Name or Path? Please make the choice by yourself! =)
    public string Name { get; private set; }
    public BitmapImage Image { get; private set; }
}

ViewModelBase class (implements INotifyPropertyChanged interface):

public abstract class ViewModelBase : INotifyPropertyChanged
{
    protected ViewModelBase()
    {
    }

    #region Implementation of INotifyPropertyChanged interface

    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            var args = new PropertyChangedEventArgs(propertyName);
            handler(this, args);
        }            
    }

    #endregion
}

The main (root) view model.

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {            
        // Call this directly:
        // var images = LoadImages();
        // Images = images;

        // or bind the Command property of Button to the LoadImagesCommand.
        LoadImagesCommand = new RelayCommand((param) => 
            {
                var images = LoadImages();
                Images = new ObservableCollection<ImageViewModel>(images);
            });
    }

    private ObservableCollection<ImageViewModel> _images;
    public ObservableCollection<ImageViewModel> Images
    {
        get { return _images; }
        private set
        {
            if (value == _images)
                return;
            _images = value;
            RaisePropertyChanged("Images");
        }
    }

    private ImageViewModel _selectedImage;
    public ImageViewModel SelectedImage
    {
        get { return _selectedImage; }
        set
        {
            if (value == _selectedImage)
                return;
            _selectedImage = value;
            RaisePropertyChanged("SelectedImage");
        }
    }

    public ICommand LoadImagesCommand { get; private set; }

    private List<ImageViewModel> LoadImages()
    {
        List<ImageViewModel> images = new List<ImageViewModel>();

        // Part of the original code.
        foreach (string fileName in fileStorage.GetFileNames("images//*.*"))
        {
            if (fileName == null)
                break;
            string filepath = System.IO.Path.Combine("images", fileName);
            using (IsolatedStorageFileStream imageStream = fileStorage.OpenFile(filepath,FileMode.Open,FileAccess.Read))
            {
                var imageSource = PictureDecoder.DecodeJpeg(imageStream);
                BitmapImage bitmapImage = new BitmapImage();
                bitmapImage.SetSource(imageStream);

                ImageViewModel imageViewModel = new ImageViewModel(fileName, bitmapImage);
                images.Add(imageViewModel);
            }
        }
    }
}

Window.

public class MainView : Window
{
    public MainView()
    {
        InititializeComponent();
        // It is just for simplicity. It would be better to use MVVM Light framework: ViewModel Locator!
        DataContext = new MainViewModel();
    }
}

XAML:

<!-- Please correct the binding for the Image property inside the ItemStyle -->
<ListBox Name="vaultbox"
         ItemsSource="{Binding Images}"
         SelectedItem={Binding SelectedImage}"
         ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
         Height="493"
         HorizontalAlignment="Left"
         Margin="0,0,0,0"
         VerticalAlignment="Top"
         Width="442"
         SelectionMode="Multiple">
    ...
</ListBox>

Also, please consider asynchronous loading: it won't freeze the UI.

Answer 2

The exception occures because of this line:

  <TextBlock Text="It is so lonely here..." />

You have a child of ListBox. And you try to add more.