调整自定义窗口大小

• 下载演示 - 65.35 KB

引言

如果您曾经创建过自定义 WPF 窗口，或者将来会创建，您会注意到您似乎“丢失”了标准窗口中常见的窗口大小调整功能。在本教程中，您将学习如何使用 VB.NET 代码启用自定义窗口的大小调整。我们将使用 Expression Blend 创建自定义窗口，您可以在 Blend 的代码编辑器（如果您使用的是 Blend 3）或 Visual Studio 中进行编码。

第一步：设计自定义窗口

让我们从在 Expression Blend 中创建 WPF 项目开始。启动 Blend 并创建一个名为“Custom Resize”的 WPF 应用程序项目。确保在 Language 下拉框中将语言设置为Visual Basic。

在接下来的步骤中，我们将创建自定义窗口，然后编写必要的代码

1. 在“Objects and Timeline”面板中选择 Window 元素。在“Properties”面板的“Layout”部分，将 Width 设置为 400，将 Height 设置为 300。

   

2. 在“Properties”面板的“Appearance”部分，选中AllowsTransparency复选框。
3. 在“Properties”面板的“Brushes”部分，将 Background 设置为NoBrush。

   

4. 您会注意到现在出现了一个空窗口。在窗口内绘制一个矩形，然后将该矩形重命名为‘Background’。

   

5. 右键单击矩形并选择AutoSize > Fill。您的矩形现在应该会填充整个窗口。
6. 使用 Corner Resize Handles 为矩形添加圆角，并将 Fill 改为类似下图的渐变画笔

   

7. 在窗口内靠近底部的位置绘制另一个矩形。确保在“Layout”部分将其 Vertical Alignment 设置为 Bottom，并且 Margins 与下图类似。





8. 将我们的新矩形重命名为“BottomResizeRect”。此矩形将使我们能够调整窗口的高度。因此，它应该位于我们的 UI 元素堆栈的顶部。
9. 将 BottomResizeRect 的高度调整为 4，并将其 Opacity 设置为零。
10. 在“Common Properties”部分，将 BottomResizeRect 的 Cursor 设置为SizeNS。

最后，让我们向 Window 添加一个 TextBlock 并将文本更改为“Custom Resize”。我的最终结果看起来像下图

运行项目。您会注意到，当您将光标移到自定义窗口应用程序的底部边缘时，会显示大小调整手柄。尽管如此，我们仍然无法调整应用程序的高度。我们将在下一步中为此目的添加代码。按 ALT+F4 停止应用程序。

第二步：编码

为了使我们的窗口能够调整大小，我们将处理 BottomResizeRect 的几个鼠标事件。继续！

1. 在“Project”面板中右键单击 Custom Resize 项目，然后选择“Edit in Visual Studio”。
2. 片刻之后，项目应该会在 Visual Studio 中打开。双击‘MainWindow.xaml.vb’进行编辑。
3. 在类声明后输入以下代码

   Private bottomResize As Boolean
   Private initBtmY As Double

4. 从 ClassName 下拉框中选择 BottomResizeRect，从 MethodName 下拉框中选择 MouseLeftButtonDown。在 BottomResizeRect 的 MouseLeftButtonDown 事件中，输入以下代码

   bottomResize = True
   'Get the initial Y coordinate 
   'cursor location on the window
   initBtmY = e.GetPosition(Me).Y

5. 在 BottomResizeRect 的 MouseMove 事件过程中，输入以下代码

   'Get the new Y coordinate cursor location
   Dim newBtmY As Double = e.GetPosition(Me).Y
   'Get the change between the initial and
   'new cursor location
   Dim diff As Double = initBtmY - newBtmY
   'Minimum window height
   Dim minHeight As Integer = 200
   	
   If bottomResize = True Then
         'Let our rectangle capture the mouse
         BottomResizeRect.CaptureMouse()
   
         Dim newHeight = e.GetPosition(Me).Y - diff
   
         If newHeight > minHeight Then
              Me.Height = newHeight
         End If
   
   End If 

6. 在 BottomResizeRect 的 MouseLeftButtonUp 事件过程中，输入以下代码

   bottomResize = False
   BottomResizeRect.ReleaseMouseCapture()

7. 我注意到（您可能也注意到），在当前状态下运行应用程序时，单击底部边缘有时会导致窗口在光标接近窗口底部时调整大小。这尤其发生在您点击屏幕背景和窗口底部边缘几乎同时发生时。为避免这种情况，请在 BottomResizeRect 的 MouseEnter 事件过程中输入以下代码

   bottomResize = False 

我们的编码现在已完成。您的 MainWindow 类应该与以下代码类似

Class MainWindow

    Private bottomResize As Boolean
    Private initBtmY As Double

    Private Sub BottomResizeRect_MouseEnter _
    (ByVal sender As Object, ByVal e As _
    System.Windows.Input.MouseEventArgs) _
    Handles BottomResizeRect.MouseEnter

        bottomResize = False

    End Sub

    Private Sub BottomResizeRect_MouseLeftButtonDown _
    (ByVal sender As Object, ByVal e As _
    System.Windows.Input.MouseButtonEventArgs) _
    Handles BottomResizeRect.MouseLeftButtonDown
        bottomResize = True
        'Get the initial Y coordinate 
        'cursor location on our window
        initBtmY = e.GetPosition(Me).Y
    End Sub

    Private Sub BottomResizeRect_MouseLeftButtonUp _
    (ByVal sender As Object, _
    ByVal e As System.Windows.Input.MouseButtonEventArgs) _
    Handles BottomResizeRect.MouseLeftButtonUp
        bottomResize = False
        BottomResizeRect.ReleaseMouseCapture()
    End Sub

    Private Sub BottomResizeRect_MouseMove _
    (ByVal sender As Object, ByVal e As _
    System.Windows.Input.MouseEventArgs) _
    Handles BottomResizeRect.MouseMove
        'Get the new Y coordinate cursor location
        Dim newBtmY As Double = e.GetPosition(Me).Y
        'Get the change between the initial and
        'new cursor location
        Dim diff As Double = initBtmY - newBtmY
        'Minimum window height
        Dim minHeight As Integer = 200

        If bottomResize = True Then
            'Let our rectangle capture the mouse
            BottomResizeRect.CaptureMouse()

            Dim newHeight = e.GetPosition(Me).Y - diff

            If newHeight > minHeight Then
                Me.Height = newHeight
            End If

        End If
    End Sub
End Class

按 F5 运行项目。当应用程序打开时，将光标移到窗口的底部边缘。您会注意到出现了一个南北大小调整手柄。检查是否可以调整窗口的高度。如果无法调整，请检查您的代码。如果有效，您会注意到可以增加窗口高度并将其减小到一定尺寸。这是因为我们将最小高度设置为 200。

代码的大部分内容通过我添加的注释是自解释的，但我将对各个代码部分进行一些解释。在MouseLeftButtonDown事件过程中，我们将布尔值设置为true，以表明我们要调整窗口高度的意图。我们还为类成员之一 (initBtmY) 赋值，该成员表示光标在窗口上的初始位置。
在矩形的 MouseMove 事件过程中，我们检查新的光标位置并将其 Y 坐标赋给一个变量。初始光标位置和新光标位置之间的差值就是我们期望的窗口高度变化。在 if 语句中，我们捕获鼠标，以便即使光标不再位于矩形 (BottomResizeRect) 上时也能继续调整窗口大小。

您可以绘制其他矩形并使用它们来调整窗口的其他边缘。我相信您会弄清楚的。本教程到此结束。

外部链接

• WPF/Blend 中的 RotateTransform

历史

• 2010 年 4 月 16 日：首次发布
• 2010 年 4 月 17 日：添加了项目文件