Listbox default image - silverlight

In an windows phone 7 application I'm populating one listbox with remote images .. since the images are not downloaded instantly I want to load a default image until the remote image are ready. What is the best way to do this?
Until now, I have the following code skelton:
public partial class RemoteImage : PhoneApplicationPage
{
ObservableCollection<Image> images = new ObservableCollection<Image> { };
public RemoteImage()
{
InitializeComponent();
listImage.ItemsSource = GetAllImages();
}
private ImageSource GetImageSource(string fileName)
{
return new BitmapImage(new Uri(fileName, UriKind.Absolute));
}
private ObservableCollection<Image> GetAllImages()
{
WebClient restClient = new WebClient();
restClient.OpenReadAsync(new Uri(#"http://www.my-api.com"));
restClient.OpenReadCompleted += new OpenReadCompletedEventHandler(onReadComplete);
return images;
}
private void onReadComplete(object sender, OpenReadCompletedEventArgs args)
{
Stream stm = args.Result;
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(RootObject));
RootObject ro = (RootObject)ser.ReadObject(stm);
foreach (var item in ro.items)
{
images.Add(new Image{ PhotoSource = GetImageSource(item.image.link) });
}
}
}

If you know, how many images you would need, you should create first the number of default images. Load some image file directly at your project and use it as imageSource for default images. Then, when you'll finish downloading remote images, you should set the new image source for each.
When I got the similar issue, I had some problems with defining which exactly downloaded image refers to which object on page. (As you remember the WebClient objects work asynchronously, so if you have 10 images on page and download 10 remote images at once you can't say that the first downloaded image is the first on page) To solve this you could create more complicated download method (I used a delegate to transfer the id/name of image) or use recursion (Start download method for first image, download it, set source for one on page, download next one...).

Related

Why I cannot Navigate the html file by using WebView inside of the App in Wpf?

I make a Wpf projcect which demos how to use WebView to Navigate a html file inside of the App, but fails.
The main cs file code is below:
public MainWindow()
{
this.InitializeComponent();
this.wv.ScriptNotify += Wv_ScriptNotify;
this.Loaded += MainPage_Loaded;
}
private async void Wv_ScriptNotify(object sender, Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.WebViewControlScriptNotifyEventArgs e)
{
//await (new MessageDialog(e.Value)).ShowAsync();
textBlock.Text = e.Value;
//返回结果给html页面
await this.wv.InvokeScriptAsync("recieve", new[] { "hehe, 我是个结果" });
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//我们事先写好了一个本地html页面用来做测试
this.wv.Source = new Uri("ms-appx-web://Assets/index.html");
//this.wv.Source = new Uri("http://www.baidu.com");
}
And the html file index.html is inside of the project, located at Assets/index.html. Its source code is here:
https://github.com/tomxue/WebViewIssueInWpf/raw/master/WpfApp3/Assets/index.html
I put the project code onto GitHub: https://github.com/tomxue/WebViewIssueInWpf.git
If the project works well, when WebView visits the inner html file, it should show a button at first.
But I saw nothing.
More:
According to the accepted answer(Thank to Pavel Anikhouski), I changed my code as below and it now works.
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//我们事先写好了一个本地html页面用来做测试
//this.wv.Source = new Uri("ms-appx-web://Assets/index.html");
//this.wv.Source = new Uri("http://www.baidu.com");
var html = File.ReadAllText("../../Assets\\index.html");
wv.NavigateToString(html);
}
It seems to be a known issue with WebView control in WindowsCommunityToolkit
You can use only absolute URIs to resources in members of the WebView control that accept string paths.
WebView controls don't recognize the ms-appx:/// prefix, so they can't read from the package (if you've created a package for your
application).
WebView controls don't recognize the File:// prefix. If you want to read a file into a WebView control, add code to your application that
reads the content of the file. Then, serialize that content into a
string, and call the NavigateToString(String) method of the WebView
control.
So, instead of loading a file this.wv.Source = new Uri("ms-appx-web://Assets/index.html"); try to read a local file and then navigate to the string
var html = File.ReadAllText("Assets\\index.html");
this.wv.NavigateToString(html);
It should work fine (I've seen the button and message at my end). Also, don't forget to copy Assets\index.html to the output directory (set Copy Always or Copy if newer)

Images not downloading on second load in WPF

I have a WPF application which has a UserControl called MyBook that, on Loaded will fire a background thread to get a list of Domain Objects each with a URL to an Azure Image hosted in blob storage.
For each domain object I get back, I add a new instance of a custom control called LazyImageControl which will download the image from Azure in the background and render the image when its done.
This works just fine, but when I add a second MyBook control to the scene the images dont load for some reason, I cannot figure out why this is.
Here is the code for the LazyImageControl
public LazyImageControl()
{
InitializeComponent();
DataContextChanged += ContextHasChanged;
}
private void ContextHasChanged(object sender, DependencyPropertyChangedEventArgs e)
{
// Start a thread to download the bitmap...
_uiThreadDispatcher = Dispatcher.CurrentDispatcher;
new Thread(WorkerThread).Start(DataContext);
}
private void WorkerThread(object arg)
{
var imageUrlString = arg as string;
string url = imageUrlString;
var uriSource = new Uri(url);
BitmapImage bi;
if (uriSource.IsFile)
{
bi = new BitmapImage(uriSource);
bi.Freeze();
_uiThreadDispatcher.Invoke(DispatcherPriority.Send, new DispatcherOperationCallback(SetBitmap), bi);
}
else
{
bi = new BitmapImage();
// Start downloading the bitmap...
bi.BeginInit();
bi.UriSource = uriSource;
bi.UriCachePolicy = new RequestCachePolicy(RequestCacheLevel.Default);
bi.DownloadCompleted += DownloadCompleted;
bi.DownloadFailed += DownloadFailed;
bi.EndInit();
}
// Spin waiting for the bitmap to finish loading...
Dispatcher.Run();
}
private void DownloadFailed(object sender, ExceptionEventArgs e)
{
throw new NotImplementedException();
}
private void DownloadCompleted(object sender, EventArgs e)
{
// The bitmap has been downloaded. Freeze the BitmapImage
// instance so we can hand it back to the UI thread.
var bi = (BitmapImage)sender;
bi.Freeze();
// Hand the bitmap back to the UI thread.
_uiThreadDispatcher.Invoke(DispatcherPriority.Send, new DispatcherOperationCallback(SetBitmap), bi);
// Exit the loop we are spinning in...
Dispatcher.CurrentDispatcher.InvokeShutdown();
}
private object SetBitmap(object arg)
{
LazyImage.Source = (BitmapImage)arg;
return null;
}
So the issue is, doing this after the first time the WorkerThread runs fine, but I never get a callback to the DownloadCompleted or DownloadFailed methods and I have no idea why...
Any ideas?
Not sure but maybe you should try attaching the DownloadCompleted and DownloadFailed event handlers before setting the BitmapImage.UriSource which should trigger the loading of the image, so it might be that it is loaded before your event handlers have been attached (Not the first time around because there the loading takes a while but then the image is cached and will be loaded immediately)
Also: From which class does LazyImageControl inherit so i could test it if that is not it?

How can a silverlight app download and play an mp3 file from a URL?

I have a small Silverlight app which downloads all of the images and text it needs from a URL, like this:
if (dataItem.Kind == DataItemKind.BitmapImage)
{
WebClient webClientBitmapImageLoader = new WebClient();
webClientBitmapImageLoader.OpenReadCompleted += new OpenReadCompletedEventHandler(webClientBitmapImageLoader_OpenReadCompleted);
webClientBitmapImageLoader.OpenReadAsync(new Uri(dataItem.SourceUri, UriKind.Absolute), dataItem);
}
else if (dataItem.Kind == DataItemKind.TextFile)
{
WebClient webClientTextFileLoader = new WebClient();
webClientTextFileLoader.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClientTextFileLoader_DownloadStringCompleted);
webClientTextFileLoader.DownloadStringAsync(new Uri(dataItem.SourceUri, UriKind.Absolute), dataItem);
}
and:
void webClientBitmapImageLoader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.SetSource(e.Result);
DataItem dataItem = e.UserState as DataItem;
CompleteItemLoadedProcess(dataItem, bitmapImage);
}
void webClientTextFileLoader_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
DataItem dataItem = e.UserState as DataItem;
string textFileContent = e.Result.ForceWindowLineBreaks();
CompleteItemLoadedProcess(dataItem, textFileContent);
}
Each of the images and text files are then put in a dictionary so that the application has access to them at any time. This works well.
Now I want to do the same with mp3 files, but all information I find on the web about playing mp3 files in Silverlight shows how to embed them in the .xap file, which I don't want to do since I wouldn't be able to download them dynamically as I do above.
How can I download and play mp3 files in Silverlight like I download and show images and text?
You would download the MP3 as binary stream and store the result in a byte array. Its this byte array you would store in your dictionary.
At the point that you want to assign the byte array to a MediaElement you would use code like this:-
void SetMediaElementSource(MediaElement me, byte[] mp3)
{
me.SetSource(new MemoryStream(mp3));
}

