31、StorageDataSource and GetVirtualizedFilesVector sample

1、Display the Pictures library in a GridView and ListView

本示例展示怎样把电脑上面的图片库中的文件通过使用 FileInformationFactory 的方式显示在 GridView 和

ListView 控件上。

在页面中放置 GridView 控件和 ListView控件（在 UnSnapped 视图下不显示）：

 // Horizontal scrolling grid used in most view states 
 <GridView
     x:Name="itemGridView"
     AutomationProperties.AutomationId="ItemGridView"
     AutomationProperties.Name="Items"
     Grid.Row="1"
     Margin="0,-4,0,0"
     Padding="116,0,40,46"
     ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
     ItemTemplate="{StaticResource Custom190x130ItemTemplate}"
     SelectionMode="None"/>

 // Vertical scrolling list only used when snapped 
 <ListView
     x:Name="itemListView"
     AutomationProperties.AutomationId="ItemsListView"
     AutomationProperties.Name="Items"
     Grid.Row="1"
     Margin="10,0,0,60"
     Padding="0,-10,0,0"
     Visibility="Collapsed" //不显示
     ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
     ItemTemplate="{StaticResource Custom190x130ItemTemplate}"
     SelectionMode="None"/>

页面中的资源：

<UserControl.Resources>
//把文件流转换成 Image 对象
        <local:ThumbnailConverter x:Key="thumbnailConverter"/>
      
//GridView 和 ListView 模板
  <DataTemplate x:Key="Custom190x130ItemTemplate">
            <Grid Width="190" Height="130">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="190" Height="130">
                    <Image Source="{Binding Path=Thumbnail, Converter={StaticResource thumbnailConverter}}" 
                                                          Stretch="None" Width="190" Height="130"/>
                </Border>
            </Grid>
        </DataTemplate>

       //本页面用到的集合
        <CollectionViewSource
            x:Name="itemsViewSource"/>

     </UserControl.Resources>

转换图片文件的 Converter ：

internal class ThumbnailConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string culture)
    {
        if (value != null)
        {
            var thumbnailStream = (IRandomAccessStream)value;
            var image = new BitmapImage();
            image.SetSource(thumbnailStream);

            return image;
        }

        return DependencyProperty.UnsetValue;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string culture)
    {
        throw new NotImplementedException();
    }
}

当页面处于 Snapped 状态时：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>

在页面的 OnNavigatedTo(NavigationEventArgs e) 方法中，获取数据源：

 protected override void OnNavigatedTo(NavigationEventArgs e)
 {

  //创建 QueryOptions 类的实例并使用以下默认设置对其进行初始化：
  //FolderDepth = ShallowIndexerOption = IndexerOption
   var queryOptions = new QueryOptions();

  //指示搜索查询是否应生成文件夹内容的浅表视图或所有文件和子文件夹的深递归视图。
  // 执行文件夹的内容的深度枚举。Windows 通过子文件夹遍历查看内容
  //并显示在合并所有已发现内容的单个列表中的结果。
  queryOptions.FolderDepth = FolderDepth.Deep;
    
  // 获取或设置枚举文件夹内容时要使用的索引器选项。 
  // 如果可用，则使用索引器；否则直接访问文件系统。
  queryOptions.IndexerOption = IndexerOption.UseIndexerWhenAvailable;

  //SortOrder :获取指定如何在 storageFolder 中排序项目（如文件和文件夹）的 sortEntry 结构的列表。
   queryOptions.SortOrder.Clear();
  var sortEntry = new SortEntry();

   //要用于排序的属性的名称。属性必须对计算机有效。
    sortEntry.PropertyName = "System.FileName";

   // true 根据属性名称按升序对内容进行排序，或 false 按降序对内容进行排序。
   sortEntry.AscendingOrder = true;
   queryOptions.SortOrder.Add(sortEntry);

   //  创建用于执行针对文件夹中的存储文件的筛选搜索查询的对象。对象
   //使用指定的查询选择进行初始化。
    StorageFileQueryResult  fileQuery = KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(queryOptions);
    const uint size = 190; //默认的显示尺寸

   // 创建新的 FileInformationFactory 对象，其在指定的查询结果中检索有关 StorageFile 和 StorageFolder
   // 对象的信息，并指定为对象检索的所请求缩略图大小和选项，并指示是否延迟加载信息。
   var fileInformationFactory = new FileInformationFactory(fileQuery, ThumbnailMode.PicturesView, size
                                                        , ThumbnailOptions.UseCurrentScale, true);

   // 获取适用于在 C#、C++ 和 VB 中绑定到 ListView 的 FileInformation 对象的虚拟矢量。
   itemsViewSource.Source = fileInformationFactory.GetVirtualizedFilesVector();
  }

