Click here to Skip to main content
Click here to Skip to main content
Go to top

SPList Image and SPFile Icon

, 2 Apr 2010
Rate this:
Please Sign up or sign in to vote.
Take advantage of SPList.ImageUrl and SPFile.IconUrl to improve the user experience of WinForm apps for SharePoint.

If you ever wanted to create a WinForms app for SharePoint that displays or interacts with lists, document libraries and files, then taking advantage of the SPList.ImageUrl and SPFile.IconUrl would help improve the user experience for your app.

Below is an app that displays all the webs, lists, document libraries and files in a selected site collection.

We can improve this a little bit by adding icons (taken from TEMPLATE\IMAGES folder on a SharePoint installation) for some of the nodes, as follows:

However, this is not good enough since we'll have all lists with the same icon, all doc libs with the same icon and so on… Here is the same app taking advantage of the list image URL and file icon URL.

For the list or document library, this is done by using the SPList.ImageUrl attribute. Here is how the tree node was added:

TreeNode listNode = parentNode.Nodes.Add(list.Title);
listNode.SelectedImageIndex = listNode.ImageIndex = 
		GetImage(GetImageFullPath(list.ImageUrl));

For the file, this is done by using the SPFile.IconUrl attribute. Here is how the tree node was added:

TreeNode fileNode = parentNode.Nodes.Add(file.Name);
fileNode.SelectedImageIndex = fileNode.ImageIndex = 
	GetImage(GetImageFullPath(file.IconUrl));

The GetImageFullPath method simply gets the full path of the image:

/// <span class="code-SummaryComment"><summary>
</span>/// Gets the SharePoint full path from the relative path
/// <span class="code-SummaryComment"></summary>
</span>/// <span class="code-SummaryComment"><param name="relativePath"></param>
</span>/// <span class="code-SummaryComment"><returns></returns>
</span>private static string GetImageFullPath(string relativePath)
{
    //  Get image name
    string imageName = Path.GetFileName(relativePath);

    //  Get SharePoint IMAGES folder path
    string fullPath = SPUtility.GetGenericSetupPath(@"TEMPLATE\IMAGES");

    return Path.Combine(fullPath, imageName);
}

Given that now we have the full file system path to the image, all we have to do is create an image from the file path, then add it to the ImageList of the TreeView. The GetImage() method below does the job:

/// <span class="code-SummaryComment"><summary>
</span>/// Gets the image of the sp element from specified URL
/// <span class="code-SummaryComment"></summary>
</span>/// <span class="code-SummaryComment"><param name="url"></param>
</span>/// <span class="code-SummaryComment"><returns></returns>
</span>private int GetImage(string url)
{
    //  Get image index from the Image List
    int imageIndex = spImageList.Images.IndexOfKey(url);

    //  Image is not in the list, so add it
    if (imageIndex == -1)
    {
        //  Get the image from specified path
        Image image = Image.FromFile(url);

        //  Add the image to the image list
        spImageList.Images.Add(url, image);

        //  Get its index
        imageIndex = spImageList.Images.Count - 1;
    }

    return imageIndex;
}

Here is how the final app looks like. Click on the image below to download the source and EXE.


Filed under: SharePoint Tagged: IconUrl, ImageUrl, SPDocumentLibrary, SPFile, SPList

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ali BaderEddin
Software Developer Microsoft
United States United States
http://mycodelog.com/about/

Comments and Discussions

 
GeneralMy vote of 5 PinmemberDilip Nikam27-Sep-12 5:48 
GeneralI am started in C# Pinmemberengwaleed024-Mar-10 12:23 
Blush | :O Thanks for you
I am from syria
I am studying communication
I ask you if you have anything for application about Communication in C#
 
I am started in C#
 

I hope to help me
 
thanks Blush | :O
GeneralRe: I am started in C# PinmemberAli BaderEddin24-Mar-10 14:51 
GeneralNice article PinmemberMohd Arshad (Sam)19-Mar-10 10:26 
GeneralRe: Nice article PinmemberAli BaderEddin19-Mar-10 11:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 3 Apr 2010
Article Copyright 2010 by Ali BaderEddin
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid