Click here to Skip to main content
Click here to Skip to main content

Online TV Toolbar Splitter / Slider in C#

, 23 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Online TV Toolbar Splitter / Slider

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?


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


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


About the Author

William SerGio
Software Developer (Senior)
United States United States
I love coding and develop desktop apps (C++, C#, Java), websites, and mobile apps (iPhone, Android, Blackberry, iPad, PhoneGap/Cordova).
I am launching a new national TV series that features the best mobile apps. Show me your apps!
I have written software for Microsoft,, Quicken (Intuit), Mellon Bank, U.S. Army, U.S. Navy, Franklin Templeton, Pepsi, Universal Studios, Ryder Systems, AVID, Media 100, etc.
Bill SerGio

Comments and Discussions

GeneralMy vote of 5 PinmemberBill SerGio, The Infomercial King24-Oct-11 4:48 
GeneralMy vote of 5 PinmemberBill SerGio, The Infomercial King9-Oct-11 12:23 
QuestionNote from Author PinmemberBill SerGio, Infomercial King24-Aug-11 0:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150128.1 | Last Updated 23 Aug 2011
Article Copyright 2011 by William SerGio
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid