2

I work on an app that is based on a data form, that contains a lot of fields. The app will be available only on tablets, not on smartphones: so I don't need to manage these devices.

The customer would like that I use PivotItems to organize the categories of the form, and that I display the fields on 2 columns.

enter image description here

Furthermore, for some categories, the customer would also like that I use a kind of "master-detail" implementation, because these categories contain a various number of items, that can be deleted, edited or added. enter image description here

I've read the official guideline of Microsoft about the UWP form layouts (FormLayouts), but I didn't found a sample demonstrating its implementation...

Acutally, my screens look like this:

  • for "normal" categories: standard
  • for "master-detail" categories: master-detail

So I have some questions:

  • is there a sample that demonstrates a good way to implement forms layout, like in the guideline?
  • if I use a 2 column-layout, how to manage the categories with the "Master-Detail" implementation? Do I need to show the details on only 1 column?
  • is there a better way to organize the categories than the PivotItems?
Gold.strike
  • 1,269
  • 13
  • 47
  • [Grid](https://msdn.microsoft.com/library/windows/apps/br242704) is your friend in this scenario. – Chris W. Aug 30 '16 at 20:48
  • I've already use a Grid with 2 columns but the rendering is not satisfying: in landscape mode, there are important size differences between some fields (TextBox, DatePicker, ComboBox,...) In the guideline, it seems there is a MaxSize on the fields, or an important margin between each column: it's more about these details than I search help. – Gold.strike Aug 31 '16 at 05:54
  • Ya it's all in how you setup your layout to let it react between the modes. If you post a more concise issue I'm sure we could get you sorted pretty quick. – Chris W. Aug 31 '16 at 14:15

1 Answers1

1

Take a look at official UWP Samples.

ListView and GridView sample

This sample shows the usage of ListView and Gridview.

Specifically, this sample shows how to:

Simple ListView Sample: Demonstrate how to implement a grouped ListView using the new x:Bind and x:Phase features.

Simple GridView Sample: Demonstrate how to implement a grouped GridView using the new x:Bind and x:Phase features.

Master/Details plus Selection Sample: How to implement a responsive master/details experience with a successful multiple selection experience.

Tap on the left edge of ListView: Implement the behavior Tap on the left edge of ListView to going into multiple selection mode.

Restore Scroll Position Sample: Demonstrates how to restore a list's scrollviewer position when a user navigates away and back from a page. Implements the ListViewPersistenceHelper API

Scroll into View Sample: Demonstrates how to scroll a specific item into view. Note The Windows universal samples require Visual Studio 2015 to build and Windows 10 to execute.

You specifically need Master/Detail plus Selection sample + Pivot Control

Community
  • 1
  • 1
AVK
  • 3,893
  • 1
  • 22
  • 31
  • Thanks for your return. I've not mentioned it, but I've already started to develop this app, and I've already studied these cases. My request is more to know if there is a better alternative to the Pivots, or a good way to organize form fields on 2 columns. Or for the Master-Detail views, do I need to keep the details fields on 2 columns? I will edit my main post with new screenshots to describe my current situation. – Gold.strike Aug 31 '16 at 06:18