locked
thumbnails RRS feed

  • Question

  • Hi,

    In My WPF application i have a set of file which am loading into my application and also i have some screenshots. now i would like to add those images as a thumbnail to those files. is it possible to do so? please help me

    Thanks,

    Monday, August 13, 2012 3:01 PM

Answers

  • ... 

    Howevery,

    ...

    Have a nice day.


    Annabella Luo[MSFT]

    I have learned a new word today! I will file it with "okely dokely" and "toodily pip" :D

    Thank you Annabella for enlightening my day!

    Jay, I still don't understand where you are stuck. Nothing's impossible. 

    This is WPF forum right? So we're not talking about butchering the Windows FileOpenDialog itself, but making a similar popup window with file list and pretty thumbnails. Like I demonstrated above.

    This is just a Window control, with a ListBox, just as I have shown above.

    Instead of binding image to Extension, as I miss-assumed, bind to Name, then in the converter:

        public class ConvertFileImage : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value as string == string.Empty) return null;
    
                var file = @"Thumbs/" + value + ".png";
                ImageSource src = new BitmapImage(new Uri(file, UriKind.Relative));
                return src;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }

    So you use a "naming convention", where you save thumbnail images the same name as the ses file:

    sessionfile1.ses  = sessionfile1.png

    sessionfile2.ses = sessionfile2.png

    Then the converter above strips the extension and add the image extension and returns the actual image from the Thumbs folder.

    Regards,
    Pete


    #PEJL



    Tuesday, August 14, 2012 7:29 PM

All replies

  • It depends how you are listing the files.

    If this was a ListBox, or ComboBox, you can edit the ItemTemplate

    If this is something like a ListView, you edit the column CellTemplate.

    If your files are in a custom class like "MyFileClass" that has a FileName property, you would add a SnapshotImage property.

    Then you just bind thgis to an image in the template.

    As you do not give any hints as to your implementation, all I can do is give you an example, and assume you can extrapolate from that

    Otherwise, please post your own example

    <Window x:Class="WpfApplication19.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525" xmlns:local="clr-namespace:WpfApplication19">
        <Window.Resources>
            <local:ConvertFileImage x:Key="ConvertFileImage"/>
        </Window.Resources>
        <Grid>
            <ListView ItemsSource="{Binding Files}">
                <ListView.View>
                    <GridView>
                        <GridView.Columns>
                            <GridViewColumn Width="50">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Image Source="{Binding Extension, Converter={StaticResource ConvertFileImage}}"/>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                            <GridViewColumn DisplayMemberBinding="{Binding Name}"/>
                        </GridView.Columns>
                    </GridView>
                </ListView.View>
            </ListView>
        </Grid>
    </Window>
    


    using System;
    using System.Windows;
    using System.Windows.Data;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.IO;
    
    namespace WpfApplication19
    {
        public partial class MainWindow : Window
        {
            public FileInfo[] Files { get; set; }
    
            public MainWindow()
            {
                InitializeComponent();
    
                var di = new DirectoryInfo("c:\\");
                Files = di.GetFiles();
    
                DataContext = this;
            }
    
        }
    
        public class ConvertFileImage : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value as string == string.Empty) return null;
    
                var file = @"Media/file_" + value.ToString().Substring(1) + ".png";
                ImageSource src = new BitmapImage(new Uri(file, UriKind.Relative));
                return src;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }
    }
    

    This is a working example that lists all the files on C drive and assignes an image depending on a naming convention.

     

    Your example, being thumbnails of the files, implies you need to create your own class like "MyFileClass", which holds all the properties you need, including the Thiumbnail Image Uri. Then using similar code to mine above, you could just pass the collection into a listbox and generate the Image from the ThumbnailUri property. use a converter like I show to convert Uri into ImageSource.

     

    Good luck,
    Pete


    #PEJL

    Monday, August 13, 2012 3:50 PM
  • Hi,

    Sorry for not giving you much details. let me explain. in my application i have a openfile dialog to open some files and display those files. so now i wanted to attach a image with those files according to the user interest . so that it will be easy to understand what that file actually contain. for that i have developed a dialog which accept a file and a image now i would like to attch both so the image appear as a thumbnail for the file. i hope i made myself clear.

    is this possible? because i found something similar in MSDN making a thumbnail for pdf.

    Thank you,

    Tuesday, August 14, 2012 6:04 AM
  • Very sorry Jay, maybe it's just me, but I'm still struggling to understand the problem, or at least where the problem is within your request.

     

    Maybe another reader may be able to understand, but if you provide some code and images, we may better understand exactly what you need.

    The more detail and supporting code/media that you post, the quicker we can understand and resolve.

     

    Best regards,
    Pete


    #PEJL

    Tuesday, August 14, 2012 10:24 AM
  • Hi,

    http://www.codeproject.com/Articles/5887/Generate-Thumbnail-Images-from-PDF-Documents

    similar one am trying, so i have some .ses files and a screenshot of that . and i created a thumbnail image from these files. but now i would like to display this thumbnail image on my .ses files. so that one can see , what is inside that file. something similar when you have a image , once you increase the size in the windows explorer , you can see the image inside that. similar one am trying . i hope this time am clear.\

    thank you

    Tuesday, August 14, 2012 10:56 AM
  • Hi jay88,

    Do you mean you want to create a OpenFileDialog control that can show both file icon and relate image with the file in it?

    In my opinion, due to OpenFileDialog is to open local file directly in windows explore, we can't put a local file into a specific data contruct, so it's a pity that we can't achieve your goal. Howevery, if you're open file in your app such as there is a file list in Listbox or datagrid in your app, thus when user click on one item of them, we can just get the selecteditem, and set the selecteditem's value to something like OpenFileDialog control to achieve your goal.

    Hope it helps.

    If you have any additional questions, please feel free to let me know.

    Have a nice day.


    Annabella Luo[MSFT]
    MSDN Community Support | Feedback to us

    Tuesday, August 14, 2012 11:26 AM
  • Hi,

    Every file type has a preview image, or a cover image in windows, now i would like to set a custom preview or cover image for each of my files. so in the opendialog the user can see each file with a image on that, so that it is easy to understand than just a filename. Since you told it is not possible . looking forward for the other option you have mention.

    Thank you,

    Tuesday, August 14, 2012 11:41 AM
  • ... 

    Howevery,

    ...

    Have a nice day.


    Annabella Luo[MSFT]

    I have learned a new word today! I will file it with "okely dokely" and "toodily pip" :D

    Thank you Annabella for enlightening my day!

    Jay, I still don't understand where you are stuck. Nothing's impossible. 

    This is WPF forum right? So we're not talking about butchering the Windows FileOpenDialog itself, but making a similar popup window with file list and pretty thumbnails. Like I demonstrated above.

    This is just a Window control, with a ListBox, just as I have shown above.

    Instead of binding image to Extension, as I miss-assumed, bind to Name, then in the converter:

        public class ConvertFileImage : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                if (value as string == string.Empty) return null;
    
                var file = @"Thumbs/" + value + ".png";
                ImageSource src = new BitmapImage(new Uri(file, UriKind.Relative));
                return src;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }

    So you use a "naming convention", where you save thumbnail images the same name as the ses file:

    sessionfile1.ses  = sessionfile1.png

    sessionfile2.ses = sessionfile2.png

    Then the converter above strips the extension and add the image extension and returns the actual image from the Thumbs folder.

    Regards,
    Pete


    #PEJL



    Tuesday, August 14, 2012 7:29 PM