In my last post, I discussed accessing and displaying file data from your Metro app, and grouping files using the pivot API. Let me follow up on that with a discussion of basic file filtering using the search API. So in our photo browser app, suppose we’d like the user filter photos by their own rating. In the Windows OS, the user can right click on a picture and set a personal rating using the Rating property :
This is the property that we’re going to use for our filtering example. So we’ll assume the user has at least some pictures rated using the above property settings in her file system.
Here’s what we want to achieve :
The buttons in the top row match each distinct rating value the user has assigned to her pics. So we need to generate these buttons. Then, when the user clicks one of them, the list will refresh to only show pics matching the selected rating value.
Let’s start with the buttons :
1: private async void CreateRatingButtons()
2: {
3: var pivot = CommonFolderQuery.GroupByRating;
4: var folders = await library.GetFoldersAsync(pivot);
5:
6: var ratingValues = folders.Cast<StorageFolder>().Select(
7: f => new Rating { Name = f.Name }).OrderBy(r => r.Name);
8: Ratings = new ObservableCollection<Rating>(ratingValues);
9: DefaultViewModel["Ratings"] = Ratings;
10: }
You can see our old friend the pivot, which we first use to group the files by rating. As in the previous post, we generate a list of virtual folders, each representing a group of pictures matching a specific rating value. Then we just retrieve the vfolder name which is the rating value itself. At this point, our goal is just to get the list of rating values assigned by the user in her file system. We store them in a simple data model class in an observable collection to make data binding easier. Then we bind an items control to the collection to generate the list of buttons :
1: <ItemsControl x:Name="icRatings"
2: ItemsSource="{Binding Ratings}">
3: <ItemsControl.ItemsPanel>
4: <ItemsPanelTemplate>
5: <StackPanel Orientation="Horizontal" />
6: </ItemsPanelTemplate>
7: </ItemsControl.ItemsPanel>
8: <ItemsControl.ItemTemplate>
9: <DataTemplate>
10: <Button Name="btnFilter"
11: Content="{Binding Name}"
12: Click="btnFilter_Click" />
13: </DataTemplate>
14: </ItemsControl.ItemTemplate>
15: </ItemsControl>
So the ItemsControl is bound to the Ratings list (here through the DefaultViewModel property for convenience, but you could just set icRatings’s ItemsSource to Ratings in code if you so prefer). That takes care of creating our filter buttons.
Next, what happens when a button is clicked ? Well, here’s the workhorse method :
1: private async Task GetFilesAsync(StorageFolder rootFolder, string search = "")
2: {
3: var options = new QueryOptions { FolderDepth = FolderDepth.Deep };
4: options.ApplicationSearchFilter = search;
5:
6:
7: var result = rootFolder.CreateFileQueryWithOptions(options);
8: var files = await result.GetFilesAsync();
9:
10: foreach (var file in files)
11: {
12: var myFile = new MyFile { FileName = file.Name };
13:
14: myFile.Thumbnail = await file.GetThumbnailAsync(ThumbnailMode.PicturesView, 200);
15:
16: var props = await file.Properties.RetrievePropertiesAsync(new List<string> { "System.RatingText", "System.Title" });
17: var title = props["System.Title"];
18: var ratingText = props["System.RatingText"];
19: myFile.Title = title != null ? title.ToString() : string.Empty;
20: myFile.RatingText = ratingText != null ? ratingText.ToString() : string.Empty;
21:
22: myFiles.Add(myFile);
23: }
24: }
I start by creating a QueryOptions instance, and set its ApplicationSearchFilter to the filter criterion we’re interested in. In this case, search should be set in the button click handler :
1: private async void btnFilter_Click(object sender, RoutedEventArgs e)
2: {
3: myFiles.Clear();
4:
5: var rating = (sender as Button).DataContext as Rating;
6: if (rating != null)
7: {
8: ...
9: await GetFilesAsync(library, "System.Rating:" + ratingText);
10: }
11: }
Note that I also set FolderDepth to Deep so as to specify a deep search. As we’ve seen before, I then create the query and start the async operation to retrieve the files matching the passed in search criterion. Then I loop through the result files, and seek to retrieve the actual rating value for the file (although I already know it since it should match the search criterion) as well as the image title. This is to illustrate accessing file properties using the new set of interfaces in WinRT Consumer Prev. Notice I first access the file’s Properties value and call RetrievePropertiesAsync() on that object, passing to it a list of property names I need to retrieve. The property names to pass are very badly documented at this point, but after some digging I found they must conform to Windows’ Advanced Query Syntax (documented here). Here’s a list of Windows properties : http://msdn.microsoft.com/en-us/library/bb760685(VS.85).aspx
So anyway to make things short, the property we’re interested in is not System.Rating, which returns a number, but System.RatingText. So we retrieve that as well as Title, and we store the retrieved values in our MyFile data model object so we can bind to it in the UI. Here’s the updated version of MyFile :
1: public class MyFile : BindableBase
2: {
3: public string FileName { get; set; }
4:
5: string title;
6: public string Title
7: {
8: get { return title; }
9: set { SetProperty<string>(ref title, value); }
10: }
11:
12: public StorageItemThumbnail Thumbnail { get; set; }
13: public string RatingText { get; set; }
14: }
So hopefully, this has given you an idea of how you can implement searching/filtering on file data in your apps. I’ve used a simple example but you can obviously implement much more complex scenarios using these techniques.
Happy filtering…
