Click here to Skip to main content
11,639,554 members (67,849 online)
Click here to Skip to main content

Resizing a Custom Window

, 16 Apr 2010 CPOL 23.3K 914 16
Rate this:
Please Sign up or sign in to vote.
Learn how to enable resizing of a custom WPF window

Introduction

If you've ever created a custom WPF window, or will, you notice that you somehow ‘lose’ the ability to resize the window as is common in standard windows. In this tutorial, you are going to learn how to enable resizing of your custom window using VB.NET code. We shall create our custom window using Expression Blend and you can do the coding in either Blend’s code editor, if you're using Blend 3, or Visual Studio.

Step 1: Designing the Custom Window

Let’s start off by creating our WPF project in Expression Blend. Start Blend and create a WPF Application project named “Custom Resize”. Ensure that the language is set to Visual Basic in the Language combobox.

In the following steps, we'll create our custom window and later write the necessary code:

  1. Select Window element in Objects and Timeline panel. In the Layout section of the Properties panel, set the Width to 400 and the Height to 300.

    Image01.jpg

  2. In the Appearance section of the Properties panel, check the AllowsTransparency checkbox.
  3. In the Brushes section of the Properties panel, set Background to NoBrush.

    Image02.jpg

  4. Notice that you now have an empty window. Draw a rectangle inside the window, then rename the rectangle as ‘Background’.

    Image03.jpg

  5. Right click the rectangle and select AutoSize > Fill. Your rectangle should now fill the whole window.
  6. Give the rectangle rounded corners using the Corner Resize Handles and change the Fill to a gradient brush similar to the following image:

    Image04.jpg

  7. Draw another rectangle inside the window close to its bottom. Ensure that its Vertical Alignment is set to Bottom in the Layout section and the Margins are similar to the following image.
  8. Image05.jpg

    Image06.jpg

  9. Rename our new rectangle as “BottomResizeRect”. This rectangle will enable us to adjust the height of our window. It should therefore be at the top of the stack of our UI Elements.
  10. Adjust the height of BottomResizeRect to 4 and set its Opacity to zero.
  11. In the Common Properties section, set the Cursor for BottomResizeRect to SizeNS.

Finally, let’s add a TextBlock to our Window and change the text to “Custom Resize”. My final result looks like the following image:

Image07.jpg

Run the project. Notice that when you run the cursor over the bottom edge of our Custom Window application resize handles appear. Despite this, we can't adjust our application’s height. We shall add coding for this purpose next. Press ALT+F4 to stop the app.

Step 2: Coding

To enable our window to resize, we shall cater to several mouse events for BottomResizeRect. Onwards:

  1. Right click Custom Resize project in the Project panel and select ‘Edit in Visual Studio’.
  2. After a brief moment, the project should open in Visual Studio. Double click on ‘MainWindow.xaml.vb’ to open it for editing.
  3. Type in the following code after the class declaration:
    Private bottomResize As Boolean
    Private initBtmY As Double
  4. Select BottomResizeRect from the ClassName combobox and MouseLeftButtonDown from the MethodName combobox. In the MouseLeftButtonDown event of BottomResizeRect, type in the following code:
    bottomResize = True
    'Get the initial Y coordinate 
    'cursor location on the window
    initBtmY = e.GetPosition(Me).Y
  5. In BottomResizeRect’s MouseMove event procedure, type in the following code:
    '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. In the MouseLeftButtonUp event procedure of BottomResizeRect, type in the following code:
    bottomResize = False
    BottomResizeRect.ReleaseMouseCapture()
  7. I noticed, and you might too, that when running the app in its current state, clicking the bottom edge will at times cause the window to resize when the cursor approaches the bottom of the window. This occurs especially when you click too close to the bottom edge in an almost simultaneous click of the screen background and our window’s bottom edge. To avoid this, type in the following code in BottomResizeRect’s MouseEnter event procedure:
    bottomResize = False 

Our coding is now complete. Your MainWindow class should be similar to the following code:

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

Run the project by pressing F5. When the application opens, run your cursor over the bottom edge of the window. Notice that a North-South resize handle appears. Check to see whether you can resize the window’s height. If it’s not resizing, check your code. If it’s working, notice that you can increase the windows height and reduce it upto a certain size. This is because of our minimum height which we set as 200.

Most of the code is self explanatory from the comments I added but I will offer some explanation on various sections of the code. In the MouseLeftButtonDown event procedure, we set our boolean value to true to indicate our intention to resize the window’s height. We also assign a value to one of the class members (initBtmY), the initial location of the cursor on the window.
During the rectangle’s MouseMove event procedure, we check for the new cursor location and assign its Y coordinate to a variable. The difference between the initial and new cursor location is our intended change in window height. In the if statement, we cause our rectangle to capture the mouse so that we can continue resizing the window even when the cursor is no longer over the rectangle (BottomResizeRect).

You can draw other rectangles and use them to adjust the other edges of the window. I'm sure you'll figure that part out. That completes this tutorial.

External Links

History

  • 16th April 2010: Initial publication
  • 17th April 2010: Added project file

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Meshack Musundi
Software Developer
Kenya Kenya
Meshack is an avid programmer with a bias towards WPF and VB.NET. He has about 5 years of programming experience initially starting off with Java before shifting to .NET, thanks to the allure of WPF. He currently resides in a small town in Kiambu county, Kenya.

Awards;
  • CodeProject MVP 2013
  • CodeProject MVP 2012
  • Best VB.NET article of January 2015
  • Best VB.NET article of August 2013
  • Best VB.NET article of February 2013
  • Best VB.NET article of October 2012
  • Best VB.NET article of July 2012
  • Best VB.NET article of February 2012
  • Best VB.NET article of January 2012
  • Best VB.NET article of November 2011
  • Best VB.NET article of June 2011
  • Best VB.NET article of May 2011
  • Best VB.NET article of March 2011
  • Best VB.NET article of February 2011
  • Best VB.NET article of January 2011
  • Best VB.NET article of December 2010
  • Best VB.NET article of November 2010

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 5 Pin
manoj kumar choubey19-Mar-12 19:59
membermanoj kumar choubey19-Mar-12 19:59 
GeneralRe: My vote of 5 Pin
Meshack Musundi20-Apr-12 1:39
mvpMeshack Musundi20-Apr-12 1:39 
GeneralThanx But ... Pin
Andru Martin8-Mar-11 18:19
memberAndru Martin8-Mar-11 18:19 
GeneralRe: Thanx But ... Pin
Meshack Musundi8-Mar-11 19:10
memberMeshack Musundi8-Mar-11 19:10 
GeneralNice work Pin
Dj Jansson16-Apr-10 21:26
memberDj Jansson16-Apr-10 21:26 
GeneralRe: Nice work Pin
Meshack Musundi17-Apr-10 5:45
memberMeshack Musundi17-Apr-10 5:45 
GeneralRe: Check out my articles Pin
Michael Jansson25-Apr-10 0:17
memberMichael Jansson25-Apr-10 0:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 17 Apr 2010
Article Copyright 2010 by Meshack Musundi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid