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?
Doug,
Apologies, by database points I simply mean rows in the database that represent an item to be displayed in the ui.
Ray / Sushant,
Thanks for taking the time to answer, I'll have a go at both these approaches.
Si
Here is an easy way to do this:
Create a DataPoint class, including "Name", "Type" and "Value" fields
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).
Create a UIEditor class deriving from Window that exposes a CurrentForm property that is initially a blank Canvas
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)
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).
In your DataPointView's XAML, display the data point's name and value.
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.
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.
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
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.
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 Rows that can be persisted
Columns can be added/deleted/rearranged on the fly.
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.
Related
I am working on a project in which I am using a property grid to display the properties of the selected control.
The Property Grid is fixed to the left edge of the container and in the rest of the space I have the form I am designing.
On clicking a control on the form, the specific control’s property is getting selected.
In the above figure, I have selected the textbox and the textbox’s properties get shown on the propertygrid.
Here if you observe, by default, the Name property is highlighted as well.
Is there some way to unselect this property programmatically?
I have tried some suggestions online but none have helped. I am not able to find find a way to remove all selections from the PropertyGrid, but its behaviour seem to be different form a DataGrid...
Here is why I need this...
On selecting a control, if a property in the property grid is selected, then the property is getting modified.
For example, If i cut the control using Ctrl + X, the selected value in property grid is getting cut which in some cases is forcing user to set the property before modifying anything on the form.
I have tried selecting multiple controls, but in that case alse the selected property seems to be persistent
Since PropertyGrid uses DefaultProperty to select a property in its grid, as an option you can set DefaultProperty attribute at run-time for your object to a non-browsable property, for example:
this.propertyGrid1.SelectedObject = null;
TypeDescriptor.AddAttributes(someControl,
new Attribute[] { new DefaultPropertyAttribute("Site") });
this.propertyGrid1.SelectedObject = someControl;
Well, what you are trying are hacks. It is never a good idea to do such hacks particularly if you are not the only person that use the software.
In your case, the focus should be on the designer while you interact with it. So if the user press Ctrl+X, the designer should respond to the keyboard and it should not have any effect on the property grid (as only one control can have the focus at the same time).
Thus it is up to you to make sure that your designer is focusable, that it has the focus when initially displayed, that it get the focus when you press the TAB key. Pressing the TAB key again should put the focus on the property grid so that user can interact with the grid without using the keyboard.
If you have more than these 2 controls, then obviously TAB should also stop at any appropriate controls. Also, it can be a good idea to have some direct shortcuts like F4 to (show and) activate the properties pane.
If you are not able to make it works, then the best compromise would be to use another windows for the properties grid. By using a distinct Tool windows for the properties, it should not respond to the keyboard when the main windows has the focus.
Here are some links that might help you:
Panel not getting focus
Control.Focus Method() — See Remarks section.
In any case, you should not prevent Ctrl+X to works as expected when the property grid has the focus and a property is selected. Users don't like software that do not follows UI conventions.
As a software developer, you should as much as possible ensure that your application follows standard behaviors. I recommend you that you take one or 2 extra days developing your software properly instead of doing hacks.
Often, compromise to gain a few days will never be fix and will be a pain for many years. Better to do it right from the start. Unselecting an item in the property grid is not an acceptable workaround. Your manager should not allows you to do that.
I came across a tutorial and some example code for an audio converter. You select the format you want to convert to from a drop down, and when you do all sorts of options appear in a previously blank area, different options based on the format you choose. It's called Audio Converter .NET and is from same author as Audio CD Ripper .NET. I can't find the tutorial, but here is a screenshot.
See how on the right there is extra controls that are not on the left. I was experimenting trying to add another category. I added it to the dropdown, but am unsure how to make it so certain fields come up when it is selected.
I understand that they create those controls for those items, but I don't see how they call the correct one when the combo box selects something. I see controls are created, but if I try to duplicate the controls into another entry in the combo box they don't show up for either the new or old one I was duplicating from.
What's the best way to go about achieving something like this?
Thanks
The easiest way is to create the controls needed for every option in the dropdown inside a panel, and simply turn it's visibility property from false to true whenever it's corresponding option is selected using the combobox's SelectedIndexChanged event handler. (And don't forget to turn the current visible panel's visibility to false)
I have a (non MVVM) WPF C# application that evaluates oil and gas wells that I want to refactor to MVVM. One window shows the tabular information and another window shows the graphical rendition of the same data. Both have navigation buttons to move from well to well.
How can I have record selection changes in one window automatically change the selected record and datagrid focus in the other window using MVVM without having the ViewModels know the properties of the windows. Currently Window One shares the listview selected item property of the other Window.
You want Mode=TwoWay on your binding paths, with an INotifyPropertyChanged event on your objects. This should update every element bound to the data collection.
Check out http://msdn.microsoft.com/en-us/library/system.windows.data.bindingmode.aspx for more information on the Binding Modes as well as implementing INotifyPropertyChanged events.
I have a MVVM (Prism) application that I need to implement a master details screen wheer the master is a listview and the details is displayed next to it. Read-only seems easy enough (haven't done it yet but I've got my head around WPF binding) but edit/add confuses me.
How to I make it so the master is not updated until the details is saved?
How do I make it so you can't change the master's current selection while in edit/add mode?
I've been googling a plenty but have not found any meaty examples of this.
Thanks.
PS: This view is a child view on a larger screen. This is why I want both master and detail together.
You certainly can do this, though in my opinion such a UI design fails to harness the full power of WPF. Old WinForms UIs usually didn't update most of the application until data was saved to SQL Server (or wherever) because they didn't have real business objects and a powerful binding system like WPF. Trying to copy WinForms limitations within WPF seems like a step backward to me. Why not show the latest data everywhere it is visible in the UI, including in the master view? Also, why not allow the user to edit multiple items before saving, for example marking any edited but unsaved item with an animated marker in the master view? Combine these with a generalized undo and you have a better design and more intuitive for the user.
However if your business requirements make it absolutely necessary, here is how to do it:
Preventing changes to data from being visible outside the detail until it is saved
Upon entry into your "edit/add mode", make a copy of the data objects and set your detail view's DataContext to the copy instead of the live object. When the data is "saved", copy the data from the shadow copy back into the live object and set your detail view's DataContext back where it should be.
Preventing the master's current selection from changing while in edit/add mode
Two possibilities:
During edit/add mode, change the master view to disallow mouse hit testing or keyboard focus
When edit/add mode begins, capture the "current selection" then add an event handler that watches for "current selection" changes and immediately changes the selection back to what it was. When edit/add mode ends, remove the handler. This handler can be conveniently coded using a lambda expression and using a closure on a local variable to store the current selection.
Thanks for the answer. Now I've re-read my message, I see it is rather vague. I have a screen that edits an object which contains multiple lists of other child objects. I've implemented these as different tabs in a tab control. One of these tabs edits the comments, so I wanted to display a list of comments with an edit panel for the current selection next to the list. The user could then use add, edit or delete buttons to update the list. I wanted to do this in a pure(ish) MVVM way.
I came up with the following design which seems to work with minimal hacks.
The View includes a list of the child objects simply as a ListView bound to an observable collection within the ViewModel. I included a child object buffer – this is used to buffer changes until they are ready to be saved back to the list (or thrown away).
The View also includes an edit panel bound to the buffer object in the ViewModel. The buffer is updated whenever the list view’s current selection changes using a deep copy. I tried using data binding on the Selecteditem property but the set was never called, so a small code-behind method was added to force the property to be updated when the selection was changed.
The list view and edit view are mutually exclusive. In theory you could hide the disabled one, perhaps using a flip screen. As a general pattern, it is better for my app to have both visible at the same time as the edit panel may show extra information not shown in the list view. The choice as to which panel is enabled is controlled by binding IsEnabled to a ViewModel property like IsEditCommentMode.
Commands to manage the list have to be added, these are New, Editand Delete. Note that Add and Edit will set set up the buffer then set IsEditCommentMode to true. These list management commands are only available when IsEditCommentMode is false.
The edit panel implements Save and Cancel commands, they are only be enabled when IsEditCommentMode is true. When Save is executed, it should copy from the buffer to the list (either add or update) and fire the change notification. Finally, it should set IsEditCommentMode to false.
This all works well and does not seem to violate any MVVM tenents (in my humble but often flawed opinion).
I'm trying to create a DataGridView cell class which hosts a control (all the time, not just while editing). So far, my approach has been to add the control to the grid and try to synchronise its position with that of the cell.
Would it be possible instead to keep the cell offscreen, route mouse and keyboard events to it, and paint it onto the cell?
UPDATE: By 'offscreen', I don't mean that it should be added to another control such that it isn't displayed; I mean that it should never be added to another control at all.
You can create a control without adding it to the form, then using it as the Cell editor whenever you need to. Usually with grids, when you click on a cell to edit it, it's going to either create a new control and put it in the right place, or it's going to use an existing control. You can make this process a lot easier by creating your own custom cell / column types. See this MSDN page: http://msdn.microsoft.com/en-us/library/7fb61s43.aspx.
Most grids (including DataGridView and 3rd Party Grids) have a facility for adding custom cells.