Question

实际上LonglistSelector与图像uri的动态列表绑定。我需要显示每个图像的加载指示器，直到图像加载。如果有人知道如何完成它，请立即帮助我。提前谢谢。

Answer 1

您必须提供知道以下内容的对象列表：

图片网址
装载指示器

只要LoadingIndicator为true，LonglistSelector项模板就会显示加载动画。一旦变为假，它就会显示图像。这可以使用Visibility属性和BooleanToVisibilityConverter类来实现。

顶部所述的模型必须为加载指示器实现INotifyPropertyChanged，以便在每个项目发生更改后立即自动刷新UI。

你的模型看起来像这样。引用的类BindableBase是Microsoft的一个类，可以在这里找到：http://msdn.microsoft.com/en-US/en-en/library/windows/apps/xx130657.aspx

public class ImageViewModel : BindableBase
{
    /// <summary>
    /// No need to use SetProperty here, because this parameter is not bound against any UI control
    /// which would need a refresh
    /// </summary>
    public string ImageUrl { get; set; }

    private bool isLoading;
    /// <summary>
    /// Reflects loading status of the underlying tile.
    /// </summary>
    public bool IsLoading
    {
        get { return isLoading; }
        set { SetProperty(ref isLoading, value); }
    }

    private ImageSource imageContent;
    /// <summary>
    /// Reflects image which shall be displayed.
    /// </summary>
    public ImageSource ImageContent
    {
        get { return imageContent; }
        set { SetProperty(ref imageContent, value); }
    }
}

您的UI将绑定这些模型实体的列表，并在isLoading为true时显示加载动画，否则显示图像。为此，您可以使用BooleanToVisibilityConverter类，该类在大多数情况下与新项目一起创建。但是你可以在网上搜索课程。

现在，当您加载页面时，您将遍历项目列表并开始下载图像。下载后，将“ImageContent”替换为实际图像，并将IsLoading设置为false。然后，您的UI将显示图像并隐藏加载动画，因为这两个属性都不会显示给UI。

您的数据模板如下所示：

<DataTemplate x:Key="itemTemplateLongListSelector"> 
    <StackPanel Width="230" Height="290" Margin="4,4"> 
        <Image Width="230" Height="290" Stretch="UniformToFill" Visibility="{Binding IsLoading, Converter={StaticResource BooleanNegationToVisibilityConverter}}"> 
            <Image.Source> 
                <BitmapImage UriSource="{Binding ImageSource}"/> 
            </Image.Source> 
        </Image> 
        <TextBlock Text="Loading..." Visibility="{Binding IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}"/>
    </StackPanel> 
</DataTemplate>

所需的转换器类：

public sealed class BooleanNegationToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (value is bool && (bool)value) ? Visibility.Collapsed : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value is Visibility && (Visibility)value == Visibility.Collapsed;
    }
}

public sealed class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return value is Visibility && (Visibility)value == Visibility.Visible;
    }
}

两者都需要在App.xaml资源字典部分声明：

<common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<common:BooleanNegationToVisibilityConverter x:Key="BooleanNegationToVisibilityConverter"/>

“common”在App.xaml中定义：

<Application
...
xmlns:common="clr-namespace:YourProject.Path.To.Converter.Classes"
...>

如何在windows phone 8中整合longlistselector的每个动态项目的进度指示器？

1 个答案: