Tag Archives: RSS

Master the Master-Detail Pattern

In the world of information consumption in applications, it’s crucial to have a clear and easy way to navigate and inspect that information. The master-detail design pattern has become one of the most popular approaches in applications today. 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 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.

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 master-detail pattern is easy to understand and doesn’t need a lot of explanation to the user. When the user selects something in the master, they see the information and any actions relevant to that detail item. For example, selecting an email shows the body of the email as well as the buttons for: reply, reply-all and delete.

The pattern works well for these types of application scenarios:

  • You have a list where it makes sense to show details (e.g. list of contacts, products, etc.)
  • You have a large list that has items that need to be prioritized (e.g. RSS readers)
  • You need to switch between items frequently but want to stay in the same context (e.g. email)

Let’s use the Microsoft RSS Reader UWP example app to illustrate the master-detail pattern’s features.

If you want to follow along or see the code first-hand, find the RSS Sample’s source code here on GitHub.

Master-detail modes

The master-detail pattern works well on a wide range of device types and display sizes. However, you should consider how you want to use the pattern on different display sizes.

There are two popular modes that will help with this:

  • Side-by-side
  • Stacked

The determination between which approach to take comes down to how much horizontal room your app has. Here’s a table of typical effective pixels available per “size class” (if you’re not familiar with Effect Pixels (epx) see this one minute video).

Size class small medium large
Typical screen size (diagonal) 4″ to 6″ 7″ to 12″, or TVs 13″ and larger
Typical devices Phones Phablets, tablets, TVs PCs, laptops, Surface Hubs
Common window sizes in effective pixels 320×569, 360×640, 480×854 960×540, 1024×640 1366×768, 1920×1080
Window width breakpoints in effective pixels 640px or less 641px to 1007px 1008px or greater

Side by side

There many scenarios in which your application will have plenty of horizontal space to stretch.  The recommended guidelines for this mode is when your application has 720 epx or more available; this puts us in to the “Medium” and “Large” size classes seen above.

A few of these are:

  • Devices that let you size the app window larger (PC, HoloLens, Surface Hub)
  • Windows 10 Mobile running Continuum
  • Windows 10 Mobile (landscape orientation)

In the side-by-side approach, you can have both the master view and the detail view showing simultaneously. Using our RSS example, here’s the side-by-side approach:

Stacked

If your application is running in between 320 to 719 epx, you can’t comfortably fit the master and details next to each other, so we’ll need another way to display the master and detail.

A few examples of this scenario are:

  • Any device that lets you resize the app window (e.g. PC, HoloLens)
  • Windows 10 Mobile (portrait orientation)

For this case, you can use the stacked approach. In stacked, the master view gets the full screen space, then, when a selection is made, the detail view gets the full screen space.

With this approach, we’re “stacking” the pages in a single area and navigating between them. For example, the user selects an item in the master, the app will navigate to the Details View. When they want to see another item, they’ll navigate back to the master and select another item.

The stacked approach can be implemented with page navigation within a Frame element. In the diagram below, the “page control” you see is where the navigation occurs between the master view and the detail view.

Using our RSS sample app, here are a couple screenshots of the master and detail in stacked mode. Note that the app is running on a desktop PC, but with the window sized small, you’ll see the same appearance as it were on a mobile device. What matters is not the device, but the available screen space!

The “Breaking Point”

You’ll notice that we have this point where we need to change between the two different modes, depending on the current app width. For our master-detail, we’ve decided to do this at 720 epx. 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.

The Universal Windows Platform has a great feature to help with changing modes: the AdaptiveTrigger. 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.

First, 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). Notice the default width of the MasterColumn is set to 360.

    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="MasterColumn"
                          Width="360" />
        <ColumnDefinition x:Name="DetailColumn"
                          Width="*" />
    </Grid.ColumnDefinitions>

    <Frame x:Name="MasterFrame" />

    <WebView x:Name="ArticleWebView"
             Grid.Column="1"
             Visibility="Collapsed" />
</Grid>

Now, let’s look at line 49 in the VisualStateGroups. 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.

Because the AdaptiveTrigger is set to 720, anything between 0 and 719 will use the NarrowState and anything 720 or larger will use the DefaultState.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="DefaultState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="MasterColumn.Width" Value="*" />
                <Setter Target="DetailColumn.Width" Value="0" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

To see this in action, run the RSS reader example and resize the window from big to small and back. You’ll see the visual states change and switch between the side-by-side and stacked modes.

Additional Detail Functionality

In the beginning of this article, we briefly touched on how you can have context-aware functionality when using a master-detail. The example was having a “reply” button for an email app. However, you can go much further with it. Here are some more examples of functionality you can put into the detail view:

  • Product list: Order, track, add to wish list
  • Contact list detail options: Call, email, drive to
  • Inventory list detail: Reorder, mark damaged, ship

Another takeaway is that you can share the same controls (e.g. Buttons) for frequently used functionality and that functionality would intuitively be for that selected item in the detail view.

UWP Community Toolkit

If you’re building an application that could benefit from a master-detail implementation, you can skip a lot of the work by using the MasterDetailView control in the UWP Community Toolkit. With as little as a few lines of code and a couple DataTemplates (one for the master’s items and the one for the detail view), you can be up and running quickly.

