How to filter an observable collection in Windows Phone 8?

Question

I tried this How to: Filter Data in a View so i tried this approach but it didn't work for me because windows phone 8 environment couldn't find 'ListCollectionView'.

My collection is following.

//My observableCollection
ObservableCollection<ClonedWrapper> dsForProgress = new ObservableCollection<ClonedWrapper >();

//My Function which shows at first time.
private async Task CloudImages()
{
IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();
try
{
    List<MainWrapper> serverdata = new List<MainWrappe>();
        serverdata = await ImageUrlAsync();//This function is returning the Deserialize object of images
        if (serverdata.Count != 0)
        {
            foreach (var imgInfo in serverdata)
            {
                string folderPath = "Fagbokforlaget/Books/" + BookInfo.Id.Trim();
                ClonedWrapper item = new ClonedWrapper()
                {
                    //Name, Cover, Info, Title, IsEnableButton, IsVisibleButton, 
                    // IsVisible are the assigned keys to the xaml page
                    Id = imgInfo.Id,
                    Name = imgInfo.Name,
                    Cover = await GetCoverImage(imgInfo),
                    Info = imgInfo.Info,
                    Title = imgInfo.Title,
                    Url = imgInfo.Url,
                    IsEnableButton = "True",
                    IsVisible = "Collapsed",
                    Date = Convert.ToDateTime(imgInfo.Date)
                };
                if (isf.DirectoryExists(folderPath))
                {
                    item.ButtonStatus = "Read";
                        item.IsVisibleBookDeleteButton = "Visible";
                    }
                    else
                    {
                        item.ButtonStatus = "Download";
                        item.IsVisibleBookDeleteButton = "Collapsed";
                    }
                    dsForProgress.Add(item);
                }
            }
            else
            {
                MessageBox.Show("You have no any downloaded books!");
            }
            listCloudImages.ItemsSource = dsForProgress;
    }
        catch (Exception exe)//I am getting exception here on extreme first run in absense of internet.
        {
            MessageBox.Show(exe.Message);
        }
    }

//My xaml page is following. It is the default page that loaded at first time. you can say it is the face of the application. User download the images. and buttonStatus convert into the Read button. so now what i am doing i will keep two buttons in appliationbar one cloud second downloaded. ON Download button click i want to show only downloaded images.

   <ListBox Name="listCloudImages" Visibility="Visible" Grid.Row="1" ScrollViewer.VerticalScrollBarVisibility="Auto" FontFamily="Segoe UI" FontStyle="Normal" FontWeight="Thin" Margin="0,0,0,50">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <tools:WrapPanel Orientation="Horizontal">
                </tools:WrapPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" Background="#151414" CornerRadius="3" Margin="3" Width="150" TextOptions.DisplayColorEmoji="True" BorderBrush="#1c1b1b">
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">

                            <Image x:Name="imgBookImage" Source="{Binding Cover}" Visibility="Visible" VerticalAlignment="Top" HorizontalAlignment="Center"
                                       Width="80" Height="100" ImageOpened="imgBookImage_ImageOpened"/>
                            <StackPanel Orientation="Horizontal">

                                <TextBlock Visibility="{Binding IsVisible}" Text="{Binding ProgressPercentage}" FontFamily="Segoe UI" FontSize="18" FontWeight="ExtraBold" Foreground="White" Margin="5,0"></TextBlock>
                            </StackPanel>
                        </StackPanel>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding Title}" FontFamily="Segoe UI" FontSize="13.5" 
                                       Foreground="White" TextTrimming="WordEllipsis"
                                       VerticalAlignment="Top" HorizontalAlignment="Left" 
                                       TextWrapping="Wrap" 
                                       Width="300" Padding="2"/>
                            <TextBlock Text="{Binding Info}" FontSize="13.5" FontFamily="Segoe UI" 
                                       Foreground="White"
                                       VerticalAlignment="Top" HorizontalAlignment="Left" 
                                       TextWrapping="Wrap" 
                                       Width="300" Padding="2"/>
                            <ProgressBar x:Name="downloadProgressBar" Foreground="Green" IsIndeterminate="True" VerticalAlignment="Center"  Width="120" TextOptions.TextHintingMode="Animated" Visibility="{Binding IsVisible}"  CharacterSpacing="2"/>
                            <Button Content="{Binding ButtonStatus}" x:Name="btnDownload" IsEnabled="{Binding IsEnableButton, Converter={StaticResource ButtonVisibilityIsEnableConverter}}" 
                                       Click="btnDownload_Click" Tag="{Binding}" Width="120" BorderThickness="1" FontSize="13.5" Margin="0,5" 
                                       FontFamily="Segoe UI" tools:SlideInEffect.LineIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top" 
                                       Foreground="White">
                            </Button>

                            <Image x:Name="imgCancelImage" Source="/Assets/Tiles/CancelImage.png" Visibility="{Binding IsVisible}" VerticalAlignment="Center" Margin="97,-66,0,0"
                                         Tap="imgCancelImage_Tap"  HorizontalAlignment="Right" Width="25" Height="25" Tag="{Binding}"/>
                            <Button x:Name="btnDeleteImage" Click="btnDeleteImage_Click"
                                        Tag="{Binding}" BorderThickness="1" Margin="97,-66,0,0" 
                                        Height="55" Width="55"
                                        Visibility="{Binding ButtonStatus, Converter={StaticResource DeleteButtonVisibilityConverter}}">
                                <Button.Background>
                                    <ImageBrush ImageSource="/Images/delete.png" Stretch="Fill"></ImageBrush>
                                </Button.Background>
                            </Button>
                        </StackPanel>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Answer 1

Based on your code, you can do something quite easy, if you wanna show only downloaded books try this:

private void ApplicationBarButtonShowAllDownLoaded(object sender, EventArgs e)
    {        
        var c = (Application.Current as App).dsForProgress.Where(x => x.ButtonStatus.Equals("Download"));
        listCloudImages.ItemsSource = c;
    }

be sure that ObservableCollection<ClonedWrapper> dsForProgress is public

Answer 2

In your book model, you can pass a bool property IsDownload and when you download books you set this property to true.For your filter, just use linQ for take all books download or no dowload like this :

var noDownloadedBooks = 
            from b in yourObservableCollection
            where b.IsDownload == false 
            select b; 
var downloadedBooks = 
                from b in yourObservableCollection
                where b.IsDownload == true
                select b; 

Answer 3

What you need to do is use a CollectionViewSource, this can point to your original collection and it can handle filtering! Scott Hanselman has a great example blog post about it here... http://www.hanselman.com/blog/CollectionViewSourceIsCrazyUsefulForBindingToFilteredObservableCollectionsOnWindowsPhone8.aspx