infinitetaya.blogg.se - Windows grid details

#Windows grid details windows 10#
#Windows grid details windows#

Product list: Order, track, add to wish list.

Here are some more examples of functionality you can put into the detail view: However, you can go much further with it. The example was having a “reply” button for an email app. In the beginning of this article, we briefly touched on how you can have context-aware functionality when using a master-detail. You’ll see the visual states change and switch between the side-by-side and stacked modes. To see this in action, run the RSS reader example and resize the window from big to small and back. You’ll see the VisualState named “NarrowState.” In this visual state, the MasterColumn.Width changes to * (star, which means “take all the available space”) and the DetailColumn.Width changes to 0.īecause the AdaptiveTrigger is set to 720, anything between 0 and 719 will use the NarrowState and anything 720 or larger will use the DefaultState. Now, let’s look at line 49 in the VisualStateGroups. Notice the default width of the MasterColumn is set to 360. Using an AdaptiveTrigger in your view’s VisualStates, you can adapt the UI when the application’s window size reaches that “breaking point.” In the RSS sample, you can see how this is done on the MasterDetailPage.xaml.įirst, let’s look at the master-detail layout there’s a Frame element for the master content (ListView of feeds and articles) and a WebView for the detail content (the selected article).

#Windows grid details windows#

The Universal Windows Platform has a great feature to help with changing modes: the AdaptiveTrigger. This means that once the application window gets resized to above or below 720 epx, we should be switching between side-by-side or stacked mode. For our master-detail, we’ve decided to do this at 720 epx. You’ll notice that we have this point where we need to change between the two different modes, depending on the current app width. Let’s use the Microsoft RSS Reader UWP example app to illustrate the master-detail pattern’s features. You need to switch between items frequently but want to stay in the same context (e.g.You have a large list that has items that need to be prioritized (e.g.

You have a list where it makes sense to show details (e.g.The pattern works well for these types of application scenarios: For example, selecting an email shows the body of the email as well as the buttons for: reply, reply-all and delete. When the user selects something in the master, they see the information and any actions relevant to that detail item. The master-detail pattern is easy to understand and doesn’t need a lot of explanation to the user.

#Windows grid details windows 10#

You can find a great example of the master-detail pattern in the Windows 10 email app, “Mail.” The master is the list of emails and the details is the selected email.

The answer to this will depend on what kind of information your application is trying to show, but at a high level, the “master” is an area in the UI where you have a list of something and the “detail” is the area that shows the relevant information of a selection in the master. In this post, we’ll discuss what this is, determine if it’s appropriate for your application and show how you can use it! What is a master-detail? The master-detail design pattern has become one of the most popular approaches in applications today. In the world of information consumption in applications, it’s crucial to have a clear and easy way to navigate and inspect that information.