Skip to main content
All docs
V25.1
  • Create a Dashboard in Visual Studio (.NET)

    • 3 minutes to read

    Prerequisites

    • Create a WPF Dashboard Viewer application with the Dashboard Viewer that targets .NET 8 or later versions. Refer to the following tutorial for more information: Create a WPF Dashboard Viewer (.NET).

    • Visual Studio 2022 v17.0 or later with the .NET desktop development workload.

    Create a Dashboard

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

    Create Dashboard component in Template Gallery

    Rebuild the project before you invoke the Dashboard Designer.

    Double-click the created dashboard in the VS Solution Explorer window and select Run Dashboard Designer.

    Invoke Design-Time .NET Dashboard Designer

    Configure the Dashboard

    The following sections describe how to design the created dashboard. Refer to the following topic for more information about functionality that is available in the Dashboard Designer’s UI: Create Dashboards in the WinForms Designer.

    Connect to a Database and Select Data

    Select New Data Source in the Data Source ribbon tab.

    Invoke Data Source Wizard

    Select Microsoft Access 97 and click Next on the first page.

    GettingStarted_L1_SelectDataSourceType

    Important

    This example uses an Access 97 Database file shipped with the installation package as the data source.

    Specify data connection parameters. Specify the following path to the database in the Database field:

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

    GettingStarted_CreateDashboardWin_ConnectionParameters

    Click Next.

    On the final page, click the Run Query Builder… button to run Query Builder.

    GettingStarted_L1_RunQueryBuilder

    In the invoked Query Builder, drag and drop the SalesPerson view from the Tables Pane on the left to the Design Pane.

    GettingStarted_L1_QueryBuilder_DragSalesPerson

    Check the (All Columns) check box and click OK.

    GettingStarted_L1_QueryBuilder_SelectAll

    The Data Source Wizard displays the generated query.

    GettingStarted_L1_DataSourceWizard_GeneratedQuery

    Click Finish to create the data source.

    Create Dashboard Items and Bind them to Data

    Click the Gauges button in the Ribbon to add gauges.

    GettingStarted_L1_AddGauge

    Drag the Extended Price field from the Data Source Browser to the “Actual” placeholder in the Gauges section.

    GettingStarted_L1_BindGauge_Series

    Then, drag the Country field to the Series section.

    Click the Chart button in the Ribbon to add a chart.

    GettingStarted_L1_AddChart

    Drag the Extended Price field to the Values section, the CategoryName field to the Arguments section, and the OrderDate field to the Series section.

    GettingStarted_L1_BindChart_Series

    Click the Cards button in the Ribbon to add cards.

    GettingStarted_L1_AddCards

    Drag the Extended Price field to the “Actual” placeholder in the Cards section. Then, place the Sales Person field in the Series section.

    GettingStarted_L1_BindCards_Series

    The dashboard should look like this:

    GettingStarted_L1_Result

    Save the Dashboard

    Click Save in the Ribbon or Save As to select a destination to save the dashboard in an XML file.

    Save Dashboard button

    Edit a Dashboard

    Double-click the existing dashboard in the VS Solution Explorer window and select Run Dashboard Designer.

    Edit the dashboard in the invoked Dashboard Designer. The following image illustrates the Dashboard Designer in Visual Studio that contains a dashboard:

    Design-Time .NET Dashboard Designer

    Save the resulting dashboard.

    Save Dashboard button

    Next step

    WPF Viewer - describes how to use DashboardControl to display a dashboard in a WPF application.