locked
Grouped Items Page Binding Images to the template

    Question

  • i have made a app that take input from user name city phone number and their images which is done using a file picker as shown.

    i created classes and create a database and store the details in the table using sqlite.

    i created my view model and i group my items by category.

    i am binding my data to a grouped item page using binding.

    but i have problem in binding to the image.

    i used the file picker to choose the image stored in my pc and i am storing the path of that in the database.

    but since the path is like c:\users..\Desktop the image is not showing up on the grouped items page.

    if i am passing the path in form of i.e "http://cf2.imgobject.com/t/p/w500/9cnWl7inQVX6wznjYNmQmJXVD6J.jpg" then i can see it on the grouped item page i don't understand how to do it bind to a image stored in my pc on one of the drives.

    help out!!!!



    Thursday, October 23, 2014 9:42 AM

Answers

  • Hi Samul,

    It is because the store app cannot access the PC location like “c:\user..\Desktop…..”. Store app likes a sand box, it can just access the storage folder and install folder. If you want to access other location, you need to use file picker. So in this case, when you bind the PC location into grouped item page, it will show nothing.

    So an easy way to fix this problem, you’d better copy the image file into local storage and then save the new image path into sqlite.

    Use the following code to query the image file and then copy it to local storage.

    FileOpenPicker openPicker = new FileOpenPicker();
                openPicker.ViewMode = PickerViewMode.Thumbnail;
                openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
                openPicker.FileTypeFilter.Add(".jpg");
                openPicker.FileTypeFilter.Add(".jpeg");
                openPicker.FileTypeFilter.Add(".png");
                StorageFile file = await openPicker.PickSingleFileAsync();
                if (file != null)
                {
                    StorageFile f = await ApplicationData.Current.LocalFolder.CreateFileAsync("newfile.jpg");
                    await file.CopyAndReplaceAsync(f);
                }
    

    Access data and file in store app. http://msdn.microsoft.com/en-us/library/windows/apps/xaml/Hh758319(v=win.10).aspx.

    If you still have questions, please feel free to let me know.

    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 samul tyagi Friday, October 24, 2014 7:11 AM
    Friday, October 24, 2014 5:44 AM
    Moderator
  • i think this is complete solution to my problem but you guided me to it

     if (File != null)
                {
                    StorageFile f = await ApplicationData.Current.LocalFolder.CreateFileAsync("newfile.jpg", CreationCollisionOption.GenerateUniqueName);
                    await File.CopyAndReplaceAsync(f);
                    using (IRandomAccessStream FileStream = await File.OpenAsync(Windows.Storage.FileAccessMode.Read))
                    {
                        BitmapImage bitmapImage = new BitmapImage();
                        bitmapImage.DecodePixelWidth = 262;
                        await bitmapImage.SetSourceAsync(FileStream);
                        Image1.Source = bitmapImage;
                    }
                    FilePath = f.Path.ToString();
    }

    and i used it in the database like this

     db.Insert(new Customer()
                    {
                        NameId = Nametxt.Text,
                        City = Citytxt.Text,
                        PhoneNumber = PhoneNumbertxt.Text,
                        /* getting initial of customer name and capitalising 
                        it so that we can divide the view based upon alphabets similar to a contact book*/
                        CustomerCategory = Nametxt.Text.Substring(0, 1).ToUpper(),
                        Image = FilePath
                    });

    • Marked as answer by samul tyagi Friday, October 24, 2014 7:48 AM
    Friday, October 24, 2014 7:47 AM

All replies

  • Hi Samul,

    It is because the store app cannot access the PC location like “c:\user..\Desktop…..”. Store app likes a sand box, it can just access the storage folder and install folder. If you want to access other location, you need to use file picker. So in this case, when you bind the PC location into grouped item page, it will show nothing.

    So an easy way to fix this problem, you’d better copy the image file into local storage and then save the new image path into sqlite.

    Use the following code to query the image file and then copy it to local storage.

    FileOpenPicker openPicker = new FileOpenPicker();
                openPicker.ViewMode = PickerViewMode.Thumbnail;
                openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
                openPicker.FileTypeFilter.Add(".jpg");
                openPicker.FileTypeFilter.Add(".jpeg");
                openPicker.FileTypeFilter.Add(".png");
                StorageFile file = await openPicker.PickSingleFileAsync();
                if (file != null)
                {
                    StorageFile f = await ApplicationData.Current.LocalFolder.CreateFileAsync("newfile.jpg");
                    await file.CopyAndReplaceAsync(f);
                }
    

    Access data and file in store app. http://msdn.microsoft.com/en-us/library/windows/apps/xaml/Hh758319(v=win.10).aspx.

    If you still have questions, please feel free to let me know.

    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 samul tyagi Friday, October 24, 2014 7:11 AM
    Friday, October 24, 2014 5:44 AM
    Moderator
  • okay i understand now that it is not possible. if i am copying a image in the storage folder then i have 2 images on my pc means it is doubling the storage my data taking. can i delete the file from the original location or is there a way that i store this data on my one drive and directly access it from there so that i can use my app on various devices with data being stored in my one drive and also the database created being updated and by using any device i can update my data. i get a great solution by you here so if you just please guide me in my query i asked you because it is difficult to search for answers alone and gooling every time not give me great result it would be great if you can help out.



    • Edited by samul tyagi Friday, October 24, 2014 7:49 AM
    Friday, October 24, 2014 7:11 AM
  • i think this is complete solution to my problem but you guided me to it

     if (File != null)
                {
                    StorageFile f = await ApplicationData.Current.LocalFolder.CreateFileAsync("newfile.jpg", CreationCollisionOption.GenerateUniqueName);
                    await File.CopyAndReplaceAsync(f);
                    using (IRandomAccessStream FileStream = await File.OpenAsync(Windows.Storage.FileAccessMode.Read))
                    {
                        BitmapImage bitmapImage = new BitmapImage();
                        bitmapImage.DecodePixelWidth = 262;
                        await bitmapImage.SetSourceAsync(FileStream);
                        Image1.Source = bitmapImage;
                    }
                    FilePath = f.Path.ToString();
    }

    and i used it in the database like this

     db.Insert(new Customer()
                    {
                        NameId = Nametxt.Text,
                        City = Citytxt.Text,
                        PhoneNumber = PhoneNumbertxt.Text,
                        /* getting initial of customer name and capitalising 
                        it so that we can divide the view based upon alphabets similar to a contact book*/
                        CustomerCategory = Nametxt.Text.Substring(0, 1).ToUpper(),
                        Image = FilePath
                    });

    • Marked as answer by samul tyagi Friday, October 24, 2014 7:48 AM
    Friday, October 24, 2014 7:47 AM