Log In
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Collapse]Windows Modern UI
   [Expand]Hamburger Menu
   [Expand]Content Containers
     How To: Create a FlipView and Populate It with Data
     How To: Create a PageView and Populate It with Data
     How To: Create a SlideView and Populate It with Data
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How To: Create a PageView and Populate It with Data

This example demonstrates how to create a Page View, bind it to data and use templates to visualize its items. The last section of this example contains the complete example code.

Expanded Steps

  1. Start Visual Studio and create a new WPF project by selecting FILE | New | Project… in the main menu. In the invoked New Project window, select WPF Application, change the name to PageViewSample, and click OK.

  2. Change the main window's theme to Office 2013. To do so, reference the DevExpress Core namespace and use the ThemeManager.
  3. Locate the PageView control in the Toolbox and drop it onto the form.
  4. Define the data source in XAML.

    The EmployeesData class, which is used as a data source, is defined in the C# code. The code for this and other data source classes is listed later in this example.

  5. Now create two DataTemplate objects in the Resources section. These data templates will specify how items and their headers within the PageView should appear.

  6. Now you can assign the data templates to the PageView's ItemTemplate and ContentTemplate properties.

  7. Finally, set a data source for the PageView via the ItemsSource property. You can also specify the AnimationType property to set animation effects used when an end-user navigates through pages.
  8. You can now launch the application to see the results. Remember to include the code for classes encapsulating the data source. This code can be found below. The .XML file that stores employee data is also listed later in this example. Include this file in your project and set its BuildAction property to EmbeddedResource.

Expanded Complete Code

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E4652.

This example demonstrates how to create a PageView, bind it to data and use templates to visualize its items and item headers.

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