显示结果：

在 UnSnapped 状态：

在 Snapped 状态下：

2、Display the Pictures library in a GridView and ListView ，organized by folder ：

和 1、类似，只是增加了文件夹选项，从而使用 GirdView 和 ListView 的 ItemTemplateSelector 来判断，是使用 FileTemplate 模板

还是 FolderTemplate 模板：

页面的 xaml ：

//页面中的资源
 <UserControl.Resources>
        <local:ThumbnailConverter x:Key="thumbnailConverter"/>

        <DataTemplate x:Key="FolderTemplate">
            <Grid Width="190" Height="130">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="190" Height="130">
                    <Image Source="{Binding Path=Thumbnail, Converter={StaticResource thumbnailConverter}}" Stretch="None" 
                                    Width="190" Height="130"/>
                </Border>
                <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
                    <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}"
                               Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="FileTemplate">
            <Grid Width="190" Height="130">
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="190" Height="130">
                    <Image Source="{Binding Path=Thumbnail, Converter={StaticResource thumbnailConverter}}" 
                                                                    Stretch="None" Width="190" Height="130"/>
                </Border>
            </Grid>
        </DataTemplate>

        <local:FileFolderInformationTemplateSelector x:Key="FileFolderInformationTemplateSelector"
            FileInformationTemplate="{StaticResource FileTemplate}"
            FolderInformationTemplate="{StaticResource FolderTemplate}" />

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
            x:Name="itemsViewSource"/>

        <x:String x:Key="AppName">Data source adapter sample</x:String>
    </UserControl.Resources>

显示控件：

 <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Items"
            Grid.Row="1"
            Margin="0,-4,0,0"
            Padding="116,0,40,46"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            ItemTemplateSelector="{StaticResource FileFolderInformationTemplateSelector}"
            SelectionMode="None"/>

        <!-- Vertical scrolling list only used when snapped -->
        <ListView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemsListView"
            AutomationProperties.Name="Items"
            Grid.Row="1"
            Margin="10,0,0,60"
            Padding="0,-10,0,0"
            Visibility="Collapsed"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
            ItemTemplateSelector="{StaticResource FileFolderInformationTemplateSelector}"
            SelectionMode="None"/>

//获得数据源
protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            var queryOptions = new QueryOptions();
            queryOptions.FolderDepth = FolderDepth.Shallow;
            queryOptions.IndexerOption = IndexerOption.UseIndexerWhenAvailable;
            queryOptions.SortOrder.Clear();
            var sortEntry = new SortEntry();
            sortEntry.PropertyName = "System.IsFolder";
            sortEntry.AscendingOrder = false;
            queryOptions.SortOrder.Add(sortEntry);
            sortEntry = new SortEntry();
            sortEntry.PropertyName = "System.ItemName";
            sortEntry.AscendingOrder = true;
            queryOptions.SortOrder.Add(sortEntry);

            var itemQuery = KnownFolders.PicturesLibrary.CreateItemQueryWithOptions(queryOptions);
            const uint size = 190; // default size for PicturesView mode
            var fileInformationFactory = new FileInformationFactory(itemQuery, 
                              ThumbnailMode.PicturesView, size, ThumbnailOptions.UseCurrentScale, true);
            itemsViewSource.Source = fileInformationFactory.GetVirtualizedItemsVector();
        }

public class FileFolderInformationTemplateSelector : DataTemplateSelector //启用应用程序级别的自定义模板选择逻辑。
    {
        public DataTemplate FileInformationTemplate { get; set; }
        public DataTemplate FolderInformationTemplate { get; set; }

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            var folder = item as FolderInformation;
            return (folder == null) ? FileInformationTemplate : FolderInformationTemplate;
        }
    }

显示结果：