I really like Apple iPhone’s “sliding checkbox” that you see everywhere. It’s much easier on the eyes and has a big “cool factor”. Now I’m not saying that all applications need a “cool factor” (especially the program I’m using this for), but every once in a while, it’s fun to add some cool things to a .NET application that you don’t get from the general toolkit.
Unfortunately, there isn’t anything that I know of that can give .NET controls a nice rounded corners, so you’ll just have to deal with the very squareish boxes in my example.
First, you need a form (obviously) and you’ll need to add a SplitContainer. You’ll probably have to go into the properties and change the “Dock” property to “None” (otherwise it fills your form). Also, you’ll want to change the “BorderStyle” to “Fixed3D”, set the “SplitterWidth” to half the width of the container, and set both Panels’ “MinSize” to “0″. Resize the whole container to the approximate size of the iPhone checkbox, and set the ‘BackColor” to white, or an offwhite. A good size would be around (65,22), but for my demonstration, I’m making mine larger.
Also, add a Label to each panel. The one in the first panel should have a blue color that is similar to the blue in the iPhone version, and the Text should be “ON”. You’ll also want to change the “Dock” for both Labels to “Fill”
The Label in the second panel should be the same color as the container backcolor, and should say “Off”. You’ll probably want to change the font in each Label, and set the “TextAlign” to “MiddleCenter”
Also, change both Labels to AutoSize = False
Here’s what it should look like so far (it looks like “O” is the only thing in the second Label, but its just being crunched because the splitter is in the middle of the container):
Now we need to add some action, so first double click on the form to bring up the “Form Load” event handler.
You’ll need to add the following (assuming you didn’t change the names of the controls):
private void Form1_Load(object sender, EventArgs e)
{
splitContainer1.SplitterDistance = 0;
splitContainer1.SplitterMoved += new SplitterEventHandler(splitContainer1_SplitterMoved);
}
This assures that when the form loads, the container will be set to “O00″. It will be giving you an error about the method not existing or something; just ignore it.
Now we need to add some click handlers for each Label. You’ll need to double click the first Label and add this code:
private void label2_Click(object sender, EventArgs e){splitContainer1.SplitterMoved -= new SplitterEventHandler(splitContainer1_SplitterMoved);for (int x = 100; x >= 0; x--){splitContainer1.SplitterDistance = x;splitContainer1.Refresh();//Thread.Sleep(1);}splitContainer1.SplitterMoved += new SplitterEventHandler(splitContainer1_SplitterMoved);}
private void label1_Click(object sender, EventArgs e)
{
splitContainer1.SplitterMoved -= new SplitterEventHandler(splitContainer1_SplitterMoved);
for (int x = 100; x >= 0; x--)
{
splitContainer1.SplitterDistance = x;
splitContainer1.Refresh();
}
splitContainer1.SplitterMoved += new SplitterEventHandler(splitContainer1_SplitterMoved);
}
Now go ahead and double click the second Label (O00) and add this code:
private void label2_Click(object sender, EventArgs e)
{
splitContainer1.SplitterMoved -= new SplitterEventHandler(splitContainer1_SplitterMoved);
for (int x = 0; x <= 100; x++)
{
splitContainer1.SplitterDistance = x;
splitContainer1.Refresh();
}
splitContainer1.SplitterMoved += new SplitterEventHandler(splitContainer1_SplitterMoved);
}
Note that depending on your size, you will have to change that “100″ in each of the loops to the width of your container divided by 2. (my container is 200 wide, so my loop has 100)
You may be wondering why I am removing and re-adding the SplitterEventHandler. It’s because if we didn’t do that, every time you try to update the splitter’s distance, it would raise the splitter moved event, which we don’t want, since we only want the user to be able to raise that event when they are dragging the splitter manually.
Now we are going to add the event handler for the splitter. Here’s the code:
private void splitContainer1_SplitterMoved(object sender, SplitterEventArgs e)
{
if (e.SplitX > 50)
{
splitContainer1.SplitterMoved -= new SplitterEventHandler(splitContainer1_SplitterMoved);
for (int x = e.SplitX; x <= 100; x++) { splitContainer1.SplitterDistance = x; splitContainer1.Refresh(); } splitContainer1.SplitterMoved += new SplitterEventHandler(splitContainer1_SplitterMoved); } else { splitContainer1.SplitterMoved -= new SplitterEventHandler(splitContainer1_SplitterMoved); for (int x = e.SplitX; x >= 0; x--)
{
splitContainer1.SplitterDistance = x;
splitContainer1.Refresh();
}
splitContainer1.SplitterMoved += new SplitterEventHandler(splitContainer1_SplitterMoved);
}
}
That should do it folks! Run your application and viola, a working iPhone style checkbox in .NET. Now if you want to know what the value is (ON or O00) you’ll have to check whether the splitter is at 0 or 100. if it’s at 0, its o00, or if its at 100, its on.
In the download below, I added a Label that tells whether it is ON or O00.
If you wanted to be really fancy, you could create a custom .NET control called IPhoneCheckBox that extends the SplitContainer control and had an custom enumeration specifying whether the control is set to “ON” or “O00″. It would require a little more code, but it really wouldn’t be that hard. If anyone asked for it, I’d give a tutorial on that too.
Have fun!
Here’s a link to the compiled EXE. All it is, is a checkbox, so I don’t think you’ll have much fun with it, but it will allow you to see the final results.
Download ZIP containing the EXE
Recent Comments