I am facing an issue while displaying an image from ApplicationData.Current.LocalFolder.
I am able to save an image and store it in LocalFolder, but displaying it in a Image control or LongListSelector, the image does not show up.
Here is the code:
private async void StoreToFile(string imageFileName)
{
StorageFile file = await ApplicationData.Current.LocalFolder.CreateFileAsync(imageFileName, CreationCollisionOption.GenerateUniqueName);
using (Stream current = await file.OpenStreamForWriteAsync())
{
await photoStream.CopyToAsync(current);
}
}
Here is the code to bind:
var folder = ApplicationData.Current.LocalFolder;
var images = await folder.GetFilesAsync();
Recent.ItemsSource = images.ToList();
XAML Code:
<phone:PivotItem Name="pivot1" Header="item2" Background="White">
<phone:LongListSelector x:Name="Recent" Margin="0,0,0,72" ItemsSource="{Binding lst}" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Path}" Width="60"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</phone:PivotItem>
I am able to bind the path to a TextBlock and able to see the exact path like:
C:\Data\Users\DefApps\AppData{GUID}\Local\bucket.png
But if I bind to an image source, images are not displaying.
Can anyone see what I'm doing wrong?
You need to use the msappx uri scheme:
new Uri("ms-appx:///myimage.jpg");
As ToniPetrina has said in comment - you can't bind to Path, your property should return BitmapImage. There are two approaches that come to my mind:
provide a special getter of your property that will return BitmapImage (some code below)
provide a Converter when binding to IsolatedStorage image - here is very nice example
The sample code for the first solution can look like this:
In Xaml:
<ListBox Name="myList" Grid.Row="2">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding GetImgSource}" Width="60"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In code behind:
public class Images : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string imgSource = "";
public string SetImgSource // setter - string
{
set
{
imgSource = value;
RaiseProperty("GetImgSource");
}
}
public BitmapImage GetImgSource // getter - BitmapImage
{
get
{
if (String.IsNullOrEmpty(imgSource)) return null;
BitmapImage temp = new BitmapImage();
using (IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication())
using (IsolatedStorageFileStream file = ISF.OpenFile(imgSource, FileMode.Open, FileAccess.Read))
temp.SetSource(file);
return temp;
}
}
public void RaiseProperty(string property = null)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
ObservableCollection<Images> myImg = new ObservableCollection<Images>();
myList.ItemsSource = myImg; // somewhere
Related
Save the folder path for loading
I uploaded images from a folder selected by a FilePicker but, I would like (after the first time I chose the folder) that when I start the app, automatically loads the selected folder, without having to retrieve it from the picker file every time.
MainPage.xaml:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button x:Name="btnPickFolder"
Content="Pick Folder"
Click="btnPickFolder_Click"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"/>
<Grid x:Name="GridShowImages" HorizontalAlignment="Stretch" Margin="20,52,20,20">
<GridView x:Name="ListViewImage" ItemsSource="{x:Bind listImage}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:SingleImage">
<Image Source="{x:Bind ImageToLoad}"
Margin="5"
Width="300"
Height="168.75"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
</Grid>
MainPage.xaml.cs:
public sealed partial class MainPage : Page
{
ObservableCollection<SingleImage> listImage = new ObservableCollection<SingleImage>();
public MainPage()
{
this.InitializeComponent();
}
private async void btnPickFolder_Click(object sender, RoutedEventArgs e)
{
FolderPicker folderPicker = new FolderPicker();
folderPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
folderPicker.FileTypeFilter.Add("*");
StorageFolder SelectFolderToLoad = await folderPicker.PickSingleFolderAsync();
StorageApplicationPermissions.FutureAccessList.AddOrReplace("PickedFolderToken", SelectFolderToLoad);
foreach (var file in await SelectFolderToLoad.GetFilesAsync())
{
BitmapImage bmp = new BitmapImage();
IRandomAccessStream stream = await file.OpenReadAsync();
bmp.SetSource(stream);
listImage.Add(new SingleImage() { ImageToLoad = bmp });
StorageFolder StorageParent = await file.GetParentAsync();
}
}
}
SingleImage class:
public class SingleImage
{
public BitmapImage ImageToLoad { get; set; }
}
you can use the FutureAccesList (https://learn.microsoft.com/en-us/uwp/api/Windows.Storage.AccessCache.StorageApplicationPermissions#Windows_Storage_AccessCache_StorageApplicationPermissions_FutureAccessList) to keep access to the selected folder / file after your app restarts
I am working with XamlCropControl library here. I can't binding image from StorageFile to crop-control.
As for XamlCropControl, they do like that:
<xamlcrop:CropControl x:Name="Crop" ImageSource="ms-appx:///Assets/wrench.jpg" DesiredAspectRatio="1.0" />
But in my case, I need to bind an image that was picked from gallery then pass it to crop-control. I do like bellow, however it did not work at all.
public async void ImageReceiver(StorageFile image)
{
BitmapImage bitmapImage = new BitmapImage();
FileRandomAccessStream stream = (FileRandomAccessStream)await image.OpenAsync(FileAccessMode.Read);
bitmapImage.SetSource(stream);
ImgParam = bitmapImage;
}
private BitmapImage imgParam;
public WriteableBitmap ImgParam
{
get { return imgParam; }
set
{
imgParam = value;
RaisePropertyChanged("ImgParam");
}
}
And in xaml file:
<xamlcrop:CropControl x:Name="CropControl"
ImageSource="{Binding ImgParam, Mode=TwoWay}"
DesiredAspectRatio="1.0"
Background="Black"
Width="100"
Height="100"/>
The following code can add images from a database to a listview, however I would like to bind the image property to the pictures in XAML using Image Source rather than use listview1.Items.Add. Can this code be easily modified to do this or do I have to go about this another way. Hopefully this isn't a stupid question to ask and I would appreciate any help.
public async void showImage()
{
var query = GetAll();
foreach (var stuff in query)
{
string FileName;
FileName = stuff.RecipeImage;
var file = await
Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName);
var stream = await file.OpenReadAsync();
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(stream);
Image ctrlImage = new Image();
ctrlImage.Source = bitmapImage;
ctrlImage.Height = 50;
ctrlImage.Width = 50;
ctrlImage.Stretch = Stretch.UniformToFill;
listView1.Items.Add(ctrlImage);
}
}
I need to add the image to the item source that is already used for my database which contains:
public class AddRecipe
{
[PrimaryKey,AutoIncrement]
public int ID { get; set; }
public string RecipeName { get; set; }
public string RecipeImage { get; set; }
}
<ListView x:Name="listView" HorizontalAlignment="Left" Height="493" Margin="725,60,0,0" VerticalAlignment="Top" Width="528" IsItemClickEnabled="True" SelectionMode="None" ItemClick="listView_SelectionChanged" FontSize="26.667">
<ListView.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Vertical" Margin="4">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding RecipeName}" Foreground="Black"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding MealType}" Foreground="Black"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
We can use ListView.ItemTemplate to set the DataTemplate used to display each item and put all the images into a ObservableCollection<BitmapImage> as ListView's ItemsSource. Then in DataTemplate, we can use Bind to set the Image.Source. Following is a simple sample:
In XAML, set DataTemplate with {x:Bind} to show image.
<ListView ItemsSource="{x:Bind ImgList}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="BitmapImage">
<Image Width="50"
Height="50"
Source="{x:Bind }"
Stretch="UniformToFill" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ImgList is defined in code-behind, it's defined as ObservableCollection<BitmapImage>, so the DataType of DataTemplate is BitmapImage and as I just bind the whole BitmapImage object to Image.Source so here just use Source="{x:Bind }".
The code-behind may like following:
public sealed partial class MainPage : Page
{
public ObservableCollection<BitmapImage> ImgList = new ObservableCollection<BitmapImage>();
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
showImage();
}
public async void showImage()
{
var query = GetAll();
foreach (var stuff in query)
{
string FileName = stuff.RecipeImage;
var file = await Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName);
var stream = await file.OpenReadAsync();
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(stream);
ImgList.Add(bitmapImage);
}
}
}
Besides, I noticed that you are getting images form Pictures Library. If these images are stored by your app earlier, then storing them in app data would be better as this makes the binding easier and in Pictures Library, these images could be easily deleted by users.
To store images in app data, we can using ApplicationData.Current.LocalFolder to retrieve app's local data folder. For example, copy selected image into local data folder:
//This method copies selected image into local data folder and returns new file's name.
public async Task<string> CopySelectedImage()
{
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Clear();
openPicker.FileTypeFilter.Add(".bmp");
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".png");
var file = await openPicker.PickSingleFileAsync();
if (file != null)
{
var localFolder = ApplicationData.Current.LocalFolder;
var newCopy = await file.CopyAsync(localFolder, file.Name, NameCollisionOption.GenerateUniqueName);
return newCopy.Name;
}
else
{
return null;
}
}
Then we can using code like following to retrieve the image and create the BitmapImage:
var path = await CopySelectedImage();
var bitmapImage = new BitmapImage(new Uri($"ms-appdata:///local/{path}"));
Update:
I suppose you have had RecipeImage in your item source, then you can add a Image control into your DataTemplate and bind RecipeImage to it's Source with a ImageConverter like following:
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="4" Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" Text="{Binding RecipeName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" Text="{Binding MealType}" />
</StackPanel>
<Image Width="50"
Height="50"
Source="{Binding RecipeImage,
Converter={StaticResource ImageConverter}}"
Stretch="UniformToFill" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
ImageConverter is used to convert string to BitmapImage as your RecipeImage is defined as string but Image.Source need a BitmapImage. Before using it in Binding, we need set it as a StaticResource firstly:
<Page.Resources>
<local:ImageConverter x:Key="ImageConverter" />
</Page.Resources>
The code of ImageConverter may like:
public class ImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
string FileName = value as string;
var file = Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName).AsTask().Result;
var stream = file.OpenReadAsync().AsTask().Result;
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(stream);
return bitmapImage;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
Simple
xaml
<ListView Name="listView1">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding}" Height="50" Width="50" Stretch="UniformToFill" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
и в коде добавляем List<BitmapImage>
List<BitmapImage> data_list = new List<BitmapImage>();
foreach (var stuff in query)
{
string FileName;
FileName = stuff.RecipeImage;
var file = await
Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName);
BitmapImage bitmapImage;
using (var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
bitmapImage = new BitmapImage();
bitmapImage.SetSource(stream);
}
data_list.Add(bitmapImage);
}
listView1.ItemsSource = data_list;
then we just fill in the data into our ListView
I'm using Visual Studio 2013 WPF and the MVVM Pattern.
I have a Modular Solution, in 1 Project Solution I have many Projects.
Common.Library (Class Library)
This is basically my Library that will contain all the basic stuff e.g the class ViewModelBase.cs Implements the INotifyPropertyChanged. I also have Images folder that contains Images (jpg, png etc.) and another class called BinaryImageConverter.cs to Convert binary images to BitmapImages
Customer (WPF Project)
In here I have a user Control that has a Image control in it. I got my Model/View/ViewModels
CustomerModel : ViewModelBase
private BitmapImage _ProfilePicture;
private BitmapImage ProfilePicture
{
get { return this._ProfilePicture; }
set
{
if (this._ProfilePicture == value)
return;
this._ProfilePicture = value;
OnPropertyChanged("ProfilePicture");
}
}
BinaryImageConverter.cs
public BitmapImage BinaryPictureConverter(byte[] Picture)
{
BitmapImage Image;
if (Picture == null)
return null;
Image = new BitmapImage();
using (MemoryStream imageStream = new MemoryStream())
{
imageStream.Write(Picture, 0, Picture.Length);
imageStream.Seek(0, SeekOrigin.Begin);
Image.BeginInit();
Image.CacheOption = BitmapCacheOption.OnLoad;
Image.StreamSource = imageStream;
Image.EndInit();
Image.Freeze();
}
return Image;
}
CustomerView.xaml
<UserControl.Resources>
<ResourceDictionary>
<BitmapImage x:Key="DefaultCustomerPicture" UriSource="/Common.Library;component/Images/DefaultCustomerPicture.jpg" />
</ResourceDictionary>
</UserControl.Resources>
<Image Name="ImgProfile" Width="150" HorizontalAlignment="Left" DockPanel.Dock="Left" Source="{Binding Path=CustomerProfile.ProfilePicture, TargetNullValue={StaticResource DefaultCustomerPicture}}" Stretch="Fill" />
I have a varbinary field to store my Images in the DB.
So I load my Data in my CustomerViewModel. Everything shows excepts my Image on my UserControl.
I have the FirstName and LastName displayed which is perfect but the Image doesn't appear.
EDIT :
Forgot to mention that my User Control is loaded in a ListBox and the ItemSource is binded to my CustomerProfile which is a ObservableCollection of the CustomerModel
<ListBox Name="listCustomers" Background="Transparent" BorderThickness="0" Margin="5,10,0,0" ItemsSource="{Binding Path=CustomerProfile}">
<ListBox.ItemTemplate>
<DataTemplate>
<vw:CustomerView />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
WPF data binding works with public properties only:
public BitmapImage ProfilePicture
{
get { ... }
set { ... }
}
I am trying to write a Windows 8 app in C# in which I want to display a list of images that the user selects through FileOpenPicker. I wish to display these images in a GridView using XAML Data-binding. I have tried a few things but the data-binding doesn't seem to work. I am not sure at what location exactly do I need to set the itemssource of the GridView. If I do it in the MainPage constructor then the GridView doesn't get refreshed as the data-bound list gets populated later as the user selects the images.
How do I fix this?
UPDATE 1
If you want to bind GridView, then you need to add few things. See I have updated my answer with some comment lines. You need to add those lines to supply ItemsSource via XAML
Here you go.
C#
private async void btnBrowsePhotos_Click(object sender, RoutedEventArgs e)
{
//var objImageItem = new ImageItem();
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".png");
var files = await openPicker.PickMultipleFilesAsync();
List<ImageItem> ImageList = new List<ImageItem>();
foreach (var file in files)
{
using (var stream = await file.OpenAsync(FileAccessMode.Read))
{
//objImageItem.ImageList.Add(new ImageItem(stream, file.Name));
ImageList.Add(new ImageItem(stream, file.Name));
}
}
gv.ItemsSource = ImageList;
//gv.DataContext = objImageItem;
}
public class ImageItem //: INotifyPropertyChanged
{
/*private ObservableCollection<ImageItem> _ImageList = new ObservableCollection<ImageItem>();
public ObservableCollection<ImageItem> ImageList
{
get { return _ImageList; }
set { _ImageList = value; OnPropertyChanged("ImageList"); }
}*/
public BitmapImage Source { get; set; }
public string Name { get; set; }
public ImageItem()
{
}
public ImageItem(IRandomAccessStream stream, string name)
{
BitmapImage bmp = new BitmapImage();
bmp.SetSource(stream);
Source = bmp;
Name = name;
}
}
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<Button Click="btnBrowsePhotos_Click" Style="{StaticResource BrowsePhotosAppBarButtonStyle}" />
<!-- Add ItemsSource="{Binding ImageList}" to GridView -->
<GridView x:Name="gv">
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Stretch="Fill" Source="{Binding Source}" Height="192" Width="342" />
<Border Opacity=".8" Background="Black" VerticalAlignment="Bottom" >
<TextBlock Text="{Binding Name}" FontSize="18"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</StackPanel>
</Grid>