[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Collapse]Windows 10 App Controls
  Prerequisites
 [Expand]Getting Started
 [Collapse]Controls
  [Expand]Navigation and Layout
  [Expand]Data Editors
  [Collapse]Data Grid
   [Collapse]Getting Started
     Lesson 1 - Binding to Data
     Lesson 2 - Displaying Summary Information
     Lesson 3 - Displaying Detail Page
   [Expand]Binding to Data
   [Expand]Data Management
   [Expand]Data Editing
   [Expand]Validation
   [Expand]Asynchronous Virtual Source
   [Expand]Data Scrolling
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Charts
  [Expand]Map Control
  [Expand]Gauges
  [Expand]PDF Viewer
  [Expand]Scheduler
   SVG Icon
   Context Menu
 [Expand]Themes and Color Schemes
  Localization
  Get More Help
 [Expand]API Reference
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 3 - Displaying Detail Page

This lesson demonstrates how to:

  • Create a separate page that displays all fields of a data object;
  • Display this page when clicking a data row.

Do the following.

  1. Run MS Visual Studio 2017.
  2. Create a new Universal Windows Platform application. To do this, choose New Project on the File menu or press Ctrl+Shift+N, choose Universal, and then choose Blank App (Universal Windows).

  3. Open the Visual Studio toolbox, locate the "DX.19.2: Data" tab, choose the GridControl toolbox item and drop it onto the window.

    Note

    Dropping the GridControl toolbox item onto the window will automatically add all the required references (DevExpress.Core and DevExpress.Data). To add the GridControl in code, reference these extensions manually.

  4. Right-click the GridControl and select Layout - Reset All.
  5. Open the MainPage.xaml.cs file, and add specify DataContext.

  6. Bind the GridControl to data.

  7. By default, the grid automatically creates columns for all fields in a data source. Set the DataControlBase.AutoGenerateColumns property to false and create two columns.

  8. Right-click the application at the Solution Explorer and select Add|NewItem or press CTRL+SHIFT+A. Select the Blank Page template and click Add. Note that the type of the created page is Page. To be able to override the LoadState method, change the page's type from Page to DXPage in both *.xaml and *.xaml.cs.
  9. In XAML, create the layout of the new page. In this lesson, this page displays five data fields and the Back button.

  10. Implement the LoadState method to provide the text fields defined in XAML with data.

  11. Open the App.xaml.cs file. By default, the OnLaunched method uses the instance of the Windows.UI.Xaml.Controls.Frame class as a root frame. Change this method to use the DevExpress.UI.Xaml.Layout.DXFrame instance provided with a NavigationTypeProvider. The App.xaml.cs file should look like the following.

  12. Set the ItemNavigationTargetType property to Details to display the designed DXPage when clicking an item. Set the ItemNavigationTargetParameterBinding to "{Binding Path=ProductName}" to pass the required data.

  13. Run the application to see the result.

Is this topic helpful?​​​​​​​