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;
    4. namespace your.space
    5. {
    6. /// <summary>
    7. /// Class representing a ViewModel of an image
    8. /// </summary>
    9. public class ImageViewModel : INotifyPropertyChanged
    10. {
    11. #region Members
    12. bool isLoading;
    13. int progress;
    14. #endregion
    15. #region Constructors
    16. /// <summary>
    17. /// Initializes a new instance of the <see cref="ImageViewModel"/> class.
    18. /// </summary>
    19. /// <param name="imageUrl">The image URL.</param>
    20. public ImageViewModel(string imageUrl)
    21. : this(imageUrl, null) { }
    22. /// <summary>
    23. /// Initializes a new instance of the <see cref="ImageViewModel"/> class.
    24. /// </summary>
    25. /// <param name="imageUrl">The image URL.</param>
    26. /// <param name="fallbackImage">The fallback image.</param>
    27. public ImageViewModel(string imageUrl, BitmapImage fallbackImage)
    28. {
    29. if (string.IsNullOrEmpty(imageUrl))
    30. {
    31. Image = fallbackImage;
    32. IsLoading = false;
    33. return;
    34. }
    35. IsLoading = true;
    36. Image = new BitmapImage();
    37. Image.ImageOpened += (s, e) => { IsLoading = false; };
    38. Image.DownloadProgress += (s, e) => { DownloadProgress = e.Progress; };
    39. Image.ImageFailed += (s, e) =>
    40. {
    41. IsLoading = false;
    42. Image = FallbackImage;
    43. OnPropertyChanged("Image");
    44. };
    45. Image.UriSource = new Uri(imageUrl, UriKind.RelativeOrAbsolute);
    46. FallbackImage = fallbackImage;
    47. }
    48. #endregion
    49. #region Properties
    50. /// <summary>
    51. /// Gets or sets a value indicating whether this instance is loading.
    52. /// </summary>
    53. /// <value>
    54. /// <c>true</c> if this instance is loading; otherwise, <c>false</c>.
    55. /// </value>
    56. public bool IsLoading
    57. {
    58. get { return isLoading; }
    59. private set
    60. {
    61. if (value == isLoading)
    62. return;
    63. isLoading = value;
    64. OnPropertyChanged("IsLoading");
    65. }
    66. }
    67. /// <summary>
    68. /// Gets or sets the download progress.
    69. /// </summary>
    70. /// <value>The download progress.</value>
    71. public int DownloadProgress
    72. {
    73. get { return progress; }
    74. private set
    75. {
    76. if (value == progress)
    77. return;
    78. progress = value;
    79. OnPropertyChanged("DownloadProgress");
    80. }
    81. }
    82. /// <summary>
    83. /// Gets the image.
    84. /// </summary>
    85. /// <value>The image.</value>
    86. public BitmapImage Image { get; private set; }
    87. /// <summary>
    88. /// Gets or sets the fallback image.
    89. /// </summary>
    90. /// <value>The fallback image.</value>
    91. public BitmapImage FallbackImage
    92. {
    93. get;
    94. private set;
    95. }
    96. #endregion
    97. #region Events
    98. /// <summary>
    99. /// Called when [property changed].
    100. /// </summary>
    101. /// <param name="propertyname">The propertyname.</param>
    102. protected virtual void OnPropertyChanged(string propertyname)
    103. {
    104. if (PropertyChanged != null)
    105. PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
    106. }
    107. /// <summary>
    108. /// Occurs when a property value changes.
    109. /// </summary>
    110. public event PropertyChangedEventHandler PropertyChanged;
    111. #endregion
    112. }
    113. }
    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;
    5. namespace your.space
    6. {
    7. /// <summary>
    8. /// Converter Class
    9. /// </summary>
    10. public class VisibilityConverter : IValueConverter
    11. {
    12. #region IValueConverter Members
    13. /// <summary>
    14. /// Modifies the source data before passing it to the target for display in the UI.
    15. /// </summary>
    16. /// <param name="value">The source data being passed to the target.</param>
    17. /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the target dependency property.</param>
    18. /// <param name="parameter">An optional parameter to be used in the converter logic.</param>
    19. /// <param name="culture">The culture of the conversion.</param>
    20. /// <returns>
    21. /// The value to be passed to the target dependency property.
    22. /// </returns>
    23. public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    24. {
    25. return ((bool) value) ? Visibility.Visible : Visibility.Collapsed;
    26. }
    27. /// <summary>
    28. /// 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.
    29. /// </summary>
    30. /// <param name="value">The target data being passed to the source.</param>
    31. /// <param name="targetType">The <see cref="T:System.Type"/> of data expected by the source object.</param>
    32. /// <param name="parameter">An optional parameter to be used in the converter logic.</param>
    33. /// <param name="culture">The culture of the conversion.</param>
    34. /// <returns>
    35. /// The value to be passed to the source object.
    36. /// </returns>
    37. public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    38. {
    39. return null;
    40. }
    41. #endregion
    42. }
    43. }
    Alles anzeigen

    6.611 mal gelesen