SPList Image and SPFile Icon

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.