Skip to main content

Create a Dashboard in Visual Studio

  • 3 minutes to read

This tutorial shows how to create a dashboard at design time within Visual Studio and display this dashboard in the WPF Dashboard Viewer.

Watch Video

Create a New Project and Add a Dashboard

  1. Right-click the project in the Solution Explorer and select Add DevExpress Item | New Item…. The DevExpress Template Gallery wizard starts. Select the WPF platform and the Dashboard item, as shown below:

  2. Click Add Item. If you do not specify a name, a new file with the default name Dashboard1.cs is added to the project.
  3. Double-click the file in the Visual Studio Solution Explorer to display the designer for the newly created dashboard.

Connect to a Database and Select Data

  1. To add a dashboard data source, click Edit Data Sources… on the dashboard surface.


  2. Click Add | Dashboard Data Source to add a new data source in the invoked Data Sources dialog.


  3. On the first Data Source page, select Database and click Next.


  4. On the next page, select No, I’d like to specify the connection parameters myself and click Next.


  5. Now specify the data connection parameters. Select the Microsoft Access 97 data provider and specify the database path in the Database field:

    C:\Users\Public\Documents\DevExpress Demos 22.2\Components\Data\nwind.mdb


    Click Next.

  6. On the next page, leave the default settings and click Next.


  7. At the final page, click the Run Query Builder… button to run the Query Builder and select the required data.


  8. In the invoked Query Builder, drag and drop the SalesPerson view from the Tables pane onto the Design pane…


    …and check the (All Columns) checkbox.


    Click OK.

  9. The Data Source Wizard displays the generated query.


    Click Finish to create the data source.

  10. The Data Sources dialog displays the created data source and its properties. Click OK.


Add Dashboard Items and Bind them to Data

  1. To add dashboard items, open the Toolbox and drag them onto the dashboard.


    First, add the Gauge dashboard item to the dashboard. Select Dashboard | Field List and drag the Extended Price field onto the “Actual” placeholder in the Gauges section.


    Then, drag the Country field to the Series section.

  2. Add the Chart to the dashboard and drag the Extended Price field onto the Values section, the CategoryName field onto the Arguments section and the OrderDate field onto the Series section.


  3. Finally, add the Cards dashboard item. Drag the Extended Price field onto the “Actual” placeholder in the Cards section and place the Sales Person field in the Series section.


  4. The dashboard should look as follows in Visual Studio:


Display the Created Dashboard

  1. After you have created a dashboard, the DashboardControl initializes the DashboardControl.DashboardSource property as follows:

    <dxdash:DashboardControl DashboardSource="{x:Type local:Dashboard1}"/>

Next Steps

See Also