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.

    VSDesigner_Empty_EditDataSources

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

    GettingStarted_L4_DataSourcesDialog

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

    GettingStarted_L4_UseAnExistingConnection

  4. On the next Data Source page, select Microsoft Access 97 data provider and click Next.

    DataSourceWizard_Database_DesignTime

  5. Now specify the data connection parameters. Specify the database path in the Database field:

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

    DataSourceWizard_MSAccess97

    Click Next.

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

    GettingStarted_L4_DataSourceWizard_SaveString

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

    GettingStarted_L4_RunQueryBuilder

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

    GettingStarted_L4_QueryBuilder_DragSalesPerson

    …and check the (All Columns) checkbox.

    GettingStarted_L4_QueryBuilder_SelectAll

    Click OK.

  9. The Data Source Wizard displays the generated query.

    GettingStarted_L4_DataSourceWizard_GeneratedQuery

    Click Finish to create the data source.

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

    GettingStarted_L4_DataSourcesDialog_filled

Add Dashboard Items and Bind them to Data

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

    GettingStarted_L4_DashboardItemsToolbox

    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.

    GettingStarted_L4_BindGauge_Value

    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.

    GettingStarted_L4_BindChart

  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.

    GettingStarted_L4_BindCards

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

    GettingStarted_L4_DashboardFinal

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