Page layout like Windows UWP App

[pradeg]

Good day,
unfortunately my English is very bad, so I use deepl for the translation. Nevertheless, I hope that my request is well presented.
I am a teacher and I don't know how to program yet. But I would like to learn. I would like to do this with a concrete project. But Qt and QML are so powerful that I don't know where and how to continue.
I would like to develop a programme for the desktop with touch control. There is already a similar programme, but it was developed in Xamarin. Unfortunately, the programme is not developing any further. That's why I hope to start my own open source project and if I can already show something, that I can find more helpers.
I would like to start with the layout in QML. For this purpose, I would like to have a GUI layout like the one found in many desktop programmes and websites. I would like to use the design of https://docs.microsoft.com/en-us/windows/apps/design/layout/page-layout
in QML, but I don't know how to start.
The programme should have the layout shown on the Microsoft website.
How do I implement this in QML? I am grateful for any help.

Kind regards
Gerhard Prade

[ndias]

Hi @pradeg,

Take a look at: https://www.youtube.com/watch?v=P3DMJPCN5yg

This tutorial uses Qt Quick Designer (QT creator) to create a QML navigation menu. Since your programming skills are basic, it should be a good starting point.

Video playlist available on: link

Regards

[J.Hilk]

@pradeg
hi and welcome,

not an easy task for a first app, but doable non the less.

What you should investigate/read up on are the following (in my opinion)

Thte menu on the left side:
https://doc.qt.io/qt-5/qml-qtquick-controls2-drawer.html
The menu bar on the top:
https://doc.qt.io/qt-5/qml-qtquick-controls2-menubar.html
The main selection in the middle:
https://doc.qt.io/qt-5/qml-qtquick-gridview.html

To align everything automatically:
https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.html

Basics about models in Qt(to populate your grid view)
https://doc.qt.io/qt-5/model-view-programming.html
https://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html

I know, a lot to read, but the qt documentation is excellent, with examples and everything. You should be able to get startet. And feel free to ask more, when you have trouble :D

[pradeg]

Thank you very much. Now i will read and look all the links. Thank you.