HOWTO configure style - BodSoft DirectUI Library Help

This article demonstrates how to configure style.

Style node is under "directui/theme/dsstyle/style" in the xml file.They are three kinds of child style : textstyle, imagestyle, rectstyle. One style is a group of those child styles.

Thay are 13 kind of state:

State			Description
all	normalall	normal	uncheched, normal
		over	uncheched, the mouse is hover
		press	uncheched, the left button of mouse is press
		focus	unchecked, the control get the focus of keyboard
		disable	unchecked, disable
	checkedall	checked	checked, normal
		checkedover	checked, mouse is hover
		checkedpress	checked, the left button of mouse is press
		checkedfocus	checked, the control get the focus of keyboard
		checkeddisable	checked, disable

When the control is needed to redraw, it pass control state to style.
Style lookup the state of child styles.
If they are more than one child style matched, those child styles whill be used to draw the according the order in xml configure file.

Example1：

If the state of control is normal, the matched child styles are:

If the state of control is press, the matched child styles are:

For a detail example, see "checkbox_qq2009_style" in the control_demo.

They are six attribute of the style rectangle:

Name	Description
left	Specifies the left of rectangle.It can be negative.
top	Specifies the top of rectangle.It can be negative.
right	Specifies the right of rectangle.It can be negative.
bottom	Specifies the bottom of rectangle.It can be negative.
width	Specifies the width of rectangle.
height	Specifies the height of rectangle.

If the value of width is zero，than the value of right will be used to calculate the style rectangle.
If the value of height is zero，than the value of bottom will be used to calculate the style rectangle.

Example:

The rectangle of a button is (left : 100, top : 100, right : 200, bottom : 200). The dimensions are given in screen coordinates that are relative to the upper-left corner of the screen.

Case 1:

<text state=”all” left=”10” top=”10” width=”50” height=”50” right=”0” bottom=”0”...

Style Rectangle : (110,110,160,160) The right and bottom attribute are discarded in this case.

Case 2:

<text state=”all” left=”-10” top=”-10” width=”50” height=”50” right=”0” bottom=”0”...

Style Rectangle :(190,190,200,200) The right and bottom attribute are discarded in this case.

Case 3:

<text state=”all” left=”-50” top=”-50” width=”0” height=”0” right=”-40” bottom=”-40”...

Style Rectangle :(150,150,160,160) The right and bottom attribute are used because the value of width and height are zero.

Imagestyle draw a image to the destination rectangle.

3.1 Image selection rectangle.

The image created by the art designer is look like this:

The width of the image is 69 pixels.
The height of the image is 105 pixels.
The image can split into five part. Each part of image called selection.

Example 1:

selectleft=”0” selecttop=”0” selectwidth=”69” selectheight=”21”

The first part of the image is selected.

Examle 2:

selectleft=”0” selecttop=”21” selectwidth=”69” selectheight=”21”

The second part of the image is selected.

3.2 Paint mode

3.2.1 normal

Normal mode copies the image selection into the destination rectangle.

3.2.3 stretch

Stretch mode stretching or compressing the image selection into the destination rectangle.

3.2.3 tile

Tile mode tile the image selection into the destination rectangle.

3.2.4 stretchhorz

The image aboved show the stretchhorz mode.
The left_part and right_part are copy into the destination rectangle.
The center part of image selection are stretched or compressed into the destination rectangle.
Contrast to the stretch mode, the border of image is distortion.

3.2.5 stretchvert

The image aboved show the stretchvert mode.
The top_part and bottom_part are copy into the destination rectangle.
The center part of image selection are stretched or compressed into the destination rectangle.
Contrast to the stretch mode, the border of image is distortion.

3.2.6 stretchpartall

The image aboved show the stretchpartall mode.
The 1,3,7,9 eara are copy into the destination rectangle. Those eara are four corner of image selection.
The 2,4,5,6,8 eara are stretched or compressed into the destination rectangle.
This mode is usually used to draw the back image of window and button.

Text style draw a text into the destination rectangle.

Rectangle style fill the destination rectangle use a brush and draw the border use a pen.