Have Geek Brain

Creating a user interface in WPF

I have a SQL database containing a range of numeric and text values ​​that are updated regularly. The exact number / type / names of these data points can vary depending on the source of the database record.

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

I'm looking for some pointers on where to start building this editor app, could there be something smart that could be done using XAML to dynamically create WPF std elements at runtime?

Arc,

Apologies, on database points I just mean rows in the database that represent the item to be displayed in the ui.

Ray / Sushant,

Thanks for taking the time to answer, I will go for both of these approaches.

Si

+2


a source to share


2 answers


Here's a simple way to do it:

  • Create DataPoint class including Name, Type and Value fields
  • Create a UserControl DataPointView that provides a Name property and a read-only DataPoint property. With the Name property set, load the DataPoint from the database. Optionally, use the timer to periodically reload DataPoint (or subscribe to update notifications from your database).
  • Create a window-derived UIEditor class that exposes a CurrentForm property, initially consisting of a blank canvas
  • Add handlers for ApplicationCommands.Open, ApplicationCommands.Save, etc. to use XamlParser and XamlWriter to load / save layout from / to file on disk (or in database).
  • In your UIEditor XAML, include the ContentPresenter bound to the CurrentForm property to keep the user interface editable. Any other controls are also required (Save button, Open button, palette, etc.).
  • In your XAML DataPointView, display the name and value of the data point.
  • In your UIEditor class, subscribe to mouse preview events OnPreviewLeftButtonDown, etc. Whenever a mouse move event follows a mouse down event in the DataPointView, dock the mouse and start adjusting the Left and Top coordinates of the DataPointView - this allows the user to drag the DataPointView around the canvas.
  • In your DataPointView 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 MenuItems list with the names of the available data points and the corresponding command command parameter.
  • In your handler for the command associated in the context menu, add a new DataPointView to your Canvas CurrentForm and set its name from the name given in the CommandParameter
  • Set Focusable = true for DataPointView objects and handle ApplicationCommands.Delete deleting the focused DataPointView.


With this code it is written:

  • You can allow users to edit their user interface by showing the UIEditor window.
  • You can display your interface without editing functionality by simply loading it from disk using Application.LoadComponent and showing it in a window.
+3


a source


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

  • Highly customizable data columns
  • Use editable lines that can persist
  • Columns can be added / removed / rearranged on the fly.
  • Can directly load column names from database

and much more.



I think that would be great.

Please check the answer if you find it helpful. Thanks.

0


a source






More articles:


All Articles