Back to Devexpress

How To: Create a PageView and Populate It with Data

wpf-15028-controls-and-libraries-windows-modern-ui-examples-how-to-create-a-pageview-and-populate-it-with-data.md

latest2.0 KB
Original Source

How To: Create a PageView and Populate It with Data

  • Dec 10, 2023
  • 3 minutes to read

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.

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.

  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.

Complete Code

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

View Example