What XAML design strategy for master/detail views LOB apps

Question

I would like to present the user a grid with sales order lines. In this grid the user can enter an amount on each line to ship. When a Save button is pressed, all the modified lines will be processed.

+---+------------+---------+---------+--------+------------------+
| # | PartNumber | Ordered | Shipped | Descr. | Quantity to ship |
+---+------------+---------+---------+--------+------------------+
| 1 | A12356     | 10      | 5       | Wheel  | [ input field ]  |
+---+------------+---------+---------+--------+------------------+
| 2 | B54556     | 10      | 0       | Frame  | [ input field ]  |
+---+------------+---------+---------+--------+------------------+
                                                  [PROCESS BUTTON]

So the idea is the user can enter the amount to ship for multiple lines in one go and hit Process

So far so good.

What I'd like to achieve, is that the user is able to click the cells in this grid.

Click on PartNumber: A generic content element with part details will open
Click on ShippedQty: A generic content element will open with previous shipments.
etc.

I would like to re-use these generic content elements throughout my application.

(There are many different tables in which a user can click a PartNumber)

While viewing for instance the details of a PartNumber, the already modified input fields, scroll position, etc, have to remain intact in the master view (the table presented above).

My Question:

What would be the appropriate design strategy for this? In WinForm's I'd just open a new dialog with the details. This doesn't seem appropriate for UWP.

So far I thought of the following alternatives:

SplitView with two panes: (1:Master) a sales order line Page and (2:Detail) a details Page which content is (re)set depending in which column the user clicks.
- Pro: Can use Frame.Navigate() within details view.
ContentPresenter for which content is (re)set depending on whether the user clicks the PartNumber or Shipped Qty, etc.
ContentDialog or ModalDialog for the details content element.
- This doesn't seem to be the way ContentDialog is meant to be used. Only one ContentDialog can be open at any time and ContentDialog is by default dynamically sized depending on the UI elements within.
Are there any options I'm missing?

Some interesting reading: Does anybody havea sample for a solution like the mail client pictured in this link: msdn.microsoft.com/en-us/library/windows/apps/… msdn.microsoft.com/en-us/windows/uwp/layout/show-multiple-views github.com/Microsoft/Windows-universal-samples/tree/master/… — Jasper

Unknown Unknown · Accepted Answer · 2016-06-18T17:01:27

"This doesn't seem appropriate for UWP."

I don't see why it would not be. You have lots of options so its really more about how you want your UI to flow than about what framework you are using. My experience is with WPF... use as applicable. As mentioned it really depends on how you want your UI to look and how much work you want to put into it. In my case I wanted my components (part details screen, previous shipments screen) to be completely independent of the host page and to not interfere with navigation. Using a modal dialog window was a good choice for me (but certainly not the only choice).

In my apps I add a class library called Components that is part of the presentation layer. I create components I call selectors (CustomerSelector, PartSelector, OrderSelector...) that can be used throughout my app. A selector is basically a window that is opened in a modal state. It displays a search grid and sets a property on the selector to an object or collection of objects or null if the user cancels.

    // this handles a button click event
    public async void SelectSeriesCommandHandler(object sender, ExecutedRoutedEventArgs e)
    {
        SeriesSelector selector = new SeriesSelector(true, WatchListSeries);  
        bool? result = selector.ShowDialog(); // grid with search options is displayed in modal dialog window

        if (result.HasValue && result.Value)
        {
            var series = selector.SelectedSeries; // use selected objects
        }
    }

What XAML design strategy for master/detail views LOB apps

1 Answers