locked
How to save Image from binding FlipView?

    Question

  • I bind 4 images in my FlipView, how save an binding Image to Picture Library;

    <FlipView Name="display1"  ItemsSource="{Binding}" Foreground="#FFE6D52E" HorizontalAlignment="Center" VerticalAlignment="Center           
                <FlipView.ItemTemplate>
                    <DataTemplate>                  
                                <Image x:Name="image" Source="{Binding  Path=Image}" Stretch="UniformToFill"/>                
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

    private void SaveImage_Click(object sender, RoutedEventArgs e)
            {
                  var img = display1.SelectedItem as WriteableBitmap;

                           StorageFolder appfolder = await   KnownFolders.PicturesLibrary.CreateFolderAsync("myimage",           CreationCollisionOption.OpenIfExists);
            StorageFile myFile = await appfolder.CreateFolderAsync("imge1.jpg", CreationCollisionOption.ReplaceExisting);    
            img.Invalidate();
            using(Stream strem = await myFile.OpenStreamForWriteAsync())
            {
                img.Savejpeg(strem, img.PixelWidth, img.PixelHeight, 0, 100);
            }

            }

    //for me it is  hard to save binding files,I cant save any image

    Friday, January 9, 2015 7:35 AM

Answers

  • Hi Icce cage,

    Per my understanding, you bind the path of image to Image control, so you get image path string from display1.SelectItem property. Try finding Image from this path in installation folder and then copy it to Picture library. Please try the following code snippet.

    Custom class to hold the image object.

    public  class CustomClass
    
        {
    
           public string ImagePath { get; set; }
    
    
           public string ImageName { get; set; }
    
    
    }
    

    Initial image sources.

    private void Page_Loaded(object sender, RoutedEventArgs e)
    
            {
    
                images = new System.Collections.ObjectModel.ObservableCollection<CustomClass>();
    
                images.Add(new CustomClass() { ImagePath = "/Images/1.png", ImageName = "1.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/2.png", ImageName = "2.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/3.png", ImageName = "3.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/4.png", ImageName = "4.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/5.png", ImageName = "5.png" });
    
                display1.ItemsSource = images;
    
            }
    

    XAML.

    <FlipView RightTapped="display1_RightTapped" Name="display1"  Foreground="#FFE6D52E" HorizontalAlignment="Center" VerticalAlignment="Center"   >
    
                    <FlipView.ItemTemplate>
    
                        <DataTemplate>
    
                            <Image x:Name="image" Source="{Binding  Path=ImagePath}" Stretch="UniformToFill"/>
    
                        </DataTemplate>
    
                    </FlipView.ItemTemplate>
    
                </FlipView>
    

    Save image to picture library.

    private async void display1_RightTapped(object sender, RightTappedRoutedEventArgs e)
    
            {
    
                CustomClass data = display1.SelectedItem as CustomClass;
    
                if (data!=null)
    
                {
    
                    var installation = Windows.ApplicationModel.Package.Current.InstalledLocation;
    
                    var imagesfolder =await installation.GetFolderAsync("Images");
    
                    var file = await imagesfolder.GetFileAsync(data.ImageName);
    
                    await file.CopyAsync(KnownFolders.PicturesLibrary);
    
                    
    
                }
    
            }
    

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by icce cage Wednesday, January 14, 2015 9:04 PM
    Monday, January 12, 2015 2:23 AM
    Moderator

All replies

  • Hi,  Im Developing a Simple Recipes app And i include some of Images from the recipes collections.

    I use FlipView Control To bind those images. and a one Button for saving every single to image stream.

    anyway how to save a selected image to Image stream from FlipView Control DataTemplate?

    Saturday, January 10, 2015 5:42 PM
  • Hi Icce cage,

    Per my understanding, you bind the path of image to Image control, so you get image path string from display1.SelectItem property. Try finding Image from this path in installation folder and then copy it to Picture library. Please try the following code snippet.

    Custom class to hold the image object.

    public  class CustomClass
    
        {
    
           public string ImagePath { get; set; }
    
    
           public string ImageName { get; set; }
    
    
    }
    

    Initial image sources.

    private void Page_Loaded(object sender, RoutedEventArgs e)
    
            {
    
                images = new System.Collections.ObjectModel.ObservableCollection<CustomClass>();
    
                images.Add(new CustomClass() { ImagePath = "/Images/1.png", ImageName = "1.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/2.png", ImageName = "2.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/3.png", ImageName = "3.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/4.png", ImageName = "4.png" });
    
                images.Add(new CustomClass() { ImagePath = "/Images/5.png", ImageName = "5.png" });
    
                display1.ItemsSource = images;
    
            }
    

    XAML.

    <FlipView RightTapped="display1_RightTapped" Name="display1"  Foreground="#FFE6D52E" HorizontalAlignment="Center" VerticalAlignment="Center"   >
    
                    <FlipView.ItemTemplate>
    
                        <DataTemplate>
    
                            <Image x:Name="image" Source="{Binding  Path=ImagePath}" Stretch="UniformToFill"/>
    
                        </DataTemplate>
    
                    </FlipView.ItemTemplate>
    
                </FlipView>
    

    Save image to picture library.

    private async void display1_RightTapped(object sender, RightTappedRoutedEventArgs e)
    
            {
    
                CustomClass data = display1.SelectedItem as CustomClass;
    
                if (data!=null)
    
                {
    
                    var installation = Windows.ApplicationModel.Package.Current.InstalledLocation;
    
                    var imagesfolder =await installation.GetFolderAsync("Images");
    
                    var file = await imagesfolder.GetFileAsync(data.ImageName);
    
                    await file.CopyAsync(KnownFolders.PicturesLibrary);
    
                    
    
                }
    
            }
    

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by icce cage Wednesday, January 14, 2015 9:04 PM
    Monday, January 12, 2015 2:23 AM
    Moderator