Customized Qbutton

[Javeria]

I want to make stylish buttons in QML UI but i have tried it using images on the button but the image cannot be shown, I have Qt 5.4 installed and i dont have options of styled buttons in the QT Designer of QML, so does anyone have any suggestion?

[shav]

Hi,

To change button style you can use ButtonStyle from QtQuick.Controls.Style, for more information please read "this":http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle.html.

In code this should looks like:
@
Button {
id: btn
width: 30
height: 30
style: ButtonStyle {
background: Rectangle {
width: control.width
height: control.height
color: "transparent"

            Image {
                id: iconImage
                anchors.fill: parent
                source: "path to icon file"
            }
        }
    }
}

@

[Javeria]

I have tried to change the style but its gives be syntax error when i write ButtonStyle

[shav]

Hi,

You need to import the model:
@
import QtQuick.Controls.Styles 1.3
@

If you tried this could you share you QML code?

[Javeria]

Okay i ve tried it but it doesn't appear on screen:

@import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.1
import QtQuick.XmlListModel 2.0
import QtQuick.Controls.Styles 1.3

ApplicationWindow {
id : hola
title: ("SketchIt")
width: 640
height: 480
minimumWidth: mainToolBar .implicitWidth
visible: true

toolBar: ToolBar{
    id : mainToolBar
    anchors.fill :parent
    RowLayout{
     //   width : parent.width

        ToolButton{
       // text : ("main")
        iconSource: "C:\\Users\\Hassan Adil\\Documents\\sketchIt\\16.png"
        onClicked: hola.color = "blue"
        anchors.margins: 4

}
Button {
id: btn
width: 230
height: 130
style: ButtonStyle {
background: Rectangle {
width: control.width
height: control.height
// color: "transparent"

                        Image {
                            id: iconImage
                            anchors.fill: parent
                            source: "D:\b.jpg"
                        }
                    }
                }
                visible:true;
            }
    Button{

        text : "close"
        onClicked: hola.close()

}
}
}
SplitView{
anchors.fill: parent
orientation: Qt.Horizontal
TableView{
id : flickerTable
TableViewColumn{role : "title"; title: "Sketches"; width:100}
model : flicker
}

Image{
source : flicker.get(flickerTable.currentRow).source

}
}

/*XmlListModel{
id : flicker
source :"http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags=Cat"
query : "/rss/channel/item"
namespaceDeclarations: "declare namespace media="http://search.yahoo.com/mrss/";"
XmlRole{name:"title"; query: "title/string()"}
XmlRole{name:"date"; query: "pubDate/string()"}
XmlRole{name:"source"; query: "media:thumbnail/@url/string()"}
XmlRole{name:"credit"; query: "media:credit/string()"}
}
*/

}

@

[shav]

Hm... the code looks good. Did you check image path?

[Javeria]

Yes i did check the path its doesnt show the image