Here’s the example from the UWP Community Toolkit demo app:

<controls:MasterDetailsView
          ItemsSource="{Binding Items}"
          ItemTemplate="{StaticResource ListTemplate}"
          DetailsTemplate="{StaticResource DetailsTemplate}">
</controls:MasterDetailsView>

Resources

Learn about the samples for Universal Windows Platform

One way to learn app development for the Universal Windows Platform (UWP) is by taking advantage of the extensive and growing samples collection on GitHub. You can use these samples to learn about specific UWP features and APIs and as a source of working code that you can copy and paste into your projects.

These samples include API and feature demos as well as some small but complete apps that show you how to combine multiple features in a more realistic setting.

Many of the samples are available in C#, JavaScript, and C++, so you can find the most familiar code . Because they are UWP apps targeting the universal device family, they will also run on the entire range of supported devices, including desktop computers, tablets, phones, Xbox consoles, Surface Hubs, and HoloLens devices.

API and feature samples

The API and feature samples collection covers numerous scenarios ranging across the entire platform. For convenient browsing, the 190-plus samples are divided into these categories:

  • App settings
  • Audio, video, and camera
  • Communications
  • Contacts and calendar
  • Controls, layout, and text
  • Custom user interactions
  • Data
  • Deep links and app-to-app communication
  • Devices and sensors
  • Files, folders, and libraries
  • Gaming
  • Globalization and localization
  • Graphics and animation
  • Identity, security, and encryption
  • Launching and background tasks
  • Maps and location
  • Navigation
  • Networking and web services
  • Platform architecture
  • Speech and Cortana
  • Threading
  • Tiles, toasts, and notifications

If you are new to development or new to the Windows platform, these samples are a great place to start. Just by running and exploring them, you can get a great idea of the available features. You can learn even more by experimenting with the code while reading the UWP documentation on the dev center. Each sample has a README.md file that describes the scenarios it covers and provides links to the related feature docs. The following sections show some examples of what you’ll find in our Windows-universal-samples collection.

XAML

The XAML UI basics sample shows the different XAML controls and layout panels available.

1_sampleUiBasic

Other XAML-specific samples provide more detail on specific controls or scenarios, such as ListView and GridView, Pivot, and navigation patterns.

Direct2D

The Direct2D photo adjustment sample shows how to use Direct2D to manipulate images.

2_direct2d

Other Direct2D samples cover custom image effects and gradient meshes. Of course, there are Direct3D samples in this collection as well, plus a separate DirectX-Graphics-Samples collection.

Map

The MapControl sample shows how we’ve combined the different mapping features available in earlier platforms into a new, unified experience that works across all supported devices.

3_maps

These are just a few examples of the many API and feature samples available, ranging from networking samples to audio/video/camera and Cortana samples. See the Windows-universal-samples collection for more info. If you don’t see a sample you’re looking for, or you have any feedback on the existing samples, let us know via the Issues list. We’re updating the samples collection on a weekly basis, so check back regularly for the latest changes.

Bringing the features together into real apps

When you start to build your apps, you might wonder how these platform features can work together to form more compelling scenarios. This is where our full app samples come into play.

These samples are fully functional, but small enough to learn from without too much distracting complexity. The goal here is to combine 3 or 4 platform features in each app – just enough to demonstrate how to solve some problems that arise in the real world, such as data management and code organization.

Each of these samples is intentionally missing the kind of polish you will need in a successful app, such as compelling tiles, splash screens, and sharing capabilities. This simplification makes them suitable both for easier learning and for forming the basis of your apps. You can copy any or all of the code from these apps into your own projects, which you can then extend, turning them into your own unique apps that you can publish to the Windows Store and monetize.

App samples

Currently, there are only a few real-world app samples, but more are in the works.

TrafficApp shows how to build a traffic monitoring app by combining the MapControl, location and route services, background tasks, and toast notifications. Although this app uses a conventional code-behind structure, it demonstrates some organizational best practices with a reusable LocationHelper component that can help you build similar apps.

4_traffic

RSS Reader shows how to build a news app using the syndication APIs, serialization and local storage, and an adaptive layout. This app also demonstrates best practices by using a basic Model-View-ViewModel (MVVM) architecture.

5_rssFeeder

QuizGame shows how to use networking features to build a pub-style trivia game where questions aredisplayed on a big screen while players answer the questions on their own devices. This demonstrates how the same app instance can effectively run simultaneously on multiple devices in direct communication with one-another.

6_quizApp

The screenshot below shows the app in test mode where you can see the host UI on the left and two copies of the client UI on the right, before and after a question is answered. Although the UI is simple, this sample provides a well-architected basis for building similar apps, and uses a more elaborate MVVM architecture and a reusable peer-to-peer helper component.

Like the API and feature samples collection, each of these app samples has its own Issues list on GitHub that you can use to provide feedback or request changes. If there are any scenarios you’d like to see in the form of a small-but-complete sample app, just add a comment to this blog post or to any of the Issues lists on the GitHub pages for the samples.