| The UIS2 Tutorial - Controls | ||||||
|
Now you will be familiar enough with the way that UIS code works that you should be able to quickly skin all the other controls within Windows. We will go through them all at a fair pace, so don’t be afraid to look back at earlier code samples if you need to check the meaning of something. Toolbars Buttons which are in the toolbar are skinned by this section. The code is now familiar, and you will notice that these buttons are also animated here. The only parameter you are likely to be unfamiliar with is the NoPaintFirstFrame parameter. If you are using Windows XP, then you can set the value of this parameter to 1. This will improve speed if you use toolbar backgrounds. The states within this image are as follows: 1.
Because of the animation, there are actually more frames than this, but the first five frames are as above. [ToolBars] Scrollbars Scrollbars can be both horizontal and vertical and you need to design for both. For each you need to define both the background and the actual scrollbar slider. The other section required is to define the arrows at either end of the scrollbars. The image structure is as follows: 1.
Normal Left
All these should make sense with exception of the ‘dots’ and ‘corner’. The dots are actually the handle that can be displayed on the center of each scrollbar slider. Where a horizontal and vertical scrollbar meet there is a square area which is the ‘Corner’. The diagram below demonstrates this. The code is as follows and should be immediately recognizable. The only thing that might appear unusual is that there is the AnimRate parameter, without the rest of the animation parameters that are usually present.. This is because the other parameters are specified in the horizontal and vertical scrollbars, but the rate at which the animate must be standard and is specified here. [Scrollbar] The below code specifies the background to the scrollbar, and the code is standard. The states for the graphic are as follows: 1.
Normal scrollbar background [HorzScroll] The actual scrollbar slider is described in the section below. The structure of the graphic is given below, and where a ‘dot’ has been specified and the slider is large enough it will be placed in the centre. 1.
[HorzScrollThumb] This is the image and the boundaries. ShowDot=0 This parameter in the skin allows you to specify if a ‘dot’ should be drawn. In this case it is not done, but a value of 1 would draw the image specified in the [scrollbar] image. Tile=1 In the scrollbar, you can specify individually whether the areas of the sides within the boundaries are tiled or stretched. Alpha=180 These settings indicate that the image should have transparency applied, and the degree to which it is applied. FrameCount=9 Earlier, an [AnimRate] was specified which means that the image will be animated. There are 3 states required and additional frames are used for the animation. As there are 9 frames in this image, the final 6 will be used for the animation. The two sections below are the complimentary sections for the vertical scrollbar. [VertScroll] [VertScrollThumb] Groupboxes There are two sections for GroupBoxes. The first is the background, and the second is the header which goes behind any text labeling the box. The background simply has 2 states; the first is for a labeled box, and the second for an unlabelled box. The code specifies the boundaries and the Trans parameter indicates that ‘Magic pink’ is used specify transparent areas.
The [GroupBox] section specifies the image which goes behind any text labeling the box. [GroupBox] The image that is to be placed behind text is specified here, and boundaries are set. BackgroundAlignment=1 This specifies how the background image should be aligned in relation to the text. The alignment choice is taken from the below options: 1.
Left Justified The BackgroundLeftShift and BackgroundRightShift parameters specify how far the image extends either side of the text. A negative value extends the image from the edge of the text away from the centre of the text. NormalLayout=0 The way that the text is placed in the area is predefined by a preset layout which is described later. NormalFont=1 Here the font style and colors are set to preset values. Progress Bars Progress bars are displayed when the computer is performing a function that takes a period of time such as downloading a file from the Internet. The image consists of two halves. The first is the background, and the second is the actual bar. The code is standard apart from the tiling parameters. The Tile parameter specifies whether to Stretch or Tile the Progress Bar image. If you choose to Tile, you must use the advanced TileMode parameter. This parameter is a specialized command which allows choices for stretching/tiling of the two parts of the image to be specified in a single parameter:
[Progress] Tabs Tabs are skinned much like many other controls. The first thing you will notice is that you need to specify two images. The first is the border of the tabbed dialogue, and the second is to specify the actual tabs themselves. The Border is a single graphic, and the tab Image contains five states: 1.
It is this tab Image that the border and tiling parameters apply to. The Preset fonts and colors apply to the text on the tab. [Tabs] Headerbars Lists in Windows often have header bars, which typically indicate the data in the column beneath them. You can also skin these using WindowBlinds. The image
actually contains five states, though only the first two are currently
used. The first fifth of the image should contain the [Headerbar] These are standard image, border and transparency settings. ContentBottom=3 The first four parameters specify how far from each edge the content should appear. If you were to set the fifth parameter to a value of 1 this would prevent text being shifted away from its normal position. DefaultColour=0 Here the font style and colors are set to preset values. Status Bars Status bars appear at the bottom of many application windows and hold important information (usually!). They are very simple to skin. All you have to do is set three states: 1.
Sunk The code below is all very standard. [StatusBarEdges] Rebars Toolbars can be moved around using Rebar grips. All you need to do to skin them is to specify the image, and the transparency settings you want to use. [REBARGRIP] Combo Buttons
Combo buttons are made up of three sections which work together to make up the entire image. The first is the actual ‘sunken area’ in which the text appears, the second is the drop down button, and the third is the arrow on the button.
In each case the parameters are all ones you know. All you need to know are the different states. SunkEdge States: 1.
[SunkEdge] ComboButton States: 1.
[ComboButton] SunkEdge States: 1.
It seems bizarre that the StatusBar resize grip is in this section, but there it is! This is the area that can be grabbed to resize windows. [ExtraImages]
|
