| The UIS2 Tutorial - Windows XP | ||||||||
|
Windows XP offers extra opportunities for skinning under WindowBlinds 3 as there is an entirely new area to skin, the XP start menu and taskbar. You can also skin the backgrounds of tab controls. WindowBlinds chooses to keep XP specific code in a separate file. This increases efficiency because if you are not using Windows XP then it doesn’t need to be loaded. In order to specify where WindowBlinds can find this information you need to enter the below code into the UIS file. [XPTaskbar] The XP Start Menu The first thing to do is to understand the different components to the Start menu which can be skinned. We will now go through these sections one at a time. Menu & MenuItem These two items function subtly differently to the menus which were covered previously. [StartPanel.Menu] The Menu graphic is specified, as are the non stretched boundaries. ContentLeft=2 The four Content parameters define how far from the edges of the menus content within the menu should actually be placed. TextFont=4 The final three parameters specify the color and font presets which should be used for the actual menu text. The structure of the MenuItem graphic for the XP Start Menu is as follows: 1.
[StartPanel.MenuItem] The graphic is specified and the transparency parameters are specified as has been done in many other sections. LeftWidth=8 The boundaries which are not stretched are defined. ContentLeft=3 As per the above section, these four parameters specify how far in from the edge the content should start. TextFont=4 These are the presets for the font and the font colors, again as have been used previously. Separators There are two separators to deal with, one each for the Programs list and the Places list. [StartPanel.ProgListSeparator] The graphic is defined and the required boundaries are set (only left and right are needed with this source graphic), and transparency for the source graphic is set. [StartPanel.PlacesListSeparator] All that is required here is to specify the source graphic. The User Pane At the top of the Start Menu is a solid block containing a graphic on which sits the graphic specified by the currently logged on user. The picture is defined in the section below, the code for which should be familiar by now. [StartPanel.UserPicture] The picture sits in top of a solid bar. The bar is defined in the section below as is the way the users name is written. [StartPanel.UserPane] The username is displayed using a preset font in a preset color. Image=Aquarium\toppanel.bmp Familiar settings are used to define the actual bar. You specify the graphic, whether is contains the ‘magic pink’ for transparency and the edges and content boundaries. You specify whether to tile or stretch the remaining graphic via the Tile parameter. All these parameters should be fairly familiar to you. The Program List The left hand side of the Start Menu contains two sections; the main list of programs (both those pinned to the Start Menu and the most recently used), and the More Programs section. [StartPanel.ProgList] What you see here is all familiar code. There is a single image for the graphic and the usual code for transparency and boundaries. There is also code for the text style and color which are again chosen from presets. Underneath the Program List is the section for More Programs. This consists of two skinable components; the background (including the text style), and the button to pop up the menu. [StartPanel.MorePrograms] This code has the same structure as the Program Section. Obviously you can specify an entirely different graphic and font style. Here, underneath the Program List is the section for More Programs. This consists of two skinable components; the background (including the text style), and the button to pop up the menu. The image consists of three states:
[StartPanel.MoreProgramsArrow] This code again specifies the image, whether transparency is used, the boundaries (on the top and bottom), and whether the centre of the image should be tiled or stretched. The Places List The Places List makes up the right side of the Start Menu and the code is identical in structure to the Program List that was covered earlier. [StartPanel.PlacesList] The Bottom Bar This is the block at the bottom of the Start Menu that contains the buttons for logging off and closing down the computer. The code below is again similar, detailing the graphic, its borders and the text style to be used. [StartPanel.BottomBar] The XP Taskbar The first thing to remember is that the taskbar can be docked against any side of the screen and therefore your skin must cater for both horizontal and vertical taskbars. In the following code sections you will frequently find sections replicated for each, with the same parameters applying to each. The first sections to deal are for the taskbar itself, and the ‘resize handle that allows you to adjust the height (for taskbars on the top/bottom of the screen), and the width (for taskbars on the left/right of screen). [Taskbar.Horz] This code simply specifies the single graphic to be used, the borders, and whether the central part is stretched or tiled; in this case ‘stretched’. [Taskbar.SizeHorz] If the taskbar is not locked, then you will see a resize handle which is specified by this section of code. All you need to do is specify the graphic and whether to stretch or tile this along the length of the taskbar. The below code replicates the above for vertical taskbars on the left or right edge of the screen. [Taskbar.Vert] [Taskbar.SizeVert] The Start Button The Start Button is very simple to create, and this can be expanded on quite easily if you intend to animate the button. The button can contain as many frames as you want, although the first five must represent the following states: 1.
If you examine the actual image used in the Aquarium skin you will see that there are many more frames. These are for the animate as we saw in the frames, and the animation code is very similar. Remember that references to frame numbers start at 0 not 1. [Taskbar.StartButton] Here we have standard code for the image, tiling/stretching and transparency. FrameCount=18 As per the frame animation, this code details the number of frames in the image, the interval between frames in the animation, and then the frames to be used in different circumstances and the way the animation should end. Taskbar Buttons The button code consists of three key elements; defining the image and boundaries, the presets for colors and fonts, and any animation. The code again needs to be replicated for both horizontal and vertical taskbars. [Taskbar.ButtonHorz] Here we have standard code for the image, tiling/stretching and transparency and the Content boundaries as explained previously. NormalColour=0 The Presets code for fonts and color is exactly as the same as we have seen before, with the exception of two new parameters (GroupFont and GroupColour). Under Windows XP where the user has several instances of the same program open at once, they can be grouped into a single button. A number indicates how many instances of that application are open. It is this number that these two parameters refer to. FrameCount=11 This is the same structure of animation code that is used in the Start Button. Below is the companion code for the buttons in vertical taskbars. [Taskbar.ButtonVert] Rebars Where a taskbar is not locked, rebars allow you to resize individual toolbars within the taskbar such as the Quick Launch, Application, and Language taskbars.
Again, we have standard code for the image, tiling/stretching and transparency and a preset for any text used in the toolbars. [Taskbar.RebarVert] The XP System Tray The system tray is also highly customizable by WindowBlinds. The final XP specific area first thing to do is to understand the different components to the Start menu which can be skinned. The code is standard and you will have seen it all before. [Taskbar.TrayHorz] [Taskbar.TrayVert] The clock can also be given a preset font style and color to increase consistency within your theme. [Taskbar.Clock] The final element of the tray which needs to be skinned is a new feature in Windows XP. Under Windows XP the system tray can expand and contract to minimize the space it takes. There is an arrow button next to the tray that enables you to do this manually. There are three states for the contracted button (which should be clicked to expand the tray), and 3 for the button when the tray is expanded.
1.
Contracted The code below will be very familiar, and is replicated for both horizontal and vertical states. [Taskbar.ButtonArrow] [Taskbar.ButtonArrowVert] Tab Backgrounds Tab control backgrounds can now be skinned under Windows XP. A lot of applications tend to fill this area with the dialog color so often this image is not seen. Aquarium does not use this feature, but the code is standard image, tiling/stretching and transparency code as used in sections such as the [Taskbar.ButtonArrow] section.
|
