Online TV Toolbar Splitter / Slider in C#

• Download source - 74.23 KB

Introduction - Online TV Toolbar Splitter

I wrote the first online TV Toolbar in 1997 that plays TV shows and videos inside your browser. See the new version of my TV Toolbar in Visual Studio 2008 which can be found at:
TVToolbar in vs2008.

This article will seem trivial to some readers and an epiphany to others. Everyone has seen the Splitter icon in the Google toolbar that allows you to stretch the search dropdown to the right or left. The first time I saw this, I was impressed and then I realized that it was trivial to do this. But what surprised me was that nobody had incorporated a slider into any of the sample toolbars on this website or any of the other code websites like this one in any sample toolbars. So I decided to post this article that I am sure some people will say is trivial and that other readers will say, "Oh, so that is how you do it!"

To make the toolstrip look really cool, I added a rendering class from an article on CodeProject, namely: An advanced rendering class by Epoque.

How It's Done is Really Simple

Whether you are coding in C# or C++ or Javascript, the trick to the Toolbar Slider is simple. You add a button to the ToolStrip and set the display property to Image. Create a "Slider" icon that can be a GIF or PNG image of the image the user will mousedown on to slider the search box. We then implement the following mouse methods:

private void btnSlider_MouseEnter(object sender, EventArgs e) 
{ 
     this.toolStrip1.Cursor = Cursors.SizeWE; 
} 

static int oldX = 0; 
private void btnSlider_MouseDown(object sender, MouseEventArgs e) 
{ 
     oldX = e.X; 
} 

private void btnSlider_MouseMove(object sender, MouseEventArgs e) 
{ 
     if (e.Button == MouseButtons.Left) 
     { 
          this.searchComboBox.Width += e.X - oldX;
     } 
} 

private void btnSlider_MouseLeave(object sender, EventArgs e) 
{ 
     this.toolStrip1.Cursor = Cursors.Default; 
}   

Online TV Toolbar Tips

In an Internet Explorer toolbar, you may want to add some additional code to handle flickering that may occur as the splitter is moved from side to side, but I leave that to the reader. I would also suggest adding to the Enter and Leave events changing the icon to another icon that helps to indicate to the user that the slider is activated. I thought about adding a pulsing or throbbing icon on these events that indicates that the Splitter is ready to slide. By the way, is it a "splitter" or a "slider?"

The Splitter Icon in the Online TV Toolbar

I don't know if Google was first in creating this icon, but frankly I am not impressed with the artwork whoever created it. If you look closely, you will see that the arrow on the left is touching the vertical line and the arrow on the right is away from the vertical line in Google's toolbar. I don't know if this was intentional or accidental but a good artist could certainly improve on this crappy looking icon. Are there any good artists out there?

Summary

This project is for beginners to illustrate how to implement a toolbar splitter in C# like in the Google Search Toolbar. If you have any questions, please feel free to contact me at tvmogul1@yahoo.com.

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)