Click here to Skip to main content
Click here to Skip to main content

Resizing a Custom WPF Window

, 4 Jun 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Learn how to enable resizing of a custom WPF window created in Expression Blend

Introduction

In this article, I will show you how to enable resizing of a custom/transparent WPF window. This article is a follow up to a previous article, Resizing a Custom Window, where I described how to resize a custom window by handling a rectangle object’s mouse events.
For those unfamiliar with creating custom WPF windows, Kirupa Chinnathambi has written a wonderful article on his blog that you can access here.

Background

In this article, I take a different approach to solving the resizing issue by making use of a Thumb control. The thumb control is the most suitable control for resizing other control objects. By using the thumb control, the coding becomes far simpler than the one employed in my first article.

For resizing purposes, I will cater specifically to the DragDelta event of the thumb control. The DragDelta event is raised multiple times while the thumb control has focus and mouse capture. The thumb control receives focus and mouse capture when the user presses the left mouse button.

Step 1

We shall start off by designing our custom window and placing the necessary controls:

  1. Start Expression Blend and create a new WPF project named “Custom Win Resize”. Ensure that the Language is set to Visual Basic.
  2. Select the Window element in Objects and Timeline. In the Layout section of the Properties panel, set the width to 400 and the height to 300.
  3. Check the AllowsTransparency check box in the Appearance section.
  4. In the Brushes section, set the Background property to No Brush. The Window element should now appear empty.

Image01.jpg

  1. Click on the ‘Show advanced properties’ Image09.jpg button in the Layout panel and set MinWidth to 200 and MinHeight to 100.
  2. Double click on the Rectangle tool in the toolbox. This places a rectangle in the LayoutRoot.
  3. Right click the rectangle in Objects and Timeline and select AutoSize > Fill.
  4. Click on the selection tool in the toolbox to show the rectangle’s resize handles. Using the corner resize handles give the rectangle rounded corners.

Image02.jpg

  1. In the Appearance section of the Properties panel, set the StrokeThickness to 2. Ensure that the Stroke is a black solid brush.
  2. In the search box of the Assets panel, type in the word ‘thumb’. As you start typing, you’re presented with several tool options. Select the thumb tool.
  3. Draw out a thumb object at the top of the LayoutRoot.

Image03.jpg

  1. Ensure that its VerticalAlignment is set to Top and the Left and Right margins are set to 14. The Top margin should be zero.

Image04.jpg

  1. Rename the thumb object as ‘TopThumb’ and in the CommonProperties section, set its cursor to SizeNS.
  2. With TopThumb still selected, copy-paste a new thumb object. Set the new thumb object’s VerticalAlignment to Bottom.
  3. Rename the new thumb object as ‘BtmThumb’.
  4. Draw another thumb object onto the right edge of the LayoutRoot.

Image05.jpg

  1. Ensure that the HorizontalAlignment is set to Right, the Right margin is zero and that the top and Bottom margins are set to 14.

Image06.jpg

  1. Rename the thumb object as ‘RgtThumb’ and set its cursor to SizeWE.
  2. With RgtThumb selected, copy-paste a new thumb control. Set its HorizontalAlignment to Left and rename it as ‘LftThumb’. Save your work.

Step 2

Let’s provide the necessary coding to enable the resizing of the custom window. The coding shall be done in Blend’s code editor.

  1. Select TopThumb and in the Properties panel, click on the Events button

    Image07.jpg.

  2. Type ‘Top_DragDelta in the DragDelta event textbox and press enter.

Image08.jpg

  1. In Blend’s code editor, type in the following code in TopThumb’s DragDelta event handler:
       If Me.Height > Me.MinHeight Then 
          Me.Height -= e.VerticalChange
          Me.Top += e.VerticalChange
       Else 
          Me.Height = Me.MinHeight + 4 
          TopThumb.ReleaseMouseCapture()
       End If 
  2. Switch back to the designer window and select BtmThumb. In the DragDelta event textbox, type in ‘Btm_DragDelta’ and press enter. Type in the following code in the event handler:
       If Me.Height > Me.MinHeight Then 
         Me.Height += e.VerticalChange
       Else 
         Me.Height = Me.MinHeight + 4 
         BtmThumb.ReleaseMouseCapture()
       End If
  3. Switch back to the designer window and select RgtThumb. Type ‘Rgt_DragDelta in the DragDelta event textbox and press enter. Type in the following code:
       If Me.Width > Me.MinWidth Then 
         Me.Width += e.HorizontalChange
       Else 
         Me.Width = Me.MinWidth + 4 
         RgtThumb.ReleaseMouseCapture()
       End If
  4. Switch back to the designer window and select LftThumb. Type ‘Lft_DragDelta’ in the DragDelta event textbox and press enter. Type in the following code in LftThumb’s DragDelta event handler:
       If Me.Width > Me.MinWidth Then 
         Me.Width -= e.HorizontalChange
         Me.Left += e.HorizontalChange
       Else 
         Me.Width = Me.MinWidth + 4 
         LftThumb.ReleaseMouseCapture()
       End If
  5. Switch back to the designer window and set the opacity of all the thumb objects to zero. You can do a multiple selection in Objects and Timeline and change the opacity of all the thumb controls at once.

Select the Window element and in the Common Properties section of the Properties panel, set the WindowStartupLocation to CenterScreen. Run the project. Try resizing the top, bottom, left and right edges of the custom window.
Notice that when resizing the top and left edges of the custom window, there is flickering. This occurs because the application can’t resize the client area as fast as the raising of the mouse event. The flickering is also common in some standard windows. Press ALT+F4 to close the app.

In Conclusion

I hope the article was helpful. If you haven’t gone through my first article on resizing a custom window, please do so to get an idea of a different solution to this issue.

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 has developed several applications, and written several articles about them, which can be viewed here on CodeProject. He currently resides in a small town in Kiambu county, Kenya.
 
Awards;
  • CodeProject MVP 2013
  • CodeProject MVP 2012
  • 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

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey19-Mar-12 20:00 
GeneralGreat Article ! PinmemberGeorgePopoiu21-Jun-10 6:56 
Good job. Great articles on resizing custom WPF windows.
 
Keep it up !
GeneralRe: Great Article ! PinmemberMeshack Musundi21-Jun-10 19:36 
GeneralRe: Great Article ! PinmemberDeatByCode3-Dec-10 11:08 
AnswerRe: Great Article ! PinmemberMeshack Musundi13-Dec-10 2:52 
GeneralRe: Great Article ! PinmemberArden D9-Nov-12 19:58 

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 | Mobile
Web03 | 2.8.141022.2 | Last Updated 4 Jun 2010
Article Copyright 2010 by Meshack Musundi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid