CODEWITHSUNDEEP
windows-phone-7windows-phone-8windows-phone
maztt
maztt

Reputation: 12294

windows phone 8 longlistselector rebinding image

i am accessing the google books api to display thumbnail images in my book result page in my app.The thing i want to do is when the user access the books list immediately i want to show a 'loading' png image from my image folder as it will take some time for the thumbnail to load from the google books api. then one by one the original thumbnail image will load over the loading images giving the user the nice experience. the thing is that how can i rebind the images(i.e after loading the loading images i want to load the real thumbnail)?. here is the relevant code. any idea how can i do it in an appropriate way?

if using converters i am not sure how can i identify which image to show when?

    <DataTemplate x:Key="BooksItemTemplate">
        <Grid Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions> 
            <Button Click="Button_Click_1" />
            <Image Source="Images/loading.jpg" Height="150" Width="150"/>
            <StackPanel Grid.Column="1" VerticalAlignment="Top">
                <TextBlock Text="{Binding BookTitle}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                <TextBlock Text="{Binding Identificationno}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

 <phone:LongListSelector x:Name="bookslist" 
                                 Background="Transparent"  
                                 IsGroupingEnabled="False"                 
                                 ItemTemplate="{StaticResource BooksItemTemplate}"/>


 public BookCategoriesViewModel bookcategoriesvm;
    public BooksListing()
    {
        InitializeComponent();
        bookcategoriesvm = new BookCategoriesViewModel();
    }

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        string categoryid = string.Empty;
        if (NavigationContext.QueryString.TryGetValue("catid", out categoryid))
        {
           bookcategoriesvm.GetBookcategories(Convert.ToInt64(categoryid));              
        }

        bookslist.ItemsSource = bookcategoriesvm.BooksCategoriesList;
    }

Upvotes: 0

Views: 361

Answers (1)

Benoit Catherinet
Benoit Catherinet

Reputation: 3345

The easiest is probably just to have two Image on top of each other (the "loading image" at the bottom) like this whenever the thumbnail is finished downloading, it will just hide your loading image.

Upvotes: 1

Related Questions