File modification in Visual Style
2007-3-8 11:25:00
Author: Silencer
Modification *Refer to some content from Shellstyle Tutorial of whistl3r
Preparation knowledge
Structure of
UIFiles：
UIFile1: Define form and task list styles
UIFile2: Define Control Panel Style
Resources: Resource File List
10,11,12: Music folder
13,14,15: Picture folder
16,17,18: Find
19,20,21: Video folder
22,26: Control Panel
25: System folder
100,101,102,103,104,105,106,107: Panel Open/Close Button
110,112: Panel top bar
120: Background
Strings: Define common strings or values (fonts, font sizes)
: Define the user account form style
2. Use of resources
rcstr(Str_ID)
Str_ID: Number in Strings
rcbmp(BMP_ID, STRETCHING, TRANSPARENT_COLOR, WIDTH, HEIGHT, SIZE_FLAG, MIRROR)
BMP_ID: Number in Resources
STRETCHING: Filling method 1 = Normal, 3, = Repeat, 6 = Stretch, 7 = 32bit bitmap
TRANSPARENT_COLOR: Color ignored when filling #RRGGBB
WIDTH, HEIGHT: Width, Height
SIZE_FLAG: Image size 1 = Use the default size of the image, 0 = Use the specified size
MIRROR: Inversion 0 = Normal, 1 = Inversion
rcint(Str_ID) //Convert string to numeric value
Str_ID: Number in Strings
Dtb(handlemap(a),b,c) // Guess is a way to obtain images in the current topic, but the images represented by the values of a,b,c are not very clear
sysmetric(ID) //System Variable Table
ID value:
0 Screen width
1 Screen height
2 Width of sizable window frame
3 Height of sizable window frame
4 Width of scroll arrows on vertical scroll bar
5 Height of scroll arrows on vertical scroll bar
6 Width of scroll arrows on horizontal scroll bar
7 Height of scroll arrows on horizontal scroll bar
8 Height of window title
9 Width of non-sizable window frame
10 Height of non-sizable window frame
11 Width of DOUBLE or PANEL window frame
12 Height of DOUBLE or PANEL window frame
13 Scroll box width on horizontal scroll bar in text editing windows
14 Scroll box height on vertical scroll bar in text editing windows
15 Minimized window icon width
16 Minimized window icon height
17 Maximum insertion point width
18 Maximum insertion point height
19 Single-line menu bar height
20 Maximized window width
21 Maximized window height
22 Kanji window height
23 Minimum sizable window width
24 Minimum sizable window height
25 Minimum window width
26 Minimum window height
27 Window controls width
28 Window controls height
29 1 if mouse hardware present; otherwise 0
30 1 for Microsoft Windows debugging version; otherwise 0
31 1 if mouse buttons swapped; otherwise 0
32 Width of a button in a half-caption window's caption or title bar
33 Height of half-caption window caption area
Core part
Writing UIFile
The content in the UIFile is structured as
<style resid=***>
...
Element [id=atom(*****)]
{...}
Element [id=atom(*****)]
{...}
...
...
</style>
code segment that defines the style of a specific part and its internal elements
The properties that can be included are
contentalign://Element position. There are the following values
top: topleft, topright, topcenter
middle: middleleft, middleright, middlecenter
bottom: bottomleft, bottomright, bottomcenter
wrap: wrapleft, wrapright, wrapcenter // Can only be used for text
background://Background color
foreground://Foreground color
bordercolor://Border color These 3 attributes can have the following values
rgb(red,green,blue) //RGB color
argb(alpha,red,green,blue) //Includes alpha channel
gradient(argb(alpha,red,green,blue), argb(alpha,red,green,blue), Direction) //Gradial color, the first color variable is the upper left, the second lower right Driection: Direction 0 = Horizontal, 1 = Vertical
black, white, red, green, blue, ...//Direct description
window, windowtext, buttonface, buttonshadow, buttonlight, buttontext, scrollbar, hotlight, activecaption, captiontext...//System color
fontsize://Font Size
Use Strings table values
fontface://Font
Use Strings table values
fontstyle://Font style
Use normal, bold, italic, underline and other systems
borderhickness: rect(left,top,right,bottom); //Border width
margin: rect(left,top,right,bottom); //The edge width that remains unchanged during scaling
padding: rect(left,top,right,bottom); //Element position
Take the UIFile1 of XP default theme Luna as an example
<style resid=main> //Main form
DUIListView [id=atom(listview)]//List View
{
contentalign: middlecenter;
fontsize: sysmetric(-16); //sysmetric is a system variable table, and the corresponding variable types are shown in the previous table
fontweight: sysmetric(-17);
fontstyle: sysmetric(-18);
fontface: sysmetricstr(6);
}
DUIAxHost [id=atom(preview)] //Slide browsing
{
contentalign: middlecenter;
borderthickness: rect(20rp,20rp,20rp,20rp);
bordercolor: rgb(255,0,0);
}
Element
{
background: argb(0,0,0,0);
}
Element [id=atom(blockade)] //System folder
{
background: rgb(99,117,214);
borderthickness: rect(0rp,0rp,1rp,1rp);
bordercolor: white;
}
Element [id=atom(blockadeaccent)] //The split line between the main window and the sidebar
{
background: gradient(argb(0,148,187,255), argb(0,99,117,214), 1);
}
Element [id=atom(blockadeclient)] // System folder background picture
{
contentalign: bottomright;
padding: rect (10rp,0rp,0rp,0rp);
}
Element [id=atom(blockadetitle)] //Title ("These files are hidden")
{
fontface: rcstr(2);
fontsize: rcint(18)pt;
fontweight: rcint(11);
foreground: rgb(214,223,245);
background: argb(0,0,0,0);
padding: rect (0rp,20rp,10rp,0rp);
contentalign: wrapleft;
}
Element [id=atom(blockademessage)] //Title ("This folder contains enables your system...")
{
fontface: rcstr(2);
fontsize: rcint(17)pt;
fontweight: rcint(12);
foreground: white;
background: argb(0,0,0,0);
padding: rect (1rp,15rp,10rp,0rp);
contentalign: wrapleft;
}
Element [id=atom(blockadeclear)] //"Show this folder content" General status
{
margin: rect(0rp,20rp,0rp,0rp);
}
Button [id=atom(blockadeclearbutton)][keyfocused]//"Show this folder content" keyboard trigger
{
contentalign: focusrect;
}
Element [id=atom(blockadecleartext)]
{
fontface: rcstr(1);
fontsize: rcint(15)pt;
fontweight: rcint(10);
foreground: white;
background: argb(0,0,0,0);
contentalign: wrapleft;
padding: rect (3rp,0rp,0rp,0rp);
}
Element [id=atom(blockadecleartext)][mousefocused] // "Show this folder content" mouse trigger
{
cursor: hand;
fontstyle: underline;
}
</style>
//The elements in the following blocks will not be described in detail. Please refer to the Shellstyle Tutorial of whistl3r's function.
<style resid=mainsectionss>
<style resid=mainsectiontaskss>
<style resid=sectionss>
<style resid=sectiontaskss>
<style resid=taskpane>
<style resid=NameSpaceItemInfoList>
2007-3-8 11:25:00
Author: Silencer
Modification *Refer to some content from Shellstyle Tutorial of whistl3r
Preparation knowledge
Structure of
UIFiles：
UIFile1: Define form and task list styles
UIFile2: Define Control Panel Style
Resources: Resource File List
10,11,12: Music folder
13,14,15: Picture folder
16,17,18: Find
19,20,21: Video folder
22,26: Control Panel
25: System folder
100,101,102,103,104,105,106,107: Panel Open/Close Button
110,112: Panel top bar
120: Background
Strings: Define common strings or values (fonts, font sizes)
: Define the user account form style
2. Use of resources
rcstr(Str_ID)
Str_ID: Number in Strings
rcbmp(BMP_ID, STRETCHING, TRANSPARENT_COLOR, WIDTH, HEIGHT, SIZE_FLAG, MIRROR)
BMP_ID: Number in Resources
STRETCHING: Filling method 1 = Normal, 3, = Repeat, 6 = Stretch, 7 = 32bit bitmap
TRANSPARENT_COLOR: Color ignored when filling #RRGGBB
WIDTH, HEIGHT: Width, Height
SIZE_FLAG: Image size 1 = Use the default size of the image, 0 = Use the specified size
MIRROR: Inversion 0 = Normal, 1 = Inversion
rcint(Str_ID) //Convert string to numeric value
Str_ID: Number in Strings
Dtb(handlemap(a),b,c) // Guess is a way to obtain images in the current topic, but the images represented by the values of a,b,c are not very clear
sysmetric(ID) //System Variable Table
ID value:
0 Screen width
1 Screen height
2 Width of sizable window frame
3 Height of sizable window frame
4 Width of scroll arrows on vertical scroll bar
5 Height of scroll arrows on vertical scroll bar
6 Width of scroll arrows on horizontal scroll bar
7 Height of scroll arrows on horizontal scroll bar
8 Height of window title
9 Width of non-sizable window frame
10 Height of non-sizable window frame
11 Width of DOUBLE or PANEL window frame
12 Height of DOUBLE or PANEL window frame
13 Scroll box width on horizontal scroll bar in text editing windows
14 Scroll box height on vertical scroll bar in text editing windows
15 Minimized window icon width
16 Minimized window icon height
17 Maximum insertion point width
18 Maximum insertion point height
19 Single-line menu bar height
20 Maximized window width
21 Maximized window height
22 Kanji window height
23 Minimum sizable window width
24 Minimum sizable window height
25 Minimum window width
26 Minimum window height
27 Window controls width
28 Window controls height
29 1 if mouse hardware present; otherwise 0
30 1 for Microsoft Windows debugging version; otherwise 0
31 1 if mouse buttons swapped; otherwise 0
32 Width of a button in a half-caption window's caption or title bar
33 Height of half-caption window caption area
Core part
Writing UIFile
The content in the UIFile is structured as
<style resid=***>
...
Element [id=atom(*****)]
{...}
Element [id=atom(*****)]
{...}
...
...
</style>
code segment that defines the style of a specific part and its internal elements
The properties that can be included are
contentalign://Element position. There are the following values
top: topleft, topright, topcenter
middle: middleleft, middleright, middlecenter
bottom: bottomleft, bottomright, bottomcenter
wrap: wrapleft, wrapright, wrapcenter // Can only be used for text
background://Background color
foreground://Foreground color
bordercolor://Border color These 3 attributes can have the following values
rgb(red,green,blue) //RGB color
argb(alpha,red,green,blue) //Includes alpha channel
gradient(argb(alpha,red,green,blue), argb(alpha,red,green,blue), Direction) //Gradial color, the first color variable is the upper left, the second lower right Driection: Direction 0 = Horizontal, 1 = Vertical
black, white, red, green, blue, ...//Direct description
window, windowtext, buttonface, buttonshadow, buttonlight, buttontext, scrollbar, hotlight, activecaption, captiontext...//System color
fontsize://Font Size
Use Strings table values
fontface://Font
Use Strings table values
fontstyle://Font style
Use normal, bold, italic, underline and other systems
borderhickness: rect(left,top,right,bottom); //Border width
margin: rect(left,top,right,bottom); //The edge width that remains unchanged during scaling
padding: rect(left,top,right,bottom); //Element position
Take the UIFile1 of XP default theme Luna as an example
<style resid=main> //Main form
DUIListView [id=atom(listview)]//List View
{
contentalign: middlecenter;
fontsize: sysmetric(-16); //sysmetric is a system variable table, and the corresponding variable types are shown in the previous table
fontweight: sysmetric(-17);
fontstyle: sysmetric(-18);
fontface: sysmetricstr(6);
}
DUIAxHost [id=atom(preview)] //Slide browsing
{
contentalign: middlecenter;
borderthickness: rect(20rp,20rp,20rp,20rp);
bordercolor: rgb(255,0,0);
}
Element
{
background: argb(0,0,0,0);
}
Element [id=atom(blockade)] //System folder
{
background: rgb(99,117,214);
borderthickness: rect(0rp,0rp,1rp,1rp);
bordercolor: white;
}
Element [id=atom(blockadeaccent)] //The split line between the main window and the sidebar
{
background: gradient(argb(0,148,187,255), argb(0,99,117,214), 1);
}
Element [id=atom(blockadeclient)] // System folder background picture
{
contentalign: bottomright;
padding: rect (10rp,0rp,0rp,0rp);
}
Element [id=atom(blockadetitle)] //Title ("These files are hidden")
{
fontface: rcstr(2);
fontsize: rcint(18)pt;
fontweight: rcint(11);
foreground: rgb(214,223,245);
background: argb(0,0,0,0);
padding: rect (0rp,20rp,10rp,0rp);
contentalign: wrapleft;
}
Element [id=atom(blockademessage)] //Title ("This folder contains enables your system...")
{
fontface: rcstr(2);
fontsize: rcint(17)pt;
fontweight: rcint(12);
foreground: white;
background: argb(0,0,0,0);
padding: rect (1rp,15rp,10rp,0rp);
contentalign: wrapleft;
}
Element [id=atom(blockadeclear)] //"Show this folder content" General status
{
margin: rect(0rp,20rp,0rp,0rp);
}
Button [id=atom(blockadeclearbutton)][keyfocused]//"Show this folder content" keyboard trigger
{
contentalign: focusrect;
}
Element [id=atom(blockadecleartext)]
{
fontface: rcstr(1);
fontsize: rcint(15)pt;
fontweight: rcint(10);
foreground: white;
background: argb(0,0,0,0);
contentalign: wrapleft;
padding: rect (3rp,0rp,0rp,0rp);
}
Element [id=atom(blockadecleartext)][mousefocused] // "Show this folder content" mouse trigger
{
cursor: hand;
fontstyle: underline;
}
</style>
//The elements in the following blocks will not be described in detail. Please refer to the Shellstyle Tutorial of whistl3r's function.
<style resid=mainsectionss>
<style resid=mainsectiontaskss>
<style resid=sectionss>
<style resid=sectiontaskss>
<style resid=taskpane>
<style resid=NameSpaceItemInfoList>