Search
Friday, March 02, 2001 ..:: Home ::.. Register  Login
   Calendar  
     
  
   Search  
     
  
   Disclosure  
     
  
   TechTidBits (Blog)  

Ever create a class but can't quite figure out how to easily get user input?

Nov 23

Written by:
Monday, November 23, 2009 10:48 PM  RssIcon

So you've created a custom class for special information, fantastic!  But now, how to you get your users to input data?  Ya, sure you could create a new data entry form, but is there an easier way?  Read on for a cool tool Visual Studio has in it's toolbox for you!

Visual Studio's PropertyGrid controlSo you've just spent all morning slaving over a very cool new custom information class!  Awesome!  Now, how do you get user input?  How can you easily display values the user entered?  Yup, you could create your own form, but this things due tonight!  What are you gonna do?  Why not check out a cool control called PropertyGrid?

You've used that control before with WinForms applications, even ASP.NET apps I'm sure!  Over on the right is a sample screen shot of what you might see when you select a main form for an application.  The cool thing is, with very little effort, you too can gain from the Property Grid benefits.

  • Display Name/Value pairs
  • Custom editors for known datatypes (check out BackColor and BackgroundImage properties)
  • UI already created for you!
  • With one Attribute you can get the "help" description at the bottom.
  • With one Attribute you can get the groupings like in  Appearance, Behaviour, Data, Layout, etc

Those are just a few of the benefits of using the PropertyGrid.  But the biggest is people are already familiar with the metaphor, even for non-devs, they just understand what's going on there!  It's beautful.  SNIFF, let me get my kleenex, ssssniiifffff.....it's a beautiful thing isn't it?

Ok, ok, all joking aside.  It's one tool you can use to quickly give users information and let them edit their settings as well.  Check out a quick demo I whipped up for a custom BlogProperties class I created.  When I select the bottom left hand side picture, I see the PropertyGrid populated with the appropriate BlogProperties fields and data for modifications.

Property Grid with BlogProperties custom class

The BlogProperties class looks like this (below).  What's important isn't the individual properties, but the Attributes I peppered the code with.  DefaultProperty, Description, and Category are all very important and lend themselves to organizing how your custom class is displayed in the PropertyGrid.  The Category attribute is used for grouping and the Description is used in the bottom as a form of help.  You'll also notice an attribute named System.ComponentModel.Browsable, this is to show/hide that property in the PropertyGrid, in this case, I always support Microsoft (well, most of the time haha) so I just set the default and then don't show it in the grid.

namespace PCHenry.ButtonExample
{
  [DefaultProperty( "BlogName" )]
  public class BlogProperties
  {
    #region Properties
    [Description( "The name of the blog." )]
    public string BlogName
    {
      get;
      set;
    }

    [Description( "URL of the website." )]
    [Category( "URLs" )]
    public Uri WebsiteUri
    {
      get;
      set;
    }

    [Description( "URL of the RSS feed." )]
    [Category( "URLs" )]
    public Uri RssUri
    {
      get;
      set;
    }

    [Description( "Additional information about the blog." )]
    [Category( "Optional" )]
    public string Description
    {
      get;
      set;
    }

    private bool supportsMicrosoft = true;
    [System.ComponentModel.Browsable( false )]
    public bool SupportsMicrosoft
    {
      get
      {
        return supportsMicrosoft;
      }
      set
      {
        supportsMicrosoft = value;
      }
    }

    private Color backgroundColor = Color.Red;
    [Description( "When displaying use this background color." )]
    [Category( "Optional" )]
    public Color BackgroundColor
    {
      get
      {
        return backgroundColor;
      }
      set
      {
        backgroundColor = value;
      }
    }
    #endregion

    #region Constructors
    public BlogProperties( string blogName, Uri websiteUri )
    {
      this.BlogName = blogName;
      this.WebsiteUri = websiteUri;
    }

    #endregion
  }
}

The key PropertyGrid property is the SelectedObject.  This is what you set to display the appropriate properties.

The next application I have created is a bit more involved to illustrate displaying dynamic properties but the concepts are exactly the same!

Custom stamps application 

Here are some of the key characteristics of this application:

  • I have two custom classes Stamps which extend UserControl, this is what gets displayed and is responsible for drawing itself, and StampInfo which has JUST the stamp information I'm interested in displaying to the user to set/edit (thanks SG for suggesting to break that out)
  • There is more work involved with the rest of the app than with displaying the custom properties when using the PropertyGrid, so it did what I wanted, saved me time!

Now you know how to use the PropertyGrid, it's time to grab a coffee and get coding!

 

Resources

Code: http://www.pchenry.com:8080/svn/blog/trunk/2009/PropertyGridsWithCustomObjects

MSDN: PropertyGrid Class

MSDN: Getting the Most Out of the .NET Framework PropertyGrid Control

Tags:
Categories:
Location: Blogs Parent Separator TechTidBits

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Add Comment   Cancel 
     
  
Copyright 1999-2012 by PCHenry.com   Terms Of Use  Privacy Statement