WPF换肤之二：可拉动的窗体
在这一章，我主要是实现对圆角窗体的拖动，改变大小功能。
拖动自绘窗体的步骤
首先，通过上节的设计，我们知道了如何设计一个圆角窗体，通过XAML代码量，我们发现设置这个窗体是多么的简单。但是如何让窗体能够进行Resize呢？
在Winform时代，我们通过WndProc(ref Message m)处理窗体界面消息来实现，那么在WPF中是否也是如此呢？
其实在WPF中，虽说封装比较紧密，但是对于处理界面消息这块，和WINFORM一样，未有所改变。下面请看具体设计：
首先，由于要涉及到和Win32交互，我们需要订阅SourceInitialized事件。
public MsgWindow() { InitializeComponent(); this.SourceInitialized += new EventHandler(WSInitialized); }
然后，由于涉及到SourceInitialized Event，我们就需要使用到HwndSource，它主要功能就是WPF放入到Win32窗体中。让我们看看WindowSourceInitialized事件：
void WSInitialized(object sender, EventArgs e) { hs = PresentationSource.FromVisual(this) as HwndSource; hs.AddHook(new HwndSourceHook(WndProc)); }
接下来我们看到，窗体Hook了一个 HwndSourceHook的委托，这个委托能够接受所有经过Windows的消息。我们来看看WndProc函数：
Dictionary<int, int> messages = new Dictionary<int, int>(); private IntPtr WndProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handled) { Debug.Print(string.Format("窗体消息: {0}, wParam: {1} , lParam: {2}", msg.ToString(), wParam.ToString(), lParam.ToString())); if (messages.ContainsKey(msg) == false) { messages.Add(msg, msg); // 添加接收到的WIndows信息到ListBox中 listMsg.Items.Add(msg); } return new IntPtr(0); }
这个函数会接收到所有windows消息，打印到Debug台上。
接下来，知道了事件处理流程，我们开始讨论拖拉窗体的问题。
首先，我们先给窗体添加一个ResetCursor事件，以便于拖拉结束后，恢复鼠标指针：
<Window x:Class="WpfApplication1.MsgWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="TestWindow" Height="391" Width="418" WindowStyle="None" AllowsTransparency="True" Background="Transparent" OpacityMask="White" ResizeMode="NoResize" PreviewMouseMove="ResetCursor" WindowStartupLocation="CenterScreen">
其次，我们给Border元素添加一个MouseMove事件，用来显示鼠标特定情况下的鼠标指针形状（如达到了窗体边缘，则变换为拖拉的鼠标形状），同时添加一个PreviewMouseDown事件，用来进行Resize操作（也就是鼠标左键按下，开始进行拖放）：
<Border BorderThickness="5" BorderBrush="DarkGreen" CornerRadius="10,10,10,10" MouseMove="DisplayResizeCursor" PreviewMouseDown="Resize" Name="top">
这样，当事件添加好以后，我们转换到后台代码：
由于窗体总共有八个地方可以进行拖拉，分别是Top，TopRight，Right，BottomRight,Bottom,BottomLeft,Left,TopLeft,那么我们先声明一个Enum：
public enum ResizeDirection { Left = 1, Right = 2, Top = 3, TopLeft = 4, TopRight = 5, Bottom = 6, BottomLeft = 7, BottomRight = 8, }
在Win32中，由于61440+1 代表左边，61440+2代表右边，一次类推，所以我们需要进行如下设计：
[DllImport("user32.dll", CharSet = CharSet.Auto)] private static extern IntPtr SendMessage(IntPtr hWnd, uint Msg, IntPtr wParam, IntPtr lParam); private void ResizeWindow(ResizeDirection direction) { SendMessage(hs.Handle, WM_SYSCOMMAND, (IntPtr)(61440 + direction), IntPtr.Zero); }
其中，WM_SYSCOMMAND为Int类型，初始值为0x112，它的解释如下：
| WM_SYSCOMMAND |
0x112 |
A window receives this message when the user chooses a command from the Window menu (formerly known as the system or control menu) or when the user chooses the maximize button, minimize button, restore button, or close button. |
这样，通过上面的函数，我们就可以实现窗体的Resize，下面我们来响应鼠标事件：
首先是窗体的ResetCursor事件，这个主要是用来恢复鼠标形状：
private void ResetCursor(object sender, MouseEventArgs e) { if (Mouse.LeftButton != MouseButtonState.Pressed) { this.Cursor = Cursors.Arrow; } }
然后我们来看看DisplayResizeCursor事件，它主要是用来改变鼠标形状，当鼠标达到一定区域，则显示拖拉的鼠标形状(<->)：
其计算方式，请参看下图：
private void DisplayResizeCursor(object sender, MouseEventArgs e) { Border clickBorder = sender as Border; Point pos = Mouse.GetPosition(this); double x = pos.X; double y = pos.Y; double w= this.Width; double h= this.Height; this.label1.Content = x + "--" + y; if (x <= relativeClip & y <= relativeClip) // left top { this.Cursor = Cursors.SizeNWSE; } if (x >= w - relativeClip & y <= relativeClip) //right top { this.Cursor = Cursors.SizeNESW; } if (x >= w - relativeClip & y >= h - relativeClip) //bottom right { this.Cursor = Cursors.SizeNWSE; } if (x <= relativeClip & y >= h - relativeClip) // bottom left { this.Cursor = Cursors.SizeNESW; } if ((x >= relativeClip & x <= w - relativeClip) & y <= relativeClip) //top { this.Cursor = Cursors.SizeNS; } if (x >= w - relativeClip & (y >= relativeClip & y <= h - relativeClip)) //right { this.Cursor = Cursors.SizeWE; } if ((x >= relativeClip & x <= w - relativeClip) & y > h - relativeClip) //bottom { this.Cursor = Cursors.SizeNS; } if (x <= relativeClip & (y <= h - relativeClip & y >= relativeClip)) //left { this.Cursor = Cursors.SizeWE; } }
最后就是Resize的函数，和上面的计算方式类似，只是拖拉的时候需要调用ResizeWindow函数来改变大小：
private void Resize(object sender, MouseButtonEventArgs e) { Border clickedBorder = sender as Border; Point pos = Mouse.GetPosition(this); double x = pos.X; double y = pos.Y; double w = this.Width; double h = this.Height; if (x <= relativeClip & y <= relativeClip) // left top { this.Cursor = Cursors.SizeNWSE; ResizeWindow(ResizeDirection.TopLeft); } if (x >= w - relativeClip & y <= relativeClip) //right top { this.Cursor = Cursors.SizeNESW; ResizeWindow(ResizeDirection.TopRight); } if (x >= w - relativeClip & y >= h - relativeClip) //bottom right { this.Cursor = Cursors.SizeNWSE; ResizeWindow(ResizeDirection.BottomRight); } if (x <= relativeClip & y >= h - relativeClip) // bottom left { this.Cursor = Cursors.SizeNESW; ResizeWindow(ResizeDirection.BottomLeft); } if ((x >= relativeClip & x <= w - relativeClip) & y <= relativeClip) //top { this.Cursor = Cursors.SizeNS; ResizeWindow(ResizeDirection.Top); } if (x >= w - relativeClip & (y >= relativeClip & y <= h - relativeClip)) //right { this.Cursor = Cursors.SizeWE; ResizeWindow(ResizeDirection.Right); } if ((x >= relativeClip & x <= w - relativeClip) & y > h - relativeClip) //bottom { this.Cursor = Cursors.SizeNS; ResizeWindow(ResizeDirection.Bottom); } if (x <= relativeClip & (y <= h - relativeClip & y >= relativeClip)) //left { this.Cursor = Cursors.SizeWE; ResizeWindow(ResizeDirection.Left); } }
最后效果图如下所示：
源码下载
PS:20121130新增了一个修改就是限制了最小宽度和最小高度，但是效果不是很满意，有闪烁，以后再完善吧。