Nach dem ich schon gezeigt habe, wie man eine asynchrone ImageView unter MonoTouch realisiert, hier jetzt der XAML-Ansatz. Getestet mit Windows Phone 7, aber sollte auch in Silverlight laufen:
Als erstes brauchen wir mal den XAML-Teil
Diesen Binden wir an unser ImageViewModel
Alles anzeigen
Wer den Code aufmerksam liest, erkennt, das es in dieser Version zusätzlich möglich ist, ein Fallback Image anzuzeigen, falls der Download schief läuft.
Und damit der Progressbar und der Platzhaltertext auch ein- bzw ausgeblendet wird brauchen wir noch den Visibility Converter. Dieser muss dann natürlich noch als Resource im XAML eingebunden werden:
Alles anzeigen
Als erstes brauchen wir mal den XAML-Teil
Quellcode
- <StackPanel>
- <ProgressBar x:Name="imagePerformanceProgressBar" Foreground="#FF41A50F" IsIndeterminate="False" Value="{Binding Image.DownloadProgress}" Visibility="{Binding Image.IsLoading, Converter={StaticResource VisibilityConverter}}" HorizontalAlignment="Left" Width="150" Height="20" VerticalAlignment="Center" />
- <TextBlock Text="Laden..." Foreground="Black" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,20,0,0" Visibility="{Binding Image.IsLoading, Converter={StaticResource VisibilityConverter}}"/>
- <Image Source="{Binding Image.Image}" VerticalAlignment="Bottom" ImageOpened="OnImageOpened" Stretch="None"/>
- </StackPanel>
Diesen Binden wir an unser ImageViewModel
Quellcode
- using System;
- using System.ComponentModel;
- using System.Windows.Media.Imaging;
- namespace your.space
- {
- /// <summary>
- /// Class representing a ViewModel of an image
- /// </summary>
- public class ImageViewModel : INotifyPropertyChanged
- {
- #region Members
- bool isLoading;
- int progress;
- #endregion
- #region Constructors
- /// <summary>
- /// Initializes a new instance of the <see cref="ImageViewModel"/> class.
- /// </summary>
- /// <param name="imageUrl">The image URL.</param>
- public ImageViewModel(string imageUrl)
- : this(imageUrl, null) { }
- /// <summary>
- /// Initializes a new instance of the <see cref="ImageViewModel"/> class.
- /// </summary>
- /// <param name="imageUrl">The image URL.</param>
- /// <param name="fallbackImage">The fallback image.</param>
- public ImageViewModel(string imageUrl, BitmapImage fallbackImage)
- {
- if (string.IsNullOrEmpty(imageUrl))
- {
- Image = fallbackImage;
- IsLoading = false;
- return;
- }
- IsLoading = true;
- Image = new BitmapImage();
- Image.ImageOpened += (s, e) => { IsLoading = false; };
- Image.DownloadProgress += (s, e) => { DownloadProgress = e.Progress; };
- Image.ImageFailed += (s, e) =>
- {
- IsLoading = false;
- Image = FallbackImage;
- OnPropertyChanged("Image");
- };
- Image.UriSource = new Uri(imageUrl, UriKind.RelativeOrAbsolute);
- FallbackImage = fallbackImage;
- }
- #endregion
- #region Properties
- /// <summary>
- /// Gets or sets a value indicating whether this instance is loading.
- /// </summary>
- /// <value>
- /// <c>true</c> if this instance is loading; otherwise, <c>false</c>.
- /// </value>
- public bool IsLoading
- {
- get { return isLoading; }
- private set
- {
- if (value == isLoading)
- return;
- isLoading = value;
- OnPropertyChanged("IsLoading");
- }
- }
- /// <summary>
- /// Gets or sets the download progress.
- /// </summary>
- /// <value>The download progress.</value>
- public int DownloadProgress
- {
- get { return progress; }
- private set
- {
- if (value == progress)
- return;
- progress = value;
- OnPropertyChanged("DownloadProgress");
- }
- }
- /// <summary>
- /// Gets the image.
- /// </summary>
- /// <value>The image.</value>
- public BitmapImage Image { get; private set; }
- /// <summary>
- /// Gets or sets the fallback image.
- /// </summary>
- /// <value>The fallback image.</value>
- public BitmapImage FallbackImage
- {
- get;
- private set;
- }
- #endregion
- #region Events
- /// <summary>
- /// Called when [property changed].
- /// </summary>
- /// <param name="propertyname">The propertyname.</param>
- protected virtual void OnPropertyChanged(string propertyname)
- {
- if (PropertyChanged != null)
- PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
- }
- /// <summary>
- /// Occurs when a property value changes.
- /// </summary>
- public event PropertyChangedEventHandler PropertyChanged;
- #endregion
- }
- }
Wer den Code aufmerksam liest, erkennt, das es in dieser Version zusätzlich möglich ist, ein Fallback Image anzuzeigen, falls der Download schief läuft.
Und damit der Progressbar und der Platzhaltertext auch ein- bzw ausgeblendet wird brauchen wir noch den Visibility Converter. Dieser muss dann natürlich noch als Resource im XAML eingebunden werden:
Quellcode
- using System;
- using System.Globalization;
- using System.Windows;
- using System.Windows.Data;
- namespace your.space
- {
- /// <summary>
- /// Converter Class
- /// </summary>
- public class VisibilityConverter : IValueConverter
- {
- #region IValueConverter Members
- /// <summary>
- /// Modifies the source data before passing it to the target for display in the UI.
- /// </summary>
- /// <param name="value">The source data being passed to the target.</param>
- /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the target dependency property.</param>
- /// <param name="parameter">An optional parameter to be used in the converter logic.</param>
- /// <param name="culture">The culture of the conversion.</param>
- /// <returns>
- /// The value to be passed to the target dependency property.
- /// </returns>
- public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
- {
- return ((bool) value) ? Visibility.Visible : Visibility.Collapsed;
- }
- /// <summary>
- /// Modifies the target data before passing it to the source object. This method is called only in <see cref="F:System.Windows.Data.BindingMode.TwoWay"/> bindings.
- /// </summary>
- /// <param name="value">The target data being passed to the source.</param>
- /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the source object.</param>
- /// <param name="parameter">An optional parameter to be used in the converter logic.</param>
- /// <param name="culture">The culture of the conversion.</param>
- /// <returns>
- /// The value to be passed to the source object.
- /// </returns>
- public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
- {
- return null;
- }
- #endregion
- }
- }
16.672 mal gelesen