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

Online TV Toolbar Splitter / Slider in C#

, 23 Aug 2011
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?

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.

License

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) http://www.SerGioApps.com
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 have written software for Microsoft, MySpace.com, Quicken (Intuit), Mellon Bank, U.S. Army, U.S. Navy, Franklin Templeton, Pepsi, Universal Studios, Ryder Systems, AVID, Media 100, etc.
 
Listed in the Marquis Who's Who in America and Who's Who in Advertising.
 
Bill SerGio
http://www.SerGioApps.com
http://www.SwipeClouds.com

Comments and Discussions

 
GeneralMy vote of 5 PinmemberBill SerGio, The Infomercial King24-Oct-11 3:48 
GeneralMy vote of 5 PinmemberBill SerGio, The Infomercial King9-Oct-11 11:23 
QuestionNote from Author PinmemberBill SerGio, Infomercial King23-Aug-11 23: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 | Mobile
Web02 | 2.8.140721.1 | Last Updated 23 Aug 2011
Article Copyright 2011 by William SerGio
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid