How to make delegate of ListView change its size when view's parent is resized?

Question

I followed the Qt 5.2 documentation on ListView (http://qt-project.org/doc/qt-5/qml-qtquick-listview.html#details). My code is almost identical to the doc except for the contactDelegate's width which I want to bind to the width of the Rectangle listArea.

When I run the code below it looks as expected. However, when I resize the window the delegate is not resized with the rectangle's changing width.

import QtQuick 2.0

Rectangle {
    id: listArea
    width: 200; height: 50
    color: "#fffcca"

    Component {
        id: contactDelegate
        Item {
            width: listArea.width; height: 40
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Text { text: '<b>Number:</b> ' + number }
            }
        }
    }

    ListModel {
        id: contactModel
        ListElement {
            name: "John Doe"
            number: "5555 1234"
        }
        ListElement {
            name: "Don Johnson"
            number: "5555 5432"
        }
    }

    ListView {
        id: contactView
        anchors.fill: parent
        model: contactModel
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

How can I make the delegate's width adapt to changing width of the outer rectangle?

Answer 1

It is already changing width with outer rectangle. Because the delegate's width property is already bound to the width of listArea. But the problem is that the highlight in contactView isn't changing it's width.
This could be fixed by bounding the width property in the highlight of contact view to be bound to the width of listArea like the contactDelegate which would make it something like this

highlight: Rectangle { color: "lightsteelblue"; radius: 5; width: listArea.width }

here is a like to the documentation about property binding http://qt-project.org/doc/qt-4.8/propertybinding.html