In WinRT app I have one FlipView myFlipView with some pictures and one Image myImage. On myFlipView's event SelectionChanged there is the following method:
async private void myFlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (myFlipView == null) return;
Uri newUri = new Uri("ms-appx://" + (((BitmapImage)(((Image)(((ContentControl)(myFlipView.SelectedItem)).Content)).Source)).UriSource.AbsolutePath));
StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(newUri);
WriteableBitmap wb = new WriteableBitmap(1, 1);
if (file != null)
{
using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
await wb.SetSourceAsync(fileStream);
}
}
wb = ModifyPicture(wb);
myImage.Source = wb;
}
To sum up it finds uri of current image in myFlipView and set that image in myImage but with some modifications defined in ModifyPicture. It works perfectly on tablets but on computers with mouses there is one error. When I click arrows attached to FlipView very fast then myImage shows wrong picture. For example if in myFlipView I have 10 pictures (p1, p2, ..., p10) and currently p1 is chosen, when I change to p2 on myImage also p2 appears. But when I click very fast sometimes in FlipView I have for example p9 and in myImage p8. I suppose it is connected with fact that method is called many times but I don't know how to fix it. Thank you in advance for help :)
You should probably save the Task/IAsyncOperation that's already running and cancel it if the event handler is called again before it completes.
See this article on how to cancel running tasks.
Pseudo-code (as I don't know C#):
Task loadAndSetImage(uri) {
return new Task...
}
flipView_SelectionChanged {
if (myFlipView == null) return;
if (this.runningTask && !this.runningTask.IsCanceled) {
this.runningTask.Cancel();
}
Uri newUri = new Uri("ms-appx://" + (((BitmapImage)(((Image)(((ContentControl)(myFlipView.SelectedItem)).Content)).Source)).UriSource.AbsolutePath));
this.runningTask = loadAndSetImage(newUri);
this.runningTask.ContinueWith( (t) => this.runningTask = null; );
}
In addition to or instead of cancelling internal tasks as ma_il mentions - you could break/cancel your async method execution if you detect that it should be canceled. E.g.
private int myFlipView_SelectionChangedCallId;
async private void myFlipView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (myFlipView == null) return;
var callId = ++myFlipView_SelectionChangedCallId;
Uri newUri = new Uri("ms-appx://" + (((BitmapImage)(((Image)(((ContentControl)(myFlipView.SelectedItem)).Content)).Source)).UriSource.AbsolutePath));
StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(newUri);
if (callId != myFlipView_SelectionChangedCallId) return;
WriteableBitmap wb = new WriteableBitmap(1, 1);
if (file != null)
{
using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
{
await wb.SetSourceAsync(fileStream);
if (callId != myFlipView_SelectionChangedCallId) return;
}
}
wb = ModifyPicture(wb);
myImage.Source = wb;
}
Also if your ModifyPicture method does any heavy pixel processing - you would want to run it on a background thread and await it.
Related
I'm working on a simple music player app for UWP and I have a couple of questions.
First of all here's my code
private async void Page_Loaded(object sender, RoutedEventArgs e)
{
StorageFolder folder = KnownFolders.MusicLibrary;
await RetrieveFilesInFolders(folder);
}
private async Task RetrieveFilesInFolders(StorageFolder parent)
{
foreach (var file in await parent.GetFilesAsync())
{
if (file.FileType == ".mp3")
{
var songProperties = await file.Properties.GetMusicPropertiesAsync();
var currentThumb = await file.GetThumbnailAsync(ThumbnailMode.MusicView, 200, ThumbnailOptions.UseCurrentScale);
var albumCover = new BitmapImage();
albumCover.SetSource(currentThumb);
var song = new Song();
song.Title = songProperties.Title;
song.Artist = songProperties.Artist;
song.Album = songProperties.Album;
song.AlbumCover = albumCover;
song.SongFile = file;
song.FileName = file.Name;
SongUC songUc = new SongUC(song);
sp1.Children.Add(songUc);
}
}
foreach (var folder in await parent.GetFoldersAsync())
{
await RetrieveFilesInFolders(folder);
}
}
User control ctor
public SongUC(Song song)
{
this.InitializeComponent();
txtTitle.Text = song.Title;
txtAlbum.Text = song.Album;
txtArtist.Text = song.Artist;
txtName.Text = song.FileName;
imgAlbumArt.Source = song.AlbumCover;
}
How can I refresh the returned files automatically whenever a new song is added or moved or renamed
Is firing the RetrieveFilesInFolders method in the PageLoaded event handler the best way to get all songs. Or will it slow down the app if there's a huge collection of music in the music folder
How can I use animations whenever the files are retrieved to make things look nicer
As stated here, take a look at file queries and their ContentsChanged event.
Use a FileSystemWatcher:
https://msdn.microsoft.com/en-us/library/system.io.filesystemwatcher(v=vs.110).aspx
It allows you to catch events when files are being moved, deleted and renamed.
I am trying to load a picture from my PC as a raw image in order to use it with the Microsoft cognitive services emotion (UWP).
below is a piece of my code:
//Chose Image from PC
private async void chosefile_Click(object sender, RoutedEventArgs e)
{
//Open Dialog
FileOpenPicker open = new FileOpenPicker();
open.ViewMode = PickerViewMode.Thumbnail;
open.SuggestedStartLocation = PickerLocationId.Desktop;
open.FileTypeFilter.Add(".jpg");
open.FileTypeFilter.Add(".jpeg");
open.FileTypeFilter.Add(".gif");
open.FileTypeFilter.Add(".png");
file = await open.PickSingleFileAsync();
if (file != null)
{//imagestream is declared as IRandomAccessStream.
imagestream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
var image = new BitmapImage();
image.SetSource(imagestream);
imageView.Source = image;
}
else
{
//
}
}
The part above works fine, it selects a photo from the pc (dialog box) and displays it in Image box.
private async void analyse_Click(object sender, RoutedEventArgs e)
{
try
{
emotionResult = await emotionServiceClient.RecognizeAsync(imagestream.AsStream());
}
catch
{
output.Text = "something is wrong in stream";
}
try {
if(emotionResult!= null)
{
Scores score = emotionResult[0].Scores;
output.Text = "Your emotions are: \n" +
"Happiness: " + score.Happiness + "\n" +
"Sadness: " + score.Sadness;
}
}
catch
{
output.Text = "Something went wrong";
}
}
I think the error is due to imagestream.AsStream()
imagestream is declared as IRandomAccessStream.
Can someone please tell me how to fix that part and if the error is in fact due to not loading the image correctly?
EDIT:
Also is there a better way to do this, instead of using stream to pass the emotionServiceClient a saved file instead of a stream?
Your problem is that you've advanced the stream position by virtue of creating the BitmapImage, so your read position is at the end by the time you call emotionServiceClient.RecognizeAsync. So you'll need to 'rewind':
var stream = imagestream.AsStreamForRead();
stream.Position = 0;
emotionResult = await emotionServiceClient.RecognizeAsync(stream);
Why not use their example, instead of trying to hold the file in memory, why don't you hold a path, and then use the path to read the stream at the time.
https://www.microsoft.com/cognitive-services/en-us/Emotion-api/documentation/GetStarted
In there example;
using (Stream imageFileStream = File.OpenRead(imageFilePath))
{
//
// Detect the emotions in the URL
//
emotionResult = await emotionServiceClient.RecognizeAsync(imageFileStream);
return emotionResult;
}
So you would be capturing imageFilePath as the result of the open file dialog.
I'm trying to implement some logical to share the image of my webView and some extras informations. If I do that without capture screen, it works perfectly:
private async void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs e)
{
if (await GetShareContent(e.Request))
{
if (String.IsNullOrEmpty(e.Request.Data.Properties.Title))
{
e.Request.FailWithDisplayText("Nenhum título adicionado");
}
}
}
private async Task<bool> GetShareContent(DataRequest request, StorageFile file)
{
bool succeeded = false;
string text = "Dados do Arquivo:" + Environment.NewLine + webViewModel.Name;
string dataPackageText = text;
if (!String.IsNullOrEmpty(dataPackageText))
{
DataPackage requestData = request.Data;
requestData.Properties.Title = "Target";
requestData.Properties.Description = webViewModel.Name;
requestData.SetText(dataPackageText);
succeeded = true;
}
else
{
request.FailWithDisplayText("Não há nada para compartilhar");
}
return succeeded;
}
But, if I try the same thing justing adding the captured image, it doesn't work, doesn't show any Excepetion, just the message: "Não há nada para compartilhar agora" (There's nothing to share right now)
I don't know what is going on. The code that doesn't work:
private async void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs e)
{
StorageFile file = await captureScreen();
if (await GetShareContent(e.Request, file))
{
if (String.IsNullOrEmpty(e.Request.Data.Properties.Title))
{
e.Request.FailWithDisplayText("Nenhum título adicionado");
}
}
}
private async Task<StorageFile> captureScreen()
{
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(webView, (int)webView.Width, (int)webView.Height);
Image myImage = new Image();
myImage.Source = renderTargetBitmap;
var file = await App.rootDir.CreateFileAsync("screenCapture.jpg", CreationCollisionOption.ReplaceExisting);
var pixels = await renderTargetBitmap.GetPixelsAsync();
using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream);
byte[] bytes = pixels.ToArray();
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(uint)webView.Width, (uint)webView.Height,
96, 96, bytes);
await encoder.FlushAsync();
}
return file;
}
I though it could be happening because the image was not read when the share is called, but I'm using await as it should be. And my jpeg is created perfectly.
The OnDataRequested callback needs to take a deferral, using DataRequest.GetDeferral, when calling asynchronous APIs.
private async void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs e)
{
DataRequestDeferral deferral = e.Request.GetDeferral();
// Code to do screen capture...
deferral.Complete();
}
But, per MSDN, "[the share operation] function must return a DataPackage object within 200ms to prevent the operation from timing out". It is definitely possible for the screen capture to take longer than 200 ms. Use the DataPackage.SetDataProvider for operations that may take longer such as screen capture.
private void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs e)
{
DataPackage requestData = e.request.Data;
requestData.Properties.Title = "Target";
requestData.Properties.Description = webViewModel.Name;
// Set up the data provider for a long running share operation...
requestData.SetDataProvider(StandardDataFormats.Bitmap, OnDeferredRequestedHandler);
}
private async void OnDeferredRequestedHandler(DataProviderRequest providerRequest)
{
// Again, get a deferral as an asynchronous method is called
DataProviderDeferral deferral = providerRequest.GetDeferral();
// Code to do screen capture...
deferral.Complete();
}
The Share content source sample on MSDN shows how this can be performed in full detail.
well i try a lot of things but i don't really understand everything of save in localstorage. I know how its work since the camera, but i don't know how to make it with inkManager. If you're any ideas ?
This is my code to save where the user wants, but i would like to "auto-save" in localstorage :
private async void save_Button(object sender, RoutedEventArgs e)
{
if (_inkManager.GetStrokes().Count > 0)
{
try
{
Windows.Storage.Pickers.FileSavePicker save = new Windows.Storage.Pickers.FileSavePicker();
save.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.Desktop;
save.DefaultFileExtension = ".jpg";
save.FileTypeChoices.Add("JPG", new string[] { ".jpg" });
StorageFile filesave = await save.PickSaveFileAsync();
IOutputStream ab = await filesave.OpenAsync(FileAccessMode.ReadWrite);
if (ab != null)
await _inkManager.SaveAsync(ab);
// await save.CopyAsync(ApplicationData.Current.LocalFolder, "merge1.jpg");
if (save != null)
{
Clipboard.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appdata:///local/merge1.jpg"));
}
}
catch (Exception)
{
}
}
}
The solution is pretty easy finally :
StorageFile myMerge = await ApplicationData.Current.LocalFolder.CreateFileAsync("myimg.png");
IOutputStream ac = await myMerge.OpenAsync(FileAccessMode.ReadWrite);
if (ac != null)
await _inkManager.SaveAsync(ac);
What's the best way to asynchronously load an BitmapImage in C# using WPF?
I was just looking into this and had to throw in my two cents, though a few years after the original post (just in case any one else comes looking for this same thing I was looking into).
I have an Image control that needs to have it's image loaded in the background using a Stream, and then displayed.
The problem that I kept running into is that the BitmapSource, it's Stream source and the Image control all had to be on the same thread.
In this case, using a Binding and setting it's IsAsynch = true will throw a cross thread exception.
A BackgroundWorker is great for WinForms, and you can use this in WPF, but I prefer to avoid using the WinForm assemblies in WPF (bloating of a project is not recommended, and it's a good rule of thumb too). This should throw an invalid cross reference exception in this case too, but I didn't test it.
Turns out that one line of code will make any of these work:
//Create the image control
Image img = new Image {HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch, VerticalAlignment = System.Windows.VerticalAlignment.Stretch};
//Create a seperate thread to load the image
ThreadStart thread = delegate
{
//Load the image in a seperate thread
BitmapImage bmpImage = new BitmapImage();
MemoryStream ms = new MemoryStream();
//A custom class that reads the bytes of off the HD and shoves them into the MemoryStream. You could just replace the MemoryStream with something like this: FileStream fs = File.Open(#"C:\ImageFileName.jpg", FileMode.Open);
MediaCoder.MediaDecoder.DecodeMediaWithStream(ImageItem, true, ms);
bmpImage.BeginInit();
bmpImage.StreamSource = ms;
bmpImage.EndInit();
//**THIS LINE locks the BitmapImage so that it can be transported across threads!!
bmpImage.Freeze();
//Call the UI thread using the Dispatcher to update the Image control
Dispatcher.BeginInvoke(new ThreadStart(delegate
{
img.Source = bmpImage;
img.Unloaded += delegate
{
ms.Close();
ms.Dispose();
};
grdImageContainer.Children.Add(img);
}));
};
//Start previously mentioned thread...
new Thread(thread).Start();
Assuming you're using data binding, setting Binding.IsAsync property to True seems to be a standard way to achieve this.
If you're loading the bitmap in the code-behind file using background thread + Dispatcher object is a common way to update UI asynchronous
This will allow you to create the BitmapImage on the UI thread by using the HttpClient to do the async downloading:
private async Task<BitmapImage> LoadImage(string url)
{
HttpClient client = new HttpClient();
try
{
BitmapImage img = new BitmapImage();
img.CacheOption = BitmapCacheOption.OnLoad;
img.BeginInit();
img.StreamSource = await client.GetStreamAsync(url);
img.EndInit();
return img;
}
catch (HttpRequestException)
{
// the download failed, log error
return null;
}
}
To elaborate onto aku's answer, here is a small example as to where to set the IsAsync:
ItemsSource="{Binding IsAsync=True,Source={StaticResource ACollection},Path=AnObjectInCollection}"
That's what you would do in XAML.
BitmapCacheOption.OnLoad
var bmp = await System.Threading.Tasks.Task.Run(() =>
{
BitmapImage img = new BitmapImage();
img.BeginInit();
img.CacheOption = BitmapCacheOption.OnLoad;
img.UriSource = new Uri(path);
img.EndInit();
ImageBrush brush = new ImageBrush(img);
}
Use or extend System.ComponentModel.BackgroundWorker:
http://msdn.microsoft.com/en-us/library/system.componentmodel.backgroundworker.aspx
Personally, I find this to be the easiest way to perform asynchronous operations in client apps. (I've used this in WinForms, but not WPF. I'm assuming this will work in WPF as well.)
I usually extend Backgroundworker, but you dont' have to.
public class ResizeFolderBackgroundWorker : BackgroundWorker
{
public ResizeFolderBackgroundWorker(string sourceFolder, int resizeTo)
{
this.sourceFolder = sourceFolder;
this.destinationFolder = destinationFolder;
this.resizeTo = resizeTo;
this.WorkerReportsProgress = true;
this.DoWork += new DoWorkEventHandler(ResizeFolderBackgroundWorker_DoWork);
}
void ResizeFolderBackgroundWorker_DoWork(object sender, DoWorkEventArgs e)
{
DirectoryInfo dirInfo = new DirectoryInfo(sourceFolder);
FileInfo[] files = dirInfo.GetFiles("*.jpg");
foreach (FileInfo fileInfo in files)
{
/* iterate over each file and resizing it */
}
}
}
This is how you would use it in your form:
//handle a button click to start lengthy operation
private void resizeImageButtonClick(object sender, EventArgs e)
{
string sourceFolder = getSourceFolderSomehow();
resizer = new ResizeFolderBackgroundWorker(sourceFolder,290);
resizer.ProgressChanged += new progressChangedEventHandler(genericProgressChanged);
resizer.RunWorkerCompleted += new RunWorkerCompletedEventHandler(genericRunWorkerCompleted);
progressBar1.Value = 0;
progressBar1.Visible = true;
resizer.RunWorkerAsync();
}
void genericRunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
progressBar1.Visible = false;
//signal to user that operation has completed
}
void genericProgressChanged(object sender, ProgressChangedEventArgs e)
{
progressBar1.Value = e.ProgressPercentage;
//I just update a progress bar
}