Properly cancel an image download in Silverlight

I have a set of Image elements that I use to download pictures. All the pictures have to be downloaded, but I wish to download the picture the user is looking at in the first place. If the user changes the viewed picture, I wish to cancel the downloads in progress to get the viewed picture as fast as possible.
To start a download I write: myImage.Source = new BitmapImage(theUri);.
How should I cancel it?
myImage.Source = null; ?
act on the BitmapImage ?
a better solution ?
I don't wish to download the picture by code to keep the benefit of the browser cache.
This is definitely doable -- I just tested it to make sure. Here is a quick class you can try:
public partial class Page : UserControl
{
private WebClient m_oWC;
public Page()
{
InitializeComponent();
m_oWC = new WebClient();
m_oWC.OpenReadCompleted += new OpenReadCompletedEventHandler(m_oWC_OpenReadCompleted);
}
void StartDownload(string sImageURL)
{
if (m_oWC.IsBusy)
{
m_oWC.CancelAsync();
}
m_oWC.OpenReadAsync(new Uri(sImageURL));
}
void m_oWC_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
BitmapImage oBMI = new BitmapImage();
oBMI.SetSource(e.Result);
imgMain.Source = oBMI;
}
}
This works just like you wanted (I tested it). Everytime you call StartDownload with the URL of an image (presumably whenever a user clicks to the next image) if there is a current download in progress it is canceled. The broswer cache is also definitely being used (I verified with fiddler), so cached images are loaded ~ instantly.

How do I cache images on the client for a WPF application?

We are developing a WPF desktop application that is displaying images that are currently being fetched over HTTP.
The images are already optimised for quality/size but there is an obvious wait each time that the image is fetched.
Is there a way to cache images on the client so that they aren't downloaded each time?
I know this question is very old, but I had to use caching recently in a WPF application and found that there is a much better option in .Net 3.5 with BitmapImage by setting UriCachePolicy, that will use system-level caching:
<Image.Source>
<BitmapImage UriCachePolicy="Revalidate"
UriSource="https://farm3.staticflickr.com/2345/2077570455_03891081db.jpg"/>
</Image.Source>
You can even set the value in the app.config to make all your app use a default value for caching:
<system.net>
<requestCaching defaultPolicyLevel="CacheIfAvailable"/>
</system.net>
You will find an explanation of the RequestCacheLevel values here: http://msdn.microsoft.com/en-us/library/system.net.cache.requestcachelevel(v=vs.110).aspx
This functionality understands HTTP/1.1 headers, so if you set Revalidate it uses If-Modified-Since header to avoid downloading it each time, but still checking if the image has been changed so you always have the correct one.
For people coming here via Google, I have packaged the original implementation that Simon Hartcher posted, refactored by Jeroen van Langen (along with the tweaks from Ivan Leonenko to make it bindable), into an Open Source NuGet package.
Please find the details here - http://floydpink.github.io/CachedImage/
i've read your blog, and that brought me to this (i think much easier) concept setup:
As you will noticed, i reused some of your code you shared, so i'll share mine back.
Create a new custom control called CachedImage.
public class CachedImage : Image
{
private string _imageUrl;
static CachedImage()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CachedImage), new FrameworkPropertyMetadata(typeof(CachedImage)));
}
public string ImageUrl
{
get
{
return _imageUrl;
}
set
{
if (value != _imageUrl)
{
Source = new BitmapImage(new Uri(FileCache.FromUrl(value)));
_imageUrl = value;
}
}
}
}
Next i've made a FileCache class (so i have control on all caching not only images)
public class FileCache
{
public static string AppCacheDirectory { get; set; }
static FileCache()
{
// default cache directory, can be changed in de app.xaml.
AppCacheDirectory = String.Format("{0}/Cache/", Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData));
}
public static string FromUrl(string url)
{
//Check to see if the directory in AppData has been created
if (!Directory.Exists(AppCacheDirectory))
{
//Create it
Directory.CreateDirectory(AppCacheDirectory);
}
//Cast the string into a Uri so we can access the image name without regex
var uri = new Uri(url);
var localFile = String.Format("{0}{1}", AppCacheDirectory, uri.Segments[uri.Segments.Length - 1]);
if (!File.Exists(localFile))
{
HttpHelper.GetAndSaveToFile(url, localFile);
}
//The full path of the image on the local computer
return localFile;
}
}
Also for downloading content I made a helper class:
public class HttpHelper
{
public static byte[] Get(string url)
{
WebRequest request = HttpWebRequest.Create(url);
WebResponse response = request.GetResponse();
return response.ReadToEnd();
}
public static void GetAndSaveToFile(string url, string filename)
{
using (FileStream stream = new FileStream(filename, FileMode.Create, FileAccess.Write))
{
byte[] data = Get(url);
stream.Write(data, 0, data.Length);
}
}
}
The HttpHelper uses an extension on the WebResponse class for reading the result to an array
public static class WebResponse_extension
{
public static byte[] ReadToEnd(this WebResponse webresponse)
{
Stream responseStream = webresponse.GetResponseStream();
using (MemoryStream memoryStream = new MemoryStream((int)webresponse.ContentLength))
{
responseStream.CopyTo(memoryStream);
return memoryStream.ToArray();
}
}
}
Now you got it complete, lets use it in xaml
<Grid>
<local:CachedImage ImageUrl="http://host/image.png" />
</Grid>
That's all, it's reusable and robust.
The only disadvance is, that the image is never downloaded again until you cleanup the cache directory.
The first time the image is downloaded from the web and saved in the cache directory.
Eventually the image is loaded from the cache and assign to the source of the parent class (Image).
Kind regards,
Jeroen van Langen.
I have solved this by creating a Binding Converter using the IValueConverter interface. Given that I tried to find a solid solution for this for at least a week, I figured I should share my solution for those with this problem in the future.
Here is my blog post: Image Caching for a WPF Desktop Application
If you're just trying to cache within the same run, then a local dictionary could function as a runtime cache.
If you're trying to cache between application runs, it gets trickier.
If this is a desktop application, just save the cached images locally in the user's application data folder.
If it's an XBAP application (WPF in Browser), you'll only be able to setup a local cache in the user's Isolated Storage, due to security.
Based on this I made custom control which:
can download images asynchronously and get them from cache if image
is thread safe
was downloaded has dependency property to which you can bind to
update images, providing new names in initial feed (don’t forget to maintain cache clean operation, e.g. you can parse your feed
and asynchronously delete images with no links in feed)
I made a blog post:, and here's the code:
public class CachedImage : Image
{
static CachedImage()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CachedImage), new FrameworkPropertyMetadata(typeof(CachedImage)));
}
public readonly static DependencyProperty ImageUrlProperty = DependencyProperty.Register("ImageUrl", typeof(string), typeof(CachedImage), new PropertyMetadata("", ImageUrlPropertyChanged));
public string ImageUrl
{
get
{
return (string)GetValue(ImageUrlProperty);
}
set
{
SetValue(ImageUrlProperty, value);
}
}
private static readonly object SafeCopy = new object();
private static void ImageUrlPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
{
var url = (String)e.NewValue;
if (String.IsNullOrEmpty(url))
return;
var uri = new Uri(url);
var localFile = String.Format(Path.Combine(Globals.CacheFolder, uri.Segments[uri.Segments.Length - 1]));
var tempFile = String.Format(Path.Combine(Globals.CacheFolder, Guid.NewGuid().ToString()));
if (File.Exists(localFile))
{
SetSource((CachedImage)obj, localFile);
}
else
{
var webClient = new WebClient();
webClient.DownloadFileCompleted += (sender, args) =>
{
if (args.Error != null)
{
File.Delete(tempFile);
return;
}
if (File.Exists(localFile))
return;
lock (SafeCopy)
{
File.Move(tempFile, localFile);
}
SetSource((CachedImage)obj, localFile);
};
webClient.DownloadFileAsync(uri, tempFile);
}
}
private static void SetSource(Image inst, String path)
{
inst.Source = new BitmapImage(new Uri(path));
}
}
Now you can bind to it:
<Cache:CachedImage ImageUrl="{Binding Icon}"/>
Just a update from Jeroen van Langen reply,
You can save a bunch of line
remove HttpHelper class and the WebResponse_extension
replace
HttpHelper.GetAndSaveToFile(url, localFile);
by
WebClient webClient = new WebClient();
webClient.DownloadFile(url, localFile);
This cachedImage works great, but..
Any advice on how I could use the same cached image type capability for ImageSource for an ImageBrush?
<Rectangle
Width="32"
Height="32"
Margin="2,1"
RadiusX="16"
RadiusY="16"
RenderOptions.BitmapScalingMode="HighQuality">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Image}" />
</Rectangle.Fill>
</Rectangle>
Note there may be a better way to do rounded images (for say profile images)

Resources