Control Menu

The first Windowing Button we'll look at is the Control Menu. The Control Menu allows the user to close and to change the scale and the opacity(2000/XP users only) of the current window. Since we're adding it to the Main Window, a close command exits Winamp3 entirely. Let's create a "winbuttons" Group in our Layout at (95,10), then add our new Button with:

<groupdef id="player.normal.group.winbuttons" w="206" h="31">
<!-- 95,10 -->

   <button
      id="ControlMenu"
      action="controlmenu"
      x="0" y="7"
      image="player.normal.button.menu.up"
      downImage="player.normal.button.menu.down"
      rectrgn="1"
      tooltip="Control Menu"
   />
   <layer id="MenuButtonOverlay" image="player.normal.button.menu.overlay" x="4" y="12" ghost="1" alpha="170"/>

</groupdef>

Unlike our ToggleButtons in the previous section, we're instead using the overlay method for labeling the Buttons like we did with our Control Buttons. There isn't too much to explain here, it is just a regular Button. Rather than discuss old material again, let's implement our other Windowing Buttons.

Shade, Minimize, And Close

Like the Control Menu, the Buttons for Minimize and Close are just normal Buttons. As with the Control Menu, pressing Close in the Main Window exits Winamp3. Minimize hides the Main Window, which can be revealed again by Maximizing it from the Taskbar. Let's add these two Buttons to the winbuttons Group of our skin with the follow code, then go over the Shade Button:

<button
   id="Minimize"
   action="MINIMIZE"
   x="149" y="14"
   image="player.normal.button.shade.up"
   downImage="player.normal.button.shade.down"
   rectrgn="1"
   tooltip="Minimize"
/>
<layer id="MinButtonOverlay" image="player.normal.button.min.overlay" x="152" y="20" ghost="1" alpha="170"/>

<button
   id="Close"
   action="CLOSE"
   x="189" y="0"
   image="player.normal.button.close.up"
   downImage="player.normal.button.close.down"
   rectrgn="1"
   tooltip="Close Winamp"
/>
<layer id="CloseButtonOverlay" image="player.normal.button.close.overlay" x="193" y="4" ghost="1" alpha="170"/>

The Shade Button is a little different that the other Windowing Buttons and enters a topic we're not ready to tackle yet. Using the action "SWITCH" with the param Parameter, the Shade Button enables you to change Layouts within a Container. Since we don't have any other Layouts in our Main Container, this Button will not do anything. On the other hand, it is a Windowing Button, and we might as well add it while we are working with our winbuttons Group. For now, let's just add the Button knowing that we'll use it later:

<button
   id="WinShade"
   action="SWITCH" param="Shade"
   x="169" y="7"
   image="player.normal.button.min.up"
   downImage="player.normal.button.min.down"
   rectrgn="1"
   tooltip="Switch to Shade"
/>
<layer id="ShadeButtonOverlay" image="player.normal.button.shade.overlay" x="173" y="14" ghost="1" alpha="170"/>

Our skin now looks like this:

Let's go forth to the next section to learn how to use pre-made Scripts in our skin.