locked
how to show local file icons in a gridview control? RRS feed

  • Question

  • Hello,

    Sorry if it is already answered but I couldn't find what I am looking for. I am trying to show files in a directory with their associated file icons. I am new to programming in Window store apps. I already achieved to get and show the files in a gridview. But I couldn't show the icons. I think StorageFile.GetThumbNailAsync is used. But I am using ItemCollection object to fill the gridview and I think it doesn't support viewing local file icons. I need some advice about how to work with local files and enrichment of gridviews. I am using C# by the way.

    Thanks.



    • Edited by Shoqul Sunday, November 25, 2012 11:17 PM
    Sunday, November 25, 2012 11:14 PM

Answers

  • Hi,

    You could create a customized object which contains thumbnail and create a collection such as ObserableCollection<T> of the objects. Then Bind it to GridView and use DataTemplate to display the thumbnail.

    The StorageFile won't get the thumbnail unless you call GetThumbNailAsync method, so you have get it by yourself. Here is the code:

    XAML:

    <Grid>
            <GridView Name="gw">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Height="100" Width="100" Source="{Binding Thumbnail}" Stretch="UniformToFill" />
                            <Viewbox Height="100">
                                <TextBlock Text="{Binding Name}" />
                            </Viewbox>
                            
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </Grid>

    C#:

     public MainPage()
            {
                this.InitializeComponent();
    
                getContent();
    
                
    
                
                
            }
    
            private async void getContent()
            {
                Myobj myobj = new Myobj();
                ObservableCollection<Myobj> datasource = new ObservableCollection<Myobj>();
                IReadOnlyList<StorageFile> files = await KnownFolders.PicturesLibrary.GetFilesAsync();
                foreach (StorageFile file in files)
                {
                    myobj.Name = file.DisplayName.ToString();
                    var tn = await file.GetThumbnailAsync(Windows.Storage.FileProperties.ThumbnailMode.PicturesView);
                    BitmapImage bi = new BitmapImage();
                    bi.SetSource(tn);
                    myobj.Thumbnail = bi;
                    datasource.Add(myobj);
                }
    
                this.gw.ItemsSource = datasource;
    
            }
    

    Hope this helps


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, November 28, 2012 11:54 AM

All replies

  • Hi,

    You could create a customized object which contains thumbnail and create a collection such as ObserableCollection<T> of the objects. Then Bind it to GridView and use DataTemplate to display the thumbnail.

    The StorageFile won't get the thumbnail unless you call GetThumbNailAsync method, so you have get it by yourself. Here is the code:

    XAML:

    <Grid>
            <GridView Name="gw">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Height="100" Width="100" Source="{Binding Thumbnail}" Stretch="UniformToFill" />
                            <Viewbox Height="100">
                                <TextBlock Text="{Binding Name}" />
                            </Viewbox>
                            
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </Grid>

    C#:

     public MainPage()
            {
                this.InitializeComponent();
    
                getContent();
    
                
    
                
                
            }
    
            private async void getContent()
            {
                Myobj myobj = new Myobj();
                ObservableCollection<Myobj> datasource = new ObservableCollection<Myobj>();
                IReadOnlyList<StorageFile> files = await KnownFolders.PicturesLibrary.GetFilesAsync();
                foreach (StorageFile file in files)
                {
                    myobj.Name = file.DisplayName.ToString();
                    var tn = await file.GetThumbnailAsync(Windows.Storage.FileProperties.ThumbnailMode.PicturesView);
                    BitmapImage bi = new BitmapImage();
                    bi.SetSource(tn);
                    myobj.Thumbnail = bi;
                    datasource.Add(myobj);
                }
    
                this.gw.ItemsSource = datasource;
    
            }
    

    Hope this helps


    Aaron Xue [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, November 28, 2012 11:54 AM
  • Thank you very much it Works, and I finally understand the mechanism.
    Thursday, November 29, 2012 6:37 PM