Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to style a QML Dialog
Forum Updated to NodeBB v4.3 + New Features

How to style a QML Dialog

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
qml dialog styl
8 Posts 2 Posters 4.3k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    marinas
    wrote on 24 May 2016, 06:40 last edited by marinas
    #1

    I need a resizable dialog with a Close button, so the QML Dialog type is a good alternative. It's not pretty though and doesn't look anything like the rest of my application.
    Is it possible to style a QML Dialog?
    And if not, has anyone attempted to make a dialog style resizable Rectangle?

    P 1 Reply Last reply 24 May 2016, 11:53
    0
    • M marinas
      24 May 2016, 06:40

      I need a resizable dialog with a Close button, so the QML Dialog type is a good alternative. It's not pretty though and doesn't look anything like the rest of my application.
      Is it possible to style a QML Dialog?
      And if not, has anyone attempted to make a dialog style resizable Rectangle?

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 24 May 2016, 11:53 last edited by
      #2

      Hi @marinas and Welcome,
      Since QML Dialog doesnot have any styling component I think you are only left by setting a custom contentItem as shown in the example.
      Also how about using ApplicationWindow and setting flags as Qt.Dialog ? ApplicationWindow can be customized using ApplicationWindowStyle.

      157

      M 1 Reply Last reply 25 May 2016, 06:20
      0
      • P p3c0
        24 May 2016, 11:53

        Hi @marinas and Welcome,
        Since QML Dialog doesnot have any styling component I think you are only left by setting a custom contentItem as shown in the example.
        Also how about using ApplicationWindow and setting flags as Qt.Dialog ? ApplicationWindow can be customized using ApplicationWindowStyle.

        M Offline
        M Offline
        marinas
        wrote on 25 May 2016, 06:20 last edited by
        #3

        The problem with ApplicationWindow, Window and Dialog is the border and titlebar on top. They just don´t go with the rest of my application and there doesn´t seem to be an easy way to hide them/change their appearance.
        You don´t happen to have som code laying around for resizing a Rectangle with mouse like you would a dialog?
        A ResizingRectangle would be a great addition to QML Object Types!

        P 1 Reply Last reply 25 May 2016, 06:40
        0
        • M marinas
          25 May 2016, 06:20

          The problem with ApplicationWindow, Window and Dialog is the border and titlebar on top. They just don´t go with the rest of my application and there doesn´t seem to be an easy way to hide them/change their appearance.
          You don´t happen to have som code laying around for resizing a Rectangle with mouse like you would a dialog?
          A ResizingRectangle would be a great addition to QML Object Types!

          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 25 May 2016, 06:40 last edited by
          #4

          @marinas

          You don´t happen to have som code laying around for resizing a Rectangle with mouse like you would a dialog?
          A ResizingRectangle would be a great addition to QML Object Types!

          By this you mean resizing the window which contains the Rectangle ?

          157

          M 1 Reply Last reply 25 May 2016, 07:14
          0
          • P p3c0
            25 May 2016, 06:40

            @marinas

            You don´t happen to have som code laying around for resizing a Rectangle with mouse like you would a dialog?
            A ResizingRectangle would be a great addition to QML Object Types!

            By this you mean resizing the window which contains the Rectangle ?

            M Offline
            M Offline
            marinas
            wrote on 25 May 2016, 07:14 last edited by
            #5

            @p3c0 No, I mean making a Rectangle that you can drag around with mouse to reposition it and use mouse to drag the edges/corners to resize it just like a dialog without the visible borders and titlebar.

            P 1 Reply Last reply 25 May 2016, 07:29
            0
            • M marinas
              25 May 2016, 07:14

              @p3c0 No, I mean making a Rectangle that you can drag around with mouse to reposition it and use mouse to drag the edges/corners to resize it just like a dialog without the visible borders and titlebar.

              P Offline
              P Offline
              p3c0
              Moderators
              wrote on 25 May 2016, 07:29 last edited by p3c0
              #6

              @marinas Perhaps something like this:

              import QtQuick 2.5
              
              Item {
                  id: root
                  width: 200
                  height: 200
              
                  Rectangle {
                      id: rect
                      width: 20
                      height: 20
                      color: "red"
              
                      MouseArea {
                          anchors.fill: parent
                          onPositionChanged: {
                              rect.width = mapToItem(root,mouseX,mouseY).x
                              rect.height = mapToItem(root,mouseX,mouseY).y
                          }
                      }
                  }
              }
              

              Drag the Red rectangle.

              157

              M 1 Reply Last reply 25 May 2016, 11:16
              0
              • P p3c0
                25 May 2016, 07:29

                @marinas Perhaps something like this:

                import QtQuick 2.5
                
                Item {
                    id: root
                    width: 200
                    height: 200
                
                    Rectangle {
                        id: rect
                        width: 20
                        height: 20
                        color: "red"
                
                        MouseArea {
                            anchors.fill: parent
                            onPositionChanged: {
                                rect.width = mapToItem(root,mouseX,mouseY).x
                                rect.height = mapToItem(root,mouseX,mouseY).y
                            }
                        }
                    }
                }
                

                Drag the Red rectangle.

                M Offline
                M Offline
                marinas
                wrote on 25 May 2016, 11:16 last edited by
                #7

                @p3c0 I just made a Rectangle with 9 different mouse areas: 4 corner areas (4x4 pixels), 4 side areas (4 pixels wide/high) and one center area handling drag to reposition rectangle. Seems to work fairly well, I have just found one issue. Top left corner and bottom right corners both use cursor shape SizeFDiagCursor as documentation states it should, but the cursor looks nothing like in the documentation and is correct only for bottom right corner. ( Cursor looks like a bottom right corner with a single headed arrow pointing into the corner.) What affects the appearance of the cursor?
                (I´m on RHEL 7.1)

                P 1 Reply Last reply 25 May 2016, 11:28
                0
                • M marinas
                  25 May 2016, 11:16

                  @p3c0 I just made a Rectangle with 9 different mouse areas: 4 corner areas (4x4 pixels), 4 side areas (4 pixels wide/high) and one center area handling drag to reposition rectangle. Seems to work fairly well, I have just found one issue. Top left corner and bottom right corners both use cursor shape SizeFDiagCursor as documentation states it should, but the cursor looks nothing like in the documentation and is correct only for bottom right corner. ( Cursor looks like a bottom right corner with a single headed arrow pointing into the corner.) What affects the appearance of the cursor?
                  (I´m on RHEL 7.1)

                  P Offline
                  P Offline
                  p3c0
                  Moderators
                  wrote on 25 May 2016, 11:28 last edited by
                  #8

                  @marinas I seem to be disconnected with what you are trying. Can you post the code for Rectangle ?

                  157

                  1 Reply Last reply
                  0

                  5/8

                  25 May 2016, 07:14

                  • Login

                  • Login or register to search.
                  5 out of 8
                  • First post
                    5/8
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved