Home · All Classes · All Functions · Overviews

QML BorderImage Element Reference

[Inherits Item]

The BorderImage element provides an image that can be used as a border. More...

Properties

Detailed Description

         BorderImage {
             width: 180; height: 180
             border.left: 30; border.top: 30
             border.right: 30; border.bottom: 30
             horizontalTileMode: BorderImage.Stretch
             verticalTileMode: BorderImage.Stretch
             source: "content/colors.png"
         }

         BorderImage {
             width: 180; height: 180
             border.left: 30; border.top: 30
             border.right: 30; border.bottom: 30
             horizontalTileMode: BorderImage.Round
             verticalTileMode: BorderImage.Round
             source: "content/colors.png"
         }


Property Documentation

border.left : int
border.right : int
border.top : int
border.bottom : int

The 4 border lines (2 horizontal and 2 vertical) break an image into 9 sections, as shown below:

When the image is scaled:

Each border line (left, right, top, and bottom) specifies an offset from the respective side. For example, border.bottom: 10 sets the bottom line 10 pixels up from the bottom of the image.

The border lines can also be specified using a .sci file.


horizontalTileMode : TileMode
verticalTileMode : TileMode

This property describes how to repeat or stretch the middle parts of the border image.


progress : real

This property holds the progress of image loading, from 0.0 (nothing loaded) to 1.0 (finished).

See also status.


smooth : bool

Set this property if you want the image to be smoothly filtered when scaled or transformed. Smooth filtering gives better visual quality, but is slower. If the image is displayed at its natural size, this property has no visual or performance effect.

Note: Generally scaling artifacts are only visible if the image is stationary on the screen. A common pattern when animating an image is to disable smooth filtering at the beginning of the animation and reenable it at the conclusion.


source : url

BorderImage can handle any image format supported by Qt, loaded from any URL scheme supported by Qt.

It can also handle .sci files, which are a Qml-specific format. A .sci file uses a simple text-based format that specifies the borders, the image file and the tile rules.

The following .sci file sets the borders to 10 on each side for the image picture.png:

 border.left: 10
 border.top: 10
 border.bottom: 10
 border.right: 10
 source: picture.png

The URL may be absolute, or relative to the URL of the component.


status : enum

This property holds the status of image loading. It can be one of:

See also progress.



Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0