Important: Please read the Qt Code of Conduct -

Customise TreeView branch indicator

  • Hi - my first post on the forum. I'm quite new to QML and currently somewhat confused, so please be kind if I am asking dumb questions...

    First of all, in case it makes any difference, I am using Qt 5.9.6. I know this is quite old but this is a restriction I have at work.

    I have been trying to customise the branch indicator of my TreeView using a pair of 'chevron' images implemented as svg files because I don't esepcially like the default 'triangle' indicators. So I have an Image item in my branchDelegate and I simply switch the image source based on whether styleData.isExpanded is true:

    branchDelegate: Rectangle {
        width: 16; height: 16
        Image {
            anchors.centerIn: parent
            source: styleData.isExpanded ? "qrc:///img/chev-dn.svg" : "qrc:///img/chev-rt.svg"

    This works fine, except that if the row is selected (and therefore highlighted) the whole row is blue apart from the square containing my indicator image, which stays white.

    I know that I can set the color in the Rectangle delegate item but for the life of me I can't see how to query the branch selection colour so that I set the correct value for color. It does not appear to be customisable at all. I have even resorted to trying to decipher the QML source code but I cannot see where it is defined. Can anyone help please? Or is there a better approach to setting the indicator that would avoid the problem in the first place?

    On a related note, I tried building the filesystembrowser example provided by Qt, which is a fairly simple example using the 'file system model' with a TreeView. Bizarrely, when I run this example, the tree is using the sort of chevron branch indicators that I am trying to implement, even though there is nothing as far as I can see in the example code that is customising the indicator. Can anyone explain why this happens? Again I have tried browsing the Qt source to see if I can spot anything. The default indicator is defined in Src/qtquickcontrols/src/controls/Styles/Base/TreeViewStyle.qml

        property Component branchDelegate: Item {
            width: indentation
            height: 16
            Text {
                visible: styleData.column === 0 && styleData.hasChildren
                text: styleData.isExpanded ? "\u25bc" : "\u25b6"

    In other words the default indicators are simple implemented as Text containing the unicode characters for 'black down pointing triangle' and 'black right pointing triangle'. I can't see anythwere else in the source where this is set differently from this to account for what I see in the file browser example. Any ideas as I am baffled? If I can figure out how this is working I might be able to use it.

    Thanks in advance for any help.


  • OK, so I have a partial answer in that I have been able to find the tree selection highlight colour by searching for it in the QML debugger tree. From this I found that it is "#0077cc". However, there must surely be a better way to do this!

    On the way to this I thought I had found the answer in SystemPalette. So I tried:

    // branchIndicator
    Rectangle {
        SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
        color: styleData.selected ? myPalette.highlight : "white"
        Image { ... }

    But this is not the same as the tree highlight colour unfortunately.

  • I guess my questions might have been missed as I posted over the weekend. The summary is:

    1. How do I reliably query for the colour that is used to indicated a selected/highlighted row in TreeView?
    2. How is it that the branch indicator in the filesystembrowser example is different from the default when the example code does not appear to be doing anything to customise this?

Log in to reply