Lesson 3 - Displaying Detail Page | Windows 10 App Controls

Aug 03, 2020
5 minutes to read

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.

Run MS Visual Studio 2017.
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).
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.
Right-click the GridControl and select Layout - Reset All.

Open the MainPage.xaml.cs file, and add specify DataContext.

using System.Collections.Generic;
using Windows.UI.Xaml.Controls;

namespace DetailPage {
    public sealed partial class MainPage : Page {
        public MainPage() {
            this.InitializeComponent();
            DataContext = ProductData.Source;
        }
        public static class ProductData {
            static List<Products> products;
            public static List<Products> Source {
                get {
                    if (products == null) {
                        products = new List<Products>();
                        products.Add(new Products() { ProductName = "Chang", Country = "UK", City = "Cowes", UnitPrice = 19, Quantity = 10 });
                        products.Add(new Products() { ProductName = "Gravad lax", Country = "Italy", City = "Reggio Emilia", UnitPrice = 12.5, Quantity = 16 });
                        products.Add(new Products() { ProductName = "Ravioli Angelo", Country = "Brazil", City = "Rio de Janeiro", UnitPrice = 19, Quantity = 12 });
                        products.Add(new Products() { ProductName = "Tarte au sucre", Country = "Germany", City = "QUICK-Stop", UnitPrice = 22, Quantity = 50 });
                        products.Add(new Products() { ProductName = "Steeleye Stout", Country = "USA", City = "Reggio Emilia", UnitPrice = 18, Quantity = 20 });
                        products.Add(new Products() { ProductName = "Pavlova", Country = "Austria", City = "Graz", UnitPrice = 21, Quantity = 52 });
                        products.Add(new Products() { ProductName = "Longlife Tofu", Country = "USA", City = "Boise", UnitPrice = 7.75, Quantity = 120 });
                        products.Add(new Products() { ProductName = "Alice Mutton", Country = "Mexico", City = "México D.F.", UnitPrice = 21, Quantity = 15 });
                        products.Add(new Products() { ProductName = "Alice Mutton", Country = "Canada", City = "Tsawwassen", UnitPrice = 44, Quantity = 16 });
                    }
                    return products;
                }
            }
        }

        public class Products {
            public string ProductName { get; set; }
            public string Country { get; set; }
            public string City { get; set; }
            public double UnitPrice { get; set; }
            public int Quantity { get; set; }
        }
    }
}

Bind the GridControl to data.

XAML

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DetailPage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Grid="using:DevExpress.UI.Xaml.Grid"
    x:Class="DetailPage.MainPage"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid:GridControl ItemsSource="{Binding}"/>

    </Grid>
</Page>

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.

XAML

<Grid:GridControl ItemsSource="{Binding}" AutoGenerateColumns="False">
    <Grid:GridControl.Columns>
            <Grid:GridTextColumn FieldName="ProductName"/>
            <Grid:GridTextColumn FieldName="Quantity"/>
    </Grid:GridControl.Columns>
</Grid:GridControl>

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.

In XAML, create the layout of the new page. In this lesson, this page displays five data fields and the Back button.

XAML
C#

<layout:DXPage
    x:Class="DetailPage.Details"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DetailPage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:layout="using:DevExpress.UI.Xaml.Layout"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Content="Back" VerticalAlignment="Top" Click="Button_Click_1"/>

        <Grid Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <TextBlock Text="Product Name: " VerticalAlignment="Center"/>
            <TextBox Text="{Binding Path=ProductName, Mode=TwoWay}" Grid.Column="1" Margin="5"/>

            <TextBlock Text="Country: " Grid.Row="1" VerticalAlignment="Center"/>
            <TextBox Text="{Binding Path=Country, Mode=TwoWay}" Grid.Column="1" Grid.Row="1" Margin="5"/>

            <TextBlock Text="City: " Grid.Row="2" VerticalAlignment="Center"/>
            <TextBox Text="{Binding Path=City, Mode=TwoWay}" Grid.Column="1" Grid.Row="2" Margin="5"/>

            <TextBlock Text="Unit Price: " Grid.Row="3" VerticalAlignment="Center"/>
            <TextBox Text="{Binding Path=UnitPrice, Mode=TwoWay}" Grid.Column="1" Grid.Row="3" Margin="5"/>

            <TextBlock Text="Quantity: " Grid.Row="4" VerticalAlignment="Center"/>
            <TextBox Text="{Binding Path=Quantity, Mode=TwoWay}" Grid.Column="1" Grid.Row="4" Margin="5"/>
        </Grid>

    </Grid>
</layout:DXPage>

using DevExpress.UI.Xaml.Layout;
using Windows.UI.Xaml;

namespace DetailPage {
    public sealed partial class Details : DXPage {
        public Details() {
            this.InitializeComponent();
        }
        void Button_Click_1(object sender, RoutedEventArgs e) {
            GoBack();
        }
        protected override void LoadState(object navigationParameter, DevExpress.Core.PageStateStorage pageState) {
        }
    }
}

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

using DevExpress.Core.Navigation;
using DevExpress.UI.Xaml.Layout;
using Windows.UI.Xaml;
using System.Linq;

namespace DetailPage {
    public sealed partial class Details : DXPage {
        public Details() {
            this.InitializeComponent();
        }
        void Button_Click_1(object sender, RoutedEventArgs e) {
            GoBack();
        }
        protected override void LoadState(object navigationParameter, DevExpress.Core.Navigation.PageStateStorage pageState) {
            base.LoadState(navigationParameter, pageState);
            DataContext = DetailPage.MainPage.ProductData.Source.Where(data => data.ProductName == (string)navigationParameter).First();
        }
    }
}

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.

using System;
using System.Collections.Generic;
using DevExpress.UI.Xaml.Layout;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using System.Reflection;

namespace DetailPage {
    sealed partial class App : Application {
        public App() {
            this.InitializeComponent();
            this.Suspending += OnSuspending;
        }
        protected override void OnLaunched(LaunchActivatedEventArgs args) {
            Frame rootFrame = Window.Current.Content as Frame;
            if (rootFrame == null) {
                rootFrame = new DXFrame() { NavigationTypeProvider = new NavigationTypeProvider() };
                if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {

                }
                Window.Current.Content = rootFrame;
            }
            if (rootFrame.Content == null) {
                if (!rootFrame.Navigate(typeof(MainPage), args.Arguments)) {
                    throw new Exception("Failed to create initial page");
                }
            }
            Window.Current.Activate();
        }
        private void OnSuspending(object sender, SuspendingEventArgs e) {
            var deferral = e.SuspendingOperation.GetDeferral();
            deferral.Complete();
        }
    }
    public class NavigationTypeProvider : TypeProviderBase {
        public override IEnumerable<System.Reflection.Assembly> Assemblies {
            get {
                yield return typeof(App).GetTypeInfo().Assembly;
            }
        }
    }
}

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.

XAML

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DetailPage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Grid="using:DevExpress.UI.Xaml.Grid"
    x:Class="DetailPage.MainPage"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid:GridControl ItemsSource="{Binding}" AutoPopulateColumns="False" ItemNavigationTargetType="Details" ItemNavigationTargetParameterBinding="{Binding Path=ProductName}">
            <Grid:GridControl.Columns>
                <Grid:GridTextColumn FieldName="ProductName"/>
                <Grid:GridTextColumn FieldName="Quantity"/>
            </Grid:GridControl.Columns>
        </Grid:GridControl>
    </Grid>
</Page>

Run the application to see the result.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Lesson 3 - Displaying Detail Page