当我第一次运行Zune时，我为这些美丽的UI所折服。当时就说这肯定不是用WPF做的，因为这些字体是如此的清晰而且UI反映的也非常快速。。而且我从维基百科上也了解到Zune的第一个版本是2006年发布的，而WPF与.NET 3.0却是 2006 年11月发布的。
那么问题来了，如果它不是WPF做的，那它是用什么技术做到的呢？为了找到答案，我使用Process Explorer工具来看看Zune是如何启动的，默认情况下，.NET应用程序都是被用黄色高亮显示的。
很好，这说明Zune肯定是.net 应用程序了，然后我们可以看到Zune需要如下库
然后用 Reflector一看：
如你所见，根名空间是 Microsoft.Iris. 我在Google上搜到这玩意看上去就像某种原始的WPF组件 -- MCML
WPF能创造出类似的UI吗？
第一个难点就是就是设定WindowStyle为None。因为这有这有才能让标题栏以及边框不可见
那该如何移动窗体呢？
首先添加一个Shape(Rectangle)，然后为它订阅PreviewMouseDown事件处理。
01 |
// Is this a double-click? |
02 |
if (DateTime.Now.Subtract(m_headerLastClicked) <= s_doubleClick) |
03 |
{ |
04 |
// Execute the code inside the event handler for the |
05 |
// restore button click passing null for the sender |
06 |
// and null for the event args. |
07 |
HandleRestoreClick(null, null); |
08 |
} |
09 |
10 |
m_headerLastClicked = DateTime.Now; |
11 |
12 |
if (Mouse.LeftButton == MouseButtonState.Pressed) |
13 |
{ |
14 |
DragMove(); |
15 |
} |
该如何任意改变窗体大小？
在主窗体的四个角分别添加一个Shape(比如Rectangle)然后为它们都订阅PreviewMouseDown事件处理：
01 |
Rectangle clickedRectangle = (Rectangle)sender; |
02 |
|
03 |
switch (clickedRectangle.Name) |
04 |
{ |
05 |
case "top": |
06 |
Cursor = Cursors.SizeNS; |
07 |
ResizeWindow(ResizeDirection.Top); |
08 |
break; |
09 |
case "bottom": |
10 |
Cursor = Cursors.SizeNS; |
11 |
ResizeWindow(ResizeDirection.Bottom); |
12 |
break; |
13 |
// ... |
14 |
} |
下面就是用鼠标重新调整窗体大小的代码
01 |
/// <summary> /// Resizes the window. |
02 |
/// </summary> /// <param name="direction">The direction. |
03 |
private void ResizeWindow(ResizeDirection direction) |
04 |
{ |
05 |
NativeMethods.SendMessage(m_hwndSource.Handle, WM_SYSCOMMAND, |
06 |
(IntPtr)(61440 + direction), IntPtr.Zero); |
07 |
} |
08 |
09 |
[DllImport("user32.dll", CharSet = CharSet.Auto)] |
10 |
internal static extern IntPtr SendMessage( |
11 |
IntPtr hWnd, |
12 |
UInt32 msg, |
13 |
IntPtr wParam, |
14 |
IntPtr lParam); |
如何为窗体添加阴影效果。
实际上有两种做法：
第一种就是试用DWM API。这个方法需要订阅SourceInitialized事件。
01 |
/// <summary> /// Raises the <see cref="FrameworkElement.Initialized"> event. |
02 |
/// This method is invoked whenever |
03 |
/// <see cref="P:FrameworkElement.IsInitialized"> /// is set to true internally. |
04 |
/// </see></see></summary> /// <param name="e">The <see cref="T:RoutedEventArgs"> /// that contains the event data. |
05 |
protected override void OnInitialized(EventArgs e) |
06 |
{ |
07 |
AllowsTransparency = false; |
08 |
ResizeMode = ResizeMode.NoResize; |
09 |
Height = 480; |
10 |
Width = 852; |
11 |
WindowStartupLocation = WindowStartupLocation.CenterScreen; |
12 |
WindowStyle = WindowStyle.None; |
13 |
14 |
SourceInitialized += HandleSourceInitialized; |
15 |
16 |
base.OnInitialized(e); |
17 |
} |
18 |
|
19 |
/// <summary> /// Handles the source initialized. |
20 |
/// </summary> /// <param name="sender">The sender. |
21 |
/// <param name="e">The <see cref="System.EventArgs"> /// instance containing the event data. |
22 |
private void HandleSourceInitialized(Object sender, EventArgs e) |
23 |
{ |
24 |
m_hwndSource = (HwndSource)PresentationSource.FromVisual(this); |
25 |
26 |
// Returns the HwndSource object for the window |
27 |
// which presents WPF content in a Win32 window. |
28 |
HwndSource.FromHwnd(m_hwndSource.Handle).AddHook( |
29 |
new HwndSourceHook(NativeMethods.WindowProc)); |
30 |
31 |
// http://msdn.microsoft.com/en-us/library/aa969524(VS.85).aspx |
32 |
Int32 DWMWA_NCRENDERING_POLICY = 2; |
33 |
NativeMethods.DwmSetWindowAttribute( |
34 |
m_hwndSource.Handle, |
35 |
DWMWA_NCRENDERING_POLICY, |
36 |
ref DWMWA_NCRENDERING_POLICY, |
37 |
4); |
38 |
39 |
// http://msdn.microsoft.com/en-us/library/aa969512(VS.85).aspx |
40 |
NativeMethods.ShowShadowUnderWindow(m_hwndSource.Handle); |
41 |
}</see></see> |
有阴影的窗体
第二种方法就是使用四个外部的透明窗体来制造了阴影的假象，如下图所示
1，用代码的方式创建一个透明的窗体
2，找到Main Window 在屏幕上的坐标，尤其是左上角
3，计算4个透明窗口的坐标
4，当我们移动Main Window时，4个边框透明窗口也需要跟着移动
5，当我们重新设定 Main Window大小时，4个边框透明窗口也要跟着变化大小。
说这么多看上去好像很难，来让我们看看实现的代码吧。
创建透明窗体的代码
01 |
/// <summary> /// Initializes the surrounding windows. |
02 |
/// </summary> private void InitializeSurrounds() |
03 |
{ |
04 |
// Top. |
05 |
m_wndT = CreateTransparentWindow(); |
06 |
07 |
// Left. |
08 |
m_wndL = CreateTransparentWindow(); |
09 |
10 |
// Bottom. |
11 |
m_wndB = CreateTransparentWindow(); |
12 |
13 |
// Right. |
14 |
m_wndR = CreateTransparentWindow(); |
15 |
16 |
SetSurroundShadows(); |
17 |
} |
18 |
|
19 |
/// <summary> /// Creates an empty window. |
20 |
/// </summary> /// <returns></returns> private static Window CreateTransparentWindow() |
21 |
{ |
22 |
Window wnd = new Window(); |
23 |
wnd.AllowsTransparency = true; |
24 |
wnd.ShowInTaskbar = false; |
25 |
wnd.WindowStyle = WindowStyle.None; |
26 |
wnd.Background = null; |
27 |
28 |
return wnd; |
29 |
} |
30 |
31 |
/// <summary> /// Sets the artificial drop shadow. |
32 |
/// </summary> /// <param name="active">if set to <c>true</c> [active]. |
33 |
private void SetSurroundShadows(Boolean active = true) |
34 |
{ |
35 |
if (active) |
36 |
{ |
37 |
Double cornerRadius = 1.75; |
38 |
39 |
m_wndT.Content = GetDecorator( |
40 |
"Images/ACTIVESHADOWTOP.PNG"); |
41 |
m_wndL.Content = GetDecorator( |
42 |
"Images/ACTIVESHADOWLEFT.PNG", cornerRadius); |
43 |
m_wndB.Content = GetDecorator( |
44 |
"Images/ACTIVESHADOWBOTTOM.PNG"); |
45 |
m_wndR.Content = GetDecorator( |
46 |
"Images/ACTIVESHADOWRIGHT.PNG", cornerRadius); |
47 |
} |
48 |
else |
49 |
{ |
50 |
m_wndT.Content = GetDecorator( |
51 |
"Images/INACTIVESHADOWTOP.PNG"); |
52 |
m_wndL.Content = GetDecorator( |
53 |
"Images/INACTIVESHADOWLEFT.PNG"); |
54 |
m_wndB.Content = GetDecorator( |
55 |
"Images/INACTIVESHADOWBOTTOM.PNG"); |
56 |
m_wndR.Content = GetDecorator( |
57 |
"Images/INACTIVESHADOWRIGHT.PNG"); |
58 |
} |
59 |
} |
60 |
61 |
[DebuggerStepThrough] |
62 |
private Decorator GetDecorator(String imageUri, Double radius = 0) |
63 |
{ |
64 |
Border border = new Border(); |
65 |
border.CornerRadius = new CornerRadius(radius); |
66 |
border.Background = new ImageBrush( |
67 |
new BitmapImage( |
68 |
new Uri(BaseUriHelper.GetBaseUri(this), |
69 |
imageUri))); |
70 |
71 |
return border; |
72 |
} |
计算位置高度的代码
原文链接 , OSChina.NET原创翻译
01 |
/// <summary> /// Raises the <see cref="FrameworkElement.Initialized"> event. |
02 |
/// This method is invoked whenever |
03 |
/// <see cref="FrameworkElement.IsInitialized"> /// is set to true internally. |
04 |
/// </see></see></summary> /// <param name="e">The <see cref="T:RoutedEventArgs"> /// that contains the event data. |
05 |
protected override void OnInitialized(EventArgs e) |
06 |
{ |
07 |
// ... |
08 |
09 |
LocationChanged += HandleLocationChanged; |
10 |
SizeChanged += HandleLocationChanged; |
11 |
StateChanged += HandleWndStateChanged; |
12 |
13 |
InitializeSurrounds(); |
14 |
ShowSurrounds(); |
15 |
16 |
base.OnInitialized(e); |
17 |
} |
18 |
|
19 |
/// <summary> /// Handles the location changed. |
20 |
/// </summary> /// <param name="sender">The sender. |
21 |
/// <param name="e">The <see cref="System.EventArgs"> /// instance containing the event data. |
22 |
private void HandleLocationChanged(Object sender, EventArgs e) |
23 |
{ |
24 |
m_wndT.Left = Left - c_edgeWndSize; |
25 |
m_wndT.Top = Top - m_wndT.Height; |
26 |
m_wndT.Width = Width + c_edgeWndSize * 2; |
27 |
m_wndT.Height = c_edgeWndSize; |
28 |
29 |
m_wndL.Left = Left - m_wndL.Width; |
30 |
m_wndL.Top = Top; |
31 |
m_wndL.Width = c_edgeWndSize; |
32 |
m_wndL.Height = Height; |
33 |
34 |
m_wndB.Left = Left - c_edgeWndSize; |
35 |
m_wndB.Top = Top + Height; |
36 |
m_wndB.Width = Width + c_edgeWndSize * 2; |
37 |
m_wndB.Height = c_edgeWndSize; |
38 |
39 |
m_wndR.Left = Left + Width; |
40 |
m_wndR.Top = Top; |
41 |
m_wndR.Width = c_edgeWndSize; |
42 |
m_wndR.Height = Height; |
43 |
} |
44 |
|
45 |
/// <summary> /// Handles the windows state changed. |
46 |
/// </summary> /// <param name="sender">The sender. |
47 |
/// <param name="e">The <see cref="System.EventArgs"> /// instance containing the event data. |
48 |
private void HandleWndStateChanged(Object sender, EventArgs e) |
49 |
{ |
50 |
if (WindowState == WindowState.Normal) |
51 |
{ |
52 |
ShowSurrounds(); |
53 |
} |
54 |
else |
55 |
{ |
56 |
HideSurrounds(); |
57 |
} |
58 |
}</see></see></see> |
原文链接 , OSChina.NET原创翻译