creating a nice GUI in WPF

Question

Hi, I need to create a desktop CAD application which essentially should have a nice modern GUI. I am thinking of creating a WPF application so that I can have a rich user interface. Could some one suggest me a well designed desktop application GUI framework in WPF, please? I found some cool GUI in this video http://channel9.msdn.com/posts/Psychlist1972/Pete-at-PDC09-WPF-3d-Awesomeness-with-Tor-and-Robby/ but not sure of the controls they used in their application. Does any one have an idea which controls did they use there?

Is there any property grid control in WPF? I tried to use the grid in Windows Forms. Customizing this grid to suit my requirement seems to be difficult. It shows all the properties of the object straight from the very base class to the most derived. Any help is highly appreciated.

Many thanks

Answer 1

With WPF, a lot is possible. You'll find a wide variety of looks to various applications due to the fact that, unlike Windows Forms, WPF can be templated and styled much like HTML. Actual designers can easily bring a look and feel which is very difficult to accomplish in Windows Forms. Naturally, since it is so flexible, the look of highly styled applications will vary a great deal from application to application.

That said, there are some very good 3rd party controls. All the usual suspects have control libraries for WPF: Telerik, Infragistics, ComponentOne, Actipro, Devxpress just to name a few. Specifically, Actipro's Property Grid is very nice. There is also an open source one which I haven't evaluated, so can't speak to. WPF can also be "themed" by applying pre-compiled styles to controls. There are example themes found here: http://wpfthemes.codeplex.com/.

Finally, WPF's strengths are not fully realized until you learn how to separate the view which gets drawn and managed by WPF and the logical abstraction of the view, called the view model. Josh Smith has a great article about this pattern, known as Model-View-ViewModel, here: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx.

Answer 2

I think Microsoft saw no point in including a PropertyGrid control in WPF because it is so trivial to create your own, and if they created the control it would be harder to style.

To create your own PropertyGrid, just use a <ListBox> with an <ItemsTemplate> that has a <DockPanel> containing a <TextBlock> docked to the left for the property name and a <ContentPresenter> for the value editor, then enable grouping on the Category property.

The only code you need to write is the code that reflects on the object and creates the list of properties.

Here is a rough idea of what you would use:

DataContext =
  from pi in object.GetType().GetProperties()
  select new PropertyGridRow
  {
    Name = pi.Name,

    Category = (
      from attrib in pi.GetCustomAttributes(false).OfType<CategoryAttribute>()
      select attrib.Category
    ).FirstOrDefault() ?? "None",

    Description = (
      from attrib in pi.GetCustomAttributes(false).OfType<DescriptionAttribute>()
      select attrib.Description
    ).FirstOrDefault(),

    Editor = CreateEditor(pi),

    Object = object,
  };

The CreateEditor method would simply construct an appropriate editor for the property with a binding to the actual property value.

In the XAML, the <ListBox.ItemTemplate> would be something like this:

<DataTemplate>
  <DockPanel>
    <TextBlock Text="{Binding PropertyName}" Width="200" />
    <ContentPresenter DataContext="{Binding Object}" Content="{Binding Editor}" />
  </DockPanel>
</DataTemplate>

I'll let you fill in the rest of the details.