Saturday, June 11, 2011

ViewDetails control for WPF

A lot of the work I do on Stoffi is to create new controls that will fit into our application. The standard set of controls that .NET offers usually lacks a number of features or they don't look really native and don't blend into Windows as much as they could.

One of these controls is our ListView where we show the tracks of Stoffi. The last week I've been working on taking all that code and put it into a separate control which can be used anywhere in Stoffi, for example to list the sources.

At Stoffi we believe in sharing and promoting good code. That's why I want to share this new control with my fellow developers. The control is not done yet and there's still a lot of stuff to improve on it. But for those of you who want a ListView that looks like the Details view in Windows Explorer and want some extra features such as drag and drop and column toggle, you can save several hours of work by using our code.

You can download the two files here and here. In order to use it you just need to put it inside your project.

The control has the following features:

  • Explorer like look
  • Drag and drop (multiple items, drop target)
  • Index column
  • Column toggle
  • Import/export of configuration
  • Active items
  • Strike through
Using the control is really easy.

// simple list with two column
Stoffi.ViewDetails myList = new Stoff.ViewDetails();

myList.AddColumn("Foo");
myList.AddColumn("Bar");


You can store all configuration in a special configuration structure which allows for easy storing of the configuration between sessions.

// saving the configuration
Stoffi.ViewDetailsConfig config = new Stoffi.ViewDetailsConfig();

config.SelectedIndices = new List<int>();
config.Columns = new List<Stoffi.ViewDetailsColumn>();
Properties.Settings.Default.MyListConfig = config;

Stoffi.ViewDetails myList = new Stoff.ViewDetails();
myList.Config = Properties.Settings.Default.MyListConfig;
myList.AddColumn("Foo");
myList.AddColumn("Bar");

You can now call Properties.Settings.Default.Save() at any time to save the configuration.

The items used as source must be derived from our special item class.

class MySource : Stoffi.ViewDetailsItemData
{
  public string Foo { get; set; }
  public string Bar { get; set; }
}

That's it! :)

Some stuff that is planned for the future:
  • Icons
  • Type to search
  • Ability to change settings after creation
  • A tutorial
  • A package
  • Classic theme
Anyway, I will work more on it as I find the time. You will see the control in action in our next release.

All the code is documented so you can learn as you code.

Have fun!

95MCPSHEY7MC