Page 1
This article will help you get up and running with the Color Button Control we sell in the DEVBUZZ Store. For a limited time we have the Color Button Control in our store for $9.95. It's incredibly easy to use, comes with full Visual Studio design-time support and will make your Pocket PC applications much more attractive.
Getting started...
First install the Color Button Control. (Color Button Installation Instructions are available here)
Next create a new Visual Basic project for Smart Device Application project.
Once you have added the Color Button control to your toolbox, as shown in the image below,
drag the Color Button control onto a form and position it where you need it to be. You can also use code to add and position the button if needed.
Now we are ready to begin setting the properties of this button. For the purposes of this exercise, let's use one of the ready-made button image sets which can be found in the ColorButton\ColorButton.Graphics\Buttons directory.
Click on the Color Button control on your form and then click on the properties tab shown in the image above.
The BackColor property specifies the color of the button - in this case "gray". The BackDownColor property specifies the color of the button when it is "pressed" (down) or clicked.
The ForeColor property specifies the color of the text when the color button control is in its rest state. The ForeDownColor property specifies the color of the text when the color button control is in its "down" or clicked state.
In this exercise, we are going to use ImageDown and the ImageUp properties. The ImageDown property specifies the image (of type System.Drawing.Bitmap) that the button will look like when it is clicked. The ImageUp property specifies what the color button will look like when it is not being clicked, or in other words, when it is "up".
Click on the ImageDown property and navigate to the ColorButton\ColorButton.Graphics\Buttons directory.
Select the 7-1.gif file you will find there. Click Open to return to the Properties tab.
Click on the ImageUp property and navigate to the ColorButton\ColorButton.Graphics\Buttons directory. Select the image file 7-2.gif. Once both properties have been specified the color button control will change color to reflect the image file you have chosen.
If you wish to change the text on your button click on the 'Text' property and enter the text you wish to see on your button.
One of the really neat aspects of the color button control is the ability to add an icon to your color button. You can either roll your own or choose an icon from the list of icons that comes bundled with the Color Button control found in the ColorButton\ColorButton.Graphics\Icons directory.
Change the text on the ColorButton1 color button to 'Print'. Now lets add an icon to our 'Print' button. In the properties tab click on icon and navigate to the icons directory and select the icon named 'icon_0008.ico'. Click 'Ok' to return to the Properties tab.
To indent the icon from the left edge of the button, simply increase the default 'IconMargin' property accordingly. For our exercise we will set the 'IconMargin' property to 6. To move the text on the button closer or further from the icon, increase or decrease the 'IconTextSpace' property according to the distance you want to see between the icon and the text. For our exercise set the 'IconTextSpace' property to 5.
Here is an avi animation demonstrating the button responding up/down events. Right click and choose 'Save As' - about 300kb. For a more detailed avi animation showing how easy the Color Button Control is to use download this file - about 2.5 MB.
Don't forget to check the DEVBUZZ forums for additional information.