Page layout like Windows UWP App
-
wrote on 1 Sept 2021, 07:50 last edited by
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
-
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 Pradewrote on 2 Sept 2021, 08:41 last edited by ndias 9 Feb 2021, 08:45Hi @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
-
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@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.htmlTo align everything automatically:
https://doc.qt.io/qt-5/qml-qtquick-layouts-layout.htmlBasics 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.htmlI 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
-
wrote on 2 Sept 2021, 18:18 last edited by
Thank you very much. Now i will read and look all the links. Thank you.
2/4