creating a custom user interface in WPF

Question

I have a SQL database holding a number of numeric and text values that get updated regularly. The exact number/type/names of these data points can change depending on the source of the database writes.

I would like to create a user interface editor, where the user can add database points to the UI and arrange them and format them as they want. If a new point is added to the database they can right click on the UI and say "add this point" and choose from a list of database points.

I'm looking for some pointers on where to start on creating this editor application, could something clever be done using XAML to dynamically create std WPF controls at runtime?

Answer 1

Doug,

Apologies, by database points I simply mean rows in the database that represent an item to be displayed in the ui.

Answer 2

Here is an easy way to do this:

1. Create a DataPoint class, including "Name", "Type" and "Value" fields
2. Create a DataPointView UserControl that exposes a Name property and a read-only DataPoint property. When the Name property is set, load the DataPoint from the database. Optionally use a timer to periodically reload the DataPoint (or subscribe to update notifications from your database).
3. Create a UIEditor class deriving from Window that exposes a CurrentForm property that is initially a blank Canvas
4. Add handlers for ApplicationCommands.Open, ApplicationCommands.Save, etc to use XamlParser and XamlWriter to load/save the layout from/to a file on disk (or a database)
5. In your UIEditor XAML, include a ContentPresenter bound to the CurrentForm property to hold the UI being edited. Also any other controls desired (Save button, Open button, palette, etc).
6. In your DataPointView's XAML, display the data point's name and value.
7. In your UIEditor class subscribe to mouse preview events OnPreviewLeftButtonDown, etc. Whenever a mouse move event follows a mouse down event on a DataPointView, capture the mouse and begin adjusting the DataPointView's Left and Top coordintates - this allows the user to drag the DataPointView around the Canvas.
8. In your DataPointView's XAML, include a ContextMenu whose ItemsSource is bound to "{Binding AvailablePoints, RelativeSource={RelativeSource FindAncestor,my:UIEditor,1}}", and make sure the AvailablePoints property of your UIEditor class returns a list of MenuItems with names of available data points and appropriate command an command parameter.
9. In your handler for the command bound in the context menu, add a new DataPointView to your CurrentForm Canvas and set its Name from the name given in the CommandParameter
10. Set Focusable=true on the DataPointView objects, and handle ApplicationCommands.Delete by deleting the focused DataPointView.

With this code written:

• You can allow your users to edit your UI by showing a UIEditor window.
• You can display your UI without the editing features by simply loading it from disk using Application.LoadComponent and displaying it in a window.

Answer 3

use WPF DataGrid available as WPF ToolKit in .NET 3.5 or it is standard for .NET 4.0. It has the following features:

1. Highly customizable Data columns
2. Use Editable Rows that can be persisted
3. Columns can be added/deleted/rearranged on the fly.
4. Can directly load column names from database

and a lot more.

I think that would be perfect.

Please mark the answer if it seems helpful. Thanks.

Answer 4

Ray / Sushant,

Thanks for taking the time to answer, I'll have a go at both these approaches.

Si