BSA – WPF Property Editor – Part 1

To get a feeling of the challenges with WPF I want to share the work to create a functional Property Editor in WPF. A Property Editor is a complex component, so it’s worth examining the challenges – that said – I am only exploring one path here – Both QML and WPF have multiple alternatives on getting this done.

The option that got my attention is StackPanel. In QML I just used a similar component and stacked 2 columns with label/editors. This will not work in Forms due to flicker on the screen, but it should work with WPF. To start I create a PropertyRow component consisting of 3 rows – a left, wide border, a label and a edit column. PropertyRow itself will just be a header as I extend the label to right, but I can subclass this into more specialized property rows:

  • PropertyRowString – Edit a single line text.
  • PropertyRowNumber – Edit a number.
  • PropertyRowCheckBox – Edit a bool using a checkbox.
  • PropertyRowComboBox – Select a value from a list using ComboBox.
  • aso – the list here will grow.

The 2nd thing is to make StackPanel scrollable – woops that’s just setting a flag in StackPanel and it’s done.

The 3rd thing I would like is animation on the same level as in QML – if you scroll in QML it animate the action making the UI feel so more alive. This is not critical, but it is one of the details I really liked with QML, so I will look into how to get this in WPF as well.

As I have decided to use WPF “as is” with light colors and are not digging into Dark Theme I should have a much more free ride with WPF.

The first, early version showing only 4 rows of PropertyRow can be seen above.

This last pic show how the PropertyRow look in Visual Studio – somehow I missed the border lines only. At this point I must admit that doing this excact task in QML was easier. But, that might be because I know how to do this in QML and is a bit newbie on inheritance with XAML involved yet.

Adding a header row and manually adding a Scrollbar column the Property Editor look like below. I can work with this if I have to, but I think I can avoid the manual scrollbar – lets see later.


Categories: HMI

Leave a Reply