65.9K
CodeProject 正在变化。 阅读更多。
Home

VB.NET 中的 Aero 向导

pimb2
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.64/5 (13投票s)

2009年7月28日

CPOL

6分钟阅读

viewsIcon

80615

downloadIcon

5390

在 VB.NET 中创建一个 Aero 风格的向导

screenshot.png

介绍 

我想为我的程序创建一个更新应用程序。由于我喜欢 Vista Aero 界面，所以我也想要一个 Aero 风格的向导。我在网上找不到一个完整的，所以我决定自己做一个。做完之后，我认为分享它对帮助其他遇到同样情况的人会有所帮助。

Aero 向导的各个方面

有几个方面赋予了向导 Aero 的外观和感觉。以下是我用来使其看起来像 Aero 向导的方面。

  • 顶部区域的扩展玻璃
    正如您可能已经在屏幕截图或演示应用程序中注意到的那样，向导比平时拥有更多的玻璃效果。这是通过 DwmExtendFrameIntoClientArea 完成的。它是 dwm.dll 中的一个函数，仅在 Windows Vista 中可用。因此，您需要检查系统是否正在运行 Windows Vista，以及 Aero 是否已启用。有一个名为 DwmIsCompositionEnabled 的简单函数可以做到这一点。它只返回一个 Boolean 值来显示这一点。
  • 隐藏默认绘制的标题栏文本和图标
    由于向导的标题和图标不在向导的默认位置，因此必须将其从标题栏中删除。这是通过 SetWindowThemeAttribute 完成的，它也位于 dwm.dll 中。我真的不知道有什么方法可以实现这一点，但幸运的是，CodeProject 上有一篇关于此的文章。请参阅本文的参考部分。
  • 后退按钮
    所有 Vista 应用程序中的后退按钮实际上是相同的，向导也是如此。它是一个蓝色的按钮，禁用时是透明的，但它是半透明的。这意味着它不是完全透明的，但有深色和浅色部分。顶部是浅色，底部是深色，但它们都是部分透明的（半透明）。为了实现这一点，我发现 GIMP 软件非常有帮助。但首先我必须获取图像。它们位于 ieframe.dll 中。可以使用 ResHacker 打开该文件，然后在位图部分搜索“travelbutton”。然后保存它并在 GIMP 中打开它。删除前进按钮，然后将其保存为 .png 文件 - 半透明效果会自动完成。然后只需将其添加到项目中，并添加一些 MouseEnter 和 MouseLeave 代码，使其在鼠标悬停时发生变化。当按钮禁用时，我将 PictureBox 的标签设置为 If 使用，这样当鼠标悬停在禁用按钮上时图像就不会改变。
  • 发光文本
    自定义绘制的标题栏文本需要像 Aero 中那样发光。我为此使用了一个 VistaControls 组件。请参阅本文的参考部分。
  • 向导的页面
    我发现 TabControl 对于向导的页面非常有用，尤其是在我找到一个经过调整的 TabControl ，可以隐藏其标题（请参阅参考部分中找到它的网站的链接）。您可以使用 TabControl1.SelectedIndex 轻松导航，而用户甚至不会想到这是一个 TabControl ，因为标题被隐藏了。在我看来，这是完美的解决方案。

使用代码 

向导包含一个常规的 Form 和一个包含 API 函数的类。如果向导是一个独立的应用程序，您可以使用 File->Add->Existing Project 并选择 AeroWizard 目录中的 .vbproj 文件。如果您想将其嵌入到您的应用程序中（在同一个 .exe 文件中），这会更复杂。您需要执行以下操作：

  • 在您项目的“我的项目”的“资源”部分，添加 AeroWizard 项目的“资源”目录中的所有文件。
  • 在您项目的“我的项目”的“引用”部分，添加以下 *.dll 文件（它们在 bin\Release 目录中）：TabControlWithoutHeader.dll, VistaControls.dll。
  • Project->Add Existing Item... 添加以下文件：AeroWizard.vb, AeroWizard.Designer.vb, AeroWizard.resx, DWM.vb。

完成以上两种方法之一后，在 Designer 中打开 AeroWizard.vb。将 Form 的 Icon 属性设置为您想要在任务栏（和 Alt+Tab）中显示的图标。
其次，将 PictureBox1 的图像设置为您图标的图像版本，例如 .png 文件。
第三，在代码中打开 AeroWizard.vb。打开“配置变量”部分并设置您想要的文本（按钮文本，应用程序标题）。
然后您可以开始向向导中添加内容。返回 Designer，更改/删除第一个选项卡上的 Label。当然，您也可以添加其他控件（ProgressBars 等）。对其他选项卡执行相同的操作。您可以添加新的选项卡，但请复制现有选项卡的 TableLayoutPanel 。这会使所有控件都有边距（就像在“真正的”Aero 风格向导中一样）。在运行时，选项卡标题将被删除，当然，但如果您在 Designer 中这样做，导航到另一个选项卡会变得相当困难。
现在您需要添加将执行您想要的操作的代码。双击 Button1 。现在您将进入用户单击下一个按钮时将执行的代码。您可以在此处添加代码以在特定选项卡打开时执行。例如，如果您想在第三个选项卡打开时显示一个 MsgBox ，请在 GoToTab() 函数之后添加类似以下的代码：

If TabControl1.SelectedIndex = 3 Then
MsgBox("Hello World!")
End If

就是这样！

关注点

在编写代码时，我了解到“半透明”和 *.png 文件的 alpha 通道。您可能已经看到，后退按钮在禁用时，顶部是浅色，底部是深色。如果您将玻璃颜色设置为蓝色，它会显示为浅蓝色和深蓝色。但是，当您将玻璃颜色设置为粉红色时，它会显示为浅粉红色和深粉红色。所以它是部分（半）透明的。这需要大量的研究，因为它很少被使用（Web 开发人员不使用它，因为 Internet Explorer 不支持它）。但这仍然是一个有趣的主题。我使用 GIMP 来制作后退按钮的半透明效果，这并不难。

参考文献

我使用了不同的资源来制作这个向导。我将在此列出它们。

如果我遗漏了什么，请告诉我。

Bug

  • 您无法非常快速地后退。如果您在最后一个向导页面上，并非常快速地多次单击后退按钮，它不会那么快后退。我认为这是 PictureBox 事件的一个 bug，但无论如何我认为它并不令人讨厌。
© . All rights reserved.