Getting Started with Qt Quick C&

This tutorial shows how to create, run, and modify a Qt Quick C# application.

Prerequisites

• Visual Studio 2022 or newer with .NET desktop development and Desktop development with C++ workloads installed.
• .NET SDK 8 or newer.

Create a Qt Quick C# application

To create a Qt Quick C# application in Visual Studio:

1. Open Visual Studio 2022 and create a new project.
2. Select "Console App" and click "Next".
3. Name the project "MyFirstQtQuickApp" and click "Create".
4. In the "Additional information" dialog, select ".NET 8.0" as the framework and click "Create".
5. Once the project is created, open Visual Studio 2022's NuGet Package Manager: in Solution Explorer, right-click on the project and select "Manage NuGet Packages".
6. Search for "Qt.Bridge.DotNet" and install the latest version of the package.

Add a QML View

To display a user interface, you'll need to add a QML view to the application.

To add a QML view to the application:

1. Right-click on the project in Solution Explorer, select "Add" > "New Item...".
2. Select "Text File", name it "Main.qml", and click "Add".
3. Replace the content of "Main.qml" with the following QML code:

   import QtQuick
   import QtQuick.Controls
   import QtQuick.Layouts
   
   ApplicationWindow {
       id: window; width: 220; height: 240; visible: true; title: "Names"
   
       NameList { id: names }
   
       ColumnLayout {
           anchors.fill: parent
   
           TextField {
               Layout.fillWidth: true; leftPadding: 10; focus: true;
               placeholderText: "Enter a name"
               onAccepted: {
                   let name = text.trim();
                   if (name)
                       names.add(name);
                   clear();
               }
           }
   
           ListView {
               model: names
               Layout.fillWidth: true; Layout.fillHeight: true; clip: true
               delegate: Text {
                   required property string item
                   text: item; leftPadding: 10
               }
           }
       }
   }

4. Edit the C# code in "Program.cs" to load the QML file:

   using Qt.Quick;
   
   namespace Tutorial
   {
       internal class Program
       {
           static void Main(string[] args)
           {
               Qml.LoadFromRootModule("MainWindow");
               Qml.WaitForExit();
           }
       }
   }

Create the C# backend

1. Right-click on the project in Solution Explorer, select "Add" > "Class...".
2. Name the class "NameList.cs" and click "Add".
3. Replace the content of "NameList.cs" with the following C# code:

   using Qt.DotNet;
   
   namespace Tutorial
   {
       public class NameList : ListModel<string>
       {
           private List<string> Names { get; } = new();
   
           public void Add(string name)
           {
               BeginInsertItems(Names.Count, Names.Count);
               Names.Add(name);
               EndInsertItems();
           }
   
           public override string Data(int index)
           {
               if (index >= Names.Count)
                   return null;
               return Names[index];
           }
   
           public override int ItemCount() => Names.Count;
       }
   }

Run the application

To run the application, press F5 or click the "Start" button.

Next steps

Explore more about Qt Quick C# by visiting the following resources:

• Using project and item templates
• Debugging the generated code
• Building Qt Bridges C& module from source