How to use 9 patch png images on QML?

I'm making user interface using QML.

I was asked to use 9.png image files for this UI.

The size of this image is 82X94 pixels and I have to use this image for 1280X92 background.

I wrote the source code below.

Image {
    id: bgMode
    x: 0; y: 0
    width: 1280; height: 92
    source: "qrc:/res/img/bg_mode.9.png"
}

However, this code breaks the image while stretching it vertically.

I'm supposed to stretch the image without making it like slimy dough.

I thought there would be some program which edits 9 patch image files.

So I googled and found this.

Hoever, I couldn't run this program using JRE.

The error message says it cannot find 'com.alee.extended.ninepatch.NinePatchEditorFrame'.

I gave up using this program here.

I googled if QML supports 9 patch image.

Image Style type seems relevant, but I couldn't figure out how to actually use it.

This stackoverflow page recommends BorderImage type. So I wrote source code below.

BorderImage {
        id: bgMode
        x: 0
        y: 0
        width: 1280; height: 92
        verticalTileMode: BorderImage.Round
        horizontalTileMode: BorderImage.Stretch
        border.left: 1; border.right: 1
        source: "qrc:/res/img/bg_mode.9.png"
}

But this code still breaks the image.

How to use 9 patch images on QML?

Is there something I'm missing or doing wrong?

Solution

On the Qt documentation page you have very good explanation. https://doc.qt.io/qt-5/qml-qtquick-borderimage.html The only thing you need to know is where those 2 vertical and two horizontal lines are placed (distance from the edge of the image).

border { left: 30; top: 30; right: 30; bottom: 30 }

Image will be spitted into 9 regions. If you do not want to stretched them horizontally but repeat use horizontalTileMode: BorderImage.Repeat property. Other modes are listed here https://doc.qt.io/qt-5/qml-qtquick-borderimage.html#horizontalTileMode-prop