Asynchrones Downloaden eines Bildes mit Anzeige eines Progressbars

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Hier die XAML Variante der asynchronen ImageView.
    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

    Quellcode

    1. <StackPanel>
    2. <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" />
    3. <TextBlock Text="Laden..." Foreground="Black" FontSize="12" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,20,0,0" Visibility="{Binding Image.IsLoading, Converter={StaticResource VisibilityConverter}}"/>
    4. <Image Source="{Binding Image.Image}" VerticalAlignment="Bottom" ImageOpened="OnImageOpened" Stretch="None"/>
    5. </StackPanel>


    Diesen Binden wir an unser ImageViewModel

    Quellcode

    1. using System;
    2. using System.ComponentModel;
    3. using System.Windows.Media.Imaging;
    5. namespace your.space
    6. {
    7. /// <summary>
    8. /// Class representing a ViewModel of an image
    9. /// </summary>
    10. public class ImageViewModel : INotifyPropertyChanged
    11. {
    12. #region Members
    14. bool isLoading;
    15. int progress;
    17. #endregion
    19. #region Constructors
    21. /// <summary>
    22. /// Initializes a new instance of the <see cref="ImageViewModel"/> class.
    23. /// </summary>
    24. /// <param name="imageUrl">The image URL.</param>
    25. public ImageViewModel(string imageUrl)
    26. : this(imageUrl, null) { }
    28. /// <summary>
    29. /// Initializes a new instance of the <see cref="ImageViewModel"/> class.
    30. /// </summary>
    31. /// <param name="imageUrl">The image URL.</param>
    32. /// <param name="fallbackImage">The fallback image.</param>
    33. public ImageViewModel(string imageUrl, BitmapImage fallbackImage)
    34. {
    35. if (string.IsNullOrEmpty(imageUrl))
    36. {
    37. Image = fallbackImage;
    38. IsLoading = false;
    39. return;
    40. }
    42. IsLoading = true;
    43. Image = new BitmapImage();
    45. Image.ImageOpened += (s, e) => { IsLoading = false; };
    46. Image.DownloadProgress += (s, e) => { DownloadProgress = e.Progress; };
    47. Image.ImageFailed += (s, e) =>
    48. {
    49. IsLoading = false;
    50. Image = FallbackImage;
    51. OnPropertyChanged("Image");
    52. };
    54. Image.UriSource = new Uri(imageUrl, UriKind.RelativeOrAbsolute);
    56. FallbackImage = fallbackImage;
    57. }
    59. #endregion
    61. #region Properties
    63. /// <summary>
    64. /// Gets or sets a value indicating whether this instance is loading.
    65. /// </summary>
    66. /// <value>
    67. /// <c>true</c> if this instance is loading; otherwise, <c>false</c>.
    68. /// </value>
    69. public bool IsLoading
    70. {
    71. get { return isLoading; }
    72. private set
    73. {
    74. if (value == isLoading)
    75. return;
    77. isLoading = value;
    78. OnPropertyChanged("IsLoading");
    79. }
    80. }
    82. /// <summary>
    83. /// Gets or sets the download progress.
    84. /// </summary>
    85. /// <value>The download progress.</value>
    86. public int DownloadProgress
    87. {
    88. get { return progress; }
    89. private set
    90. {
    91. if (value == progress)
    92. return;
    94. progress = value;
    95. OnPropertyChanged("DownloadProgress");
    96. }
    97. }
    99. /// <summary>
    100. /// Gets the image.
    101. /// </summary>
    102. /// <value>The image.</value>
    103. public BitmapImage Image { get; private set; }
    105. /// <summary>
    106. /// Gets or sets the fallback image.
    107. /// </summary>
    108. /// <value>The fallback image.</value>
    109. public BitmapImage FallbackImage
    110. {
    111. get;
    112. private set;
    113. }
    115. #endregion
    117. #region Events
    119. /// <summary>
    120. /// Called when [property changed].
    121. /// </summary>
    122. /// <param name="propertyname">The propertyname.</param>
    123. protected virtual void OnPropertyChanged(string propertyname)
    124. {
    125. if (PropertyChanged != null)
    126. PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
    127. }
    129. /// <summary>
    130. /// Occurs when a property value changes.
    131. /// </summary>
    132. public event PropertyChangedEventHandler PropertyChanged;
    134. #endregion
    135. }
    136. }
    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:

    Quellcode

    1. using System;
    2. using System.Globalization;
    3. using System.Windows;
    4. using System.Windows.Data;
    6. namespace your.space
    7. {
    8. /// <summary>
    9. /// Converter Class
    10. /// </summary>
    11. public class VisibilityConverter : IValueConverter
    12. {
    13. #region IValueConverter Members
    15. /// <summary>
    16. /// Modifies the source data before passing it to the target for display in the UI.
    17. /// </summary>
    18. /// <param name="value">The source data being passed to the target.</param>
    19. /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the target dependency property.</param>
    20. /// <param name="parameter">An optional parameter to be used in the converter logic.</param>
    21. /// <param name="culture">The culture of the conversion.</param>
    22. /// <returns>
    23. /// The value to be passed to the target dependency property.
    24. /// </returns>
    25. public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    26. {
    27. return ((bool) value) ? Visibility.Visible : Visibility.Collapsed;
    28. }
    30. /// <summary>
    31. /// 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.
    32. /// </summary>
    33. /// <param name="value">The target data being passed to the source.</param>
    34. /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the source object.</param>
    35. /// <param name="parameter">An optional parameter to be used in the converter logic.</param>
    36. /// <param name="culture">The culture of the conversion.</param>
    37. /// <returns>
    38. /// The value to be passed to the source object.
    39. /// </returns>
    40. public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    41. {
    42. return null;
    43. }
    45. #endregion
    46. }
    47. }
    Alles anzeigen

    17.503 mal gelesen