📄 splitter.html.primary
字号:
<html>
<head>
<title>Splitter Bar</title>
<meta name="description" content="Reliable software Win32 Tutorial">
<meta name="keywords" content="splitter, mouse capture, reliable, software, windows, cplusplus">
</head>
<body background="../images/grid.gif" bgcolor="white" text="black">
<table cellpadding=10 width="100%">
<tr>
<td width=100 align="center" valign="middle">
<a href="../index.htm">
<img src="../images/rsbullet.gif" alt="RS" border=0 width=39 height=39>
<br>Home</a>
</td>
<td><font face="arial" color="#009966">
<h1 align=center>Splitter Bar</h1>
</font>
</td>
</tr>
</table>
<table width="100%"><!-- main table -->
<tr>
<td width=10> <!-- Left margin --> </td>
<td> <!-- Middle column, there is also the right margin at the end -->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td bgcolor=white>
<hr>
<img src="images/splitter.gif" width=242 height=137 border=0 alt="splitter" align="left" hspace=10>
A splitter bar is a useful control that is not part of the Windows' common bag of controls. How difficult is it to implement it? Not so difficult, as it turns out, once you know the basics of Windows API. The description that follows might seem complicated at first, but you'll be learning several very important techniques that can be used over and over in a variety of situations. Working with child windows, mouse capture, drawing using xor mode, just to mention a few.
<p>A splitter bar is a window. More precisely, it's a child window. It is positioned between two other child windows--we'll call these left and right panes, respectively (or top and bottom, for a horizontal splitter). There must also be a main window that fathers the three children.
<p>Without farther ado, here's the code in WinMain that sets up the stage.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080">
<pre>// Create top window class
TopWinClassMaker topWinClass (WndProcMain, ID_MAIN, hInst, ID_MAIN);
topWinClass.Register ();
// Create child pane classes
WinClassMaker paneClass (WndProcPane, IDC_PANE , hInst);
paneClass.SetSysCursor (IDC_IBEAM);
paneClass.SetDblClicks ();
paneClass.Register ();
<font color="Red">Splitter::RegisterClass (hInst);</font>
// Create top window
ResString caption (hInst, ID_CAPTION);
TopWinMaker topWin (caption, ID_MAIN, hInst);
topWin.Create ();
topWin.Show (cmdShow);</pre>
<!--End Code-->
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
First, we register classes. The top window class is associated with its window procedure <font color="#cc0066"><b>WndProcMain</b></font>, which we'll examine in a moment. The two child panes share the same window class associated with <font color="#cc0066"><b>WndProcPane</b></font>. Next, our own splitter class is registered (we'll see the code soon). Finally, the top window is created and displayed. Child windows are created dynamically during the initialization of the parent window.
<p>Here's the window procedure of the top window.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>LRESULT CALLBACK <font color="#cc0066"><b>WndProcMain</b></font> (HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam)
{
Controller * pCtrl = GetWinLong<Controller *> (hwnd);
switch (message)
{
case WM_CREATE:
try
{
pCtrl = new Controller (hwnd, reinterpret_cast<<font color="#009966">CREATESTRUCT</font> *>(lParam));
SetWinLong<Controller *> (hwnd, pCtrl);
}
catch (char const * msg)
{
<font color="#000099"><b>MessageBox</b></font> (hwnd, msg, "Initialization",
MB_ICONEXCLAMATION | MB_OK);
return -1;
}
catch (...)
{
<font color="#000099"><b>MessageBox</b></font> (hwnd, "Unknown Error", "Initialization",
MB_ICONEXCLAMATION | MB_OK);
return -1;
}
return 0;
case WM_SIZE:
pCtrl->Size (LOWORD(lParam), HIWORD(lParam));
return 0;
<font color="Red">case MSG_MOVESPLITTER:
pCtrl->MoveSplitter (wParam);
return 0;</font>
case WM_DESTROY:
SetWinLong<Controller *> (hwnd, 0);
delete pCtrl;
return 0;
}
return ::<font color="#000099"><b>DefWindowProc</b></font> (hwnd, message, wParam, lParam);
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>It's a pretty standard window procedure, except for one message, <b>MSG_MOVESPLITTER</b>. This is our own, user-defined message that is sent by the splitter control to the parent window. But first, let's have a look at the main window controller.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>class <font color="#cc0066"><b>Controller</b></font>
{
public:
Controller (HWND hwnd, CREATESTRUCT * pCreat);
~Controller ();
void Size (int cx, int cy);
<font color="Red">void MoveSplitter (int x);</font>
private:
<font color="Red">enum { splitWidth = 8 }</font>; // width of splitter
// User Interface
HWnd _hwnd; //Main controller window
HWnd _leftWin;
HWnd _rightWin;
<font color="Red">HWnd _splitter;</font>
<font color="Red">int _splitRatio;</font> // in per cent
int _cx;
int _cy;
};
</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
It has a handle to itself, the two child panes, and the splitter window. It also stores the current split ratio, in percent.
<p>The controller's constructor is responsible for the creation of child windows.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre><font color="#cc0066"><b>Controller::Controller</b></font> (HWND hwnd, CREATESTRUCT * pCreat)
:
_hwnd (hwnd),
_leftWin (0),
_rightWin (0),
_splitter (0),
_splitRatio (50)
{
// Create child windows
{
ChildWinMaker leftWinMaker (IDC_PANE, _hwnd, ID_LEFT_WINDOW);
leftWinMaker.Create ();
_leftWin.Init (leftWinMaker);
leftWinMaker.Show ();
}
{
ChildWinMaker rightWinMaker (IDC_PANE, _hwnd, ID_RIGHT_WINDOW);
rightWinMaker.Create ();
_rightWin.Init (rightWinMaker);
rightWinMaker.Show ();
}
<font color="Red">Splitter::MakeWindow (_splitter, _hwnd, ID_SPLITTER);</font>
}
</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
When the user drags the splitter bar, the parent receives the <b>MSG_MOVESPLITTER</b> messages. The parameter <b>wParam</b> contains the new distance of the splitter bar from the left edge of the parent window. In response to such a message, the parent has to resize both child panes and move the splitter. It does it by calling the <font color="#cc0066"><b>Size</b></font> method.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>void <font color="#cc0066"><b>Controller::MoveSplitter</b></font> (int x)
{
_splitRatio = x * 100 / _cx;
if (_splitRatio < 0)
_splitRatio = 0;
else if (_splitRatio > 100)
_splitRatio = 100;
Size (_cx, _cy);
}
</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
In general, <font color="#cc0066"><b>Size</b></font> is called whenever the user resizes the main window, but as you've just seen, we also call it when the splitter is moved.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>void <font color="#cc0066"><b>Controller::Size</b></font> (int cx, int cy)
{
_cx = cx;
_cy = cy;
int xSplit = (_cx * _splitRatio) / 100 - splitWidth;
if (xSplit < 0)
xSplit = 0;
<font color="Red">_splitter.MoveDelayPaint (xSplit, 0, splitWidth, cy);</font>
_leftWin.Move (0, 0, xSplit, cy);
_rightWin.Move (xSplit + splitWidth, 0, cx - xSplit - splitWidth, cy);
<font color="Red">_splitter.ForceRepaint ();</font>
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
Notice an important trick here. We move the splitter, but delay its repainting until both panes, to its left and to its right, are resized. This technique eliminates some nasty <i>smudging</i>.
<hr size="6" color="Blue">
<b><font size="+1">That's it as far as client code goes. Now you might be interested to see the implementation of the splitter.</font></b>
<hr>
First of all, we like to combine related functions into namespaces. You've seen the calls to <b>Splitter::RegisterClass</b> and <b>Splitter::MakeWindow</b>. The <b>Splitter</b> part of these names is the namespace.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>namespace <font color="#cc0066"><b>Splitter</b></font>
{
void <font color="#cc0066"><b>RegisterClass</b></font> (HINSTANCE hInst);
void <font color="#cc0066"><b>MakeWindow</b></font> (HWnd & hwndSplitter /* out */, HWnd hwndParent, int childId);
};</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
Here's how these functions are implemented
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
<pre>LRESULT CALLBACK WndProcSplitter (HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam);
void <font color="#cc0066"><b>Splitter::RegisterClass</b></font> (HINSTANCE hInst)
{
WinClassMaker splitterClass (WndProcSplitter, "RsSplitterClass", hInst);
splitterClass.SetSysCursor (IDC_SIZEWE);
splitterClass.SetBgSysColor (COLOR_3DFACE);
splitterClass.Register ();
}
void <font color="#cc0066"><b>Splitter::MakeWindow</b></font> (HWnd & hwndSplitter, HWnd hwndParent, int childId)
{
ChildWinMaker splitterMaker ("RsSplitterClass", hwndParent, childId);
splitterMaker.Create ();
hwndSplitter.Init (splitterMaker);
splitterMaker.Show ();
}</pre>
<!--End Code--></font>
</td>
<td width=20> </td>
</tr>
</table>
<!--End of yellow background-->
<hr>
The mouse cursor, <b>IDC_SIZEWE</b>, that we associate with the splitter class is the standard Size-West-East double arrow. We also set the background brush to <b>COLOR_3DFACE</b>.
<p>The splitter's window procedure deals with splitter's creation/destruction, painting and mouse dragging.
<hr>
<!--Yellow background-->
<table cellpadding=10 cellspacing=0 width="100%">
<tr>
<td width=20> </td>
<td bgcolor="#e0e080"><font color="#000000">
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -