动手试验:创建非矩形窗口

此页仅适用于 WPF 项目

在 Microsoft Expression Blend 应用程序中,可能需要在运行时创建一个具有非矩形形状外观的窗口。常见的例子包括桌面小程序、小组件和媒体播放器等。可以在应用程序中更改“Window”元素的一些属性,然后创建事件处理程序方法以使用户无需标题栏即可移动窗口,从而创建一个非矩形窗口。

使非矩形窗口变得透明

  1. 单击“文件”菜单上的“新建项”,创建一个名为 Window1.xaml 的新窗口文档。在“添加新项”窗口中,确保选中“包括代码文件”复选框,以便为 Window1.xaml 生成匹配的代码隐藏文件。

  2. 在“交互”面板中的“对象和时间线”下,选择“Window”元素,然后在“属性”面板中的“外观”下,将“WindowStyle”属性更改为“None”,以删除窗口外壳(标题栏)。按 F5 查看没有默认外壳的窗口外观。请注意,此时不再显示标准的“最小化”、“最大化”、“还原”或“关闭”按钮。另请注意,该窗口将无法拖动。按 Alt+F4 关闭窗口。

    Cc295119.alert_note(zh-cn,Expression.10).gif说明:

    有关其他“WindowStyle”选项的信息,请参阅 MSDN 上的 Windows Presentation Foundation 窗口概述主题中的“WindowStyle”(此链接可能指向英文页面)。

  3. 在“属性”面板中的“外观”下,选中“AllowsTransparency”复选框。请注意,窗口边框将不再显示。

  4. 若要向窗口添加透明度,可以在“属性”面板中的“画笔”下,将 Window 元素的“Background”属性设置为“无画笔”Cc295119.706bbd5c-c0e0-43a1-9604-297f019d0275(zh-cn,Expression.10).png。或者,如果希望用户能够单击窗口的隐藏区域,可将“Background”属性设置为“纯色画笔”Cc295119.3a66ec96-47bb-47fc-8876-6b9456feec3a(zh-cn,Expression.10).png,然后将背景画笔的“Alpha”属性设置为 1。这将保留窗口的可单击区域同时又使此区域不可见。

  5. 最后,在“对象和时间线”下,双击“LayoutRoot”以启用该元素,然后从“工具箱”中向美工板上添加元素。可以通过为元素设置“OpacityMask”画笔,来创建各种效果(有关如何执行该操作的信息,请参阅创建不透明蒙板)。也可以使用绘图工具(如“椭圆形”Cc295119.8938cfdf-9b75-4a33-bc88-b0636e114a0d(zh-cn,Expression.10).png 和“笔”Cc295119.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(zh-cn,Expression.10).png 工具)添加形状和绘制的路径,然后将这些元素移动到其他元素背后(右键单击某个元素并单击“排序”)。“LayoutRoot”的内容实际上是定义应用程序的大纲。

  6. 再次按 F5 查看窗口当前的外观。请注意,此时仍不能拖动该窗口。按 Alt+F4 关闭窗口。

添加代码以允许在运行时拖动窗口

使窗口透明之后,就会失去重定位无标题栏窗口的能力。若要使窗口再次成为可移动的,必须向该窗口添加一个事件处理程序,然后向相关的代码隐藏文件中添加少量代码。

  1. 单击“文件”菜单上的“全部保存”,将项目保存到硬盘上。(如果项目从未保存过,则不能向其中添加事件处理程序方法。)

  2. 在“对象和时间线”下选定 Window 元素,然后在“属性”面板中单击“事件”Cc295119.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(zh-cn,Expression.10).png 按钮。

  3. 在“MouseLeftButtonDown”旁边键入 OnMouseLeftButtonDown,然后按 Enter 键。

    • 如果安装了 Microsoft Visual Studio 2008 Standard Edition 或更高版本,则按 Enter 键之后生成的事件处理程序代码将会自动添加到代码隐藏文件 (Window1.xaml.cs) 中,并且将在 Visual Studio 中打开该代码隐藏文件以供编辑。

    • 如果未安装 Visual Studio,该事件处理程序方法的代码将复制到剪贴板中,以便用户将其粘贴到代码隐藏文件中。在“项目”面板中双击代码隐藏文件,将其打开。将生成的事件处理程序方法代码粘贴到代码隐藏文件中倒数第二个右大括号之前(如果代码隐藏文件使用的是 C#)或 End Class 语句之前(如果代码隐藏文件使用的是 VB.NET)。

      Cc295119.alert_note(zh-cn,Expression.10).gif说明:

      如果无法通过在 Expression Blend 的“项目”面板中双击代码隐藏文件将其打开,很可能是因为没有应用程序与代码隐藏文件的文件扩展名(.cs 或 .vb)关联,因而 Windows 不知道如何打开该文件。有关如何将 .cs 和 .vb 文件与编辑器(如“记事本”)关联起来的信息,请参阅编辑代码隐藏文件

  4. 修改代码隐藏文件中生成的事件处理程序方法,以便事件处理程序类似于以下形式:

    private void OnMouseLeftButtonDown(object sender,
             System.Windows.Input.MouseButtonEventArgs e)
    {
      this.DragMove();
    }
    
    Private Sub OnMouseLeftButtonDown(ByVal sender As System.Object,
             ByVal e As System.Windows.Input.MouseButtonEventArgs)
      Me.DragMove()
    End Sub
    
  5. 按 F5 运行应用程序。

  6. 可以添加更多事件处理程序方法,例如可调用代码隐藏文件中 Close() 方法的按钮 Click 事件的方法。有关如何创建事件处理程序方法的详细信息,请参阅事件处理概述