Resizer: a WPF Control

Recently I needed to allow users to resize a WPF Popup. After implementing a non-generic solution, I decided to attempt to turn the concept into a generic WPF control. The Resizer control is a specialised ContentControl that can be used as follows:

 

<kb:Resizer xmlns:kb="http://kent.boogaart/controls">
    Content
</kb:Resizer> 

The Resizer control adds resizing behaviour to the content you place within it. The default template uses a ResizeGrip and allows the user to drag the grip in order to resize the content. For example, here is how you might add resizing behaviour to a TextBox (XML namespace mapping assumed from hereon in):

<kb:Resizer>
    <TextBox>My TextBox</TextBox>
</kb:Resizer> 

The result is this:

And the user can drag the grip to resize the TextBox:

And here is how you might implement a resizable Popup:

 

<Popup>
    <kb:Resizer Width="100">
        <Border Background="Black">
            <Image Source="/Tempany.jpg"/>
        </Border>
    </kb:Resizer>
</Popup>

Here is the result:

And after resizing:

The Resizer control contains some other functionality worth mentioning:

IsGripEnabled : enables / disables the resize grip (defaults to true).
IsGripVisible : displays / hides the resize grip (defaults to true).
IsAutoSizeEnabled : determines whether the user can double-click the resize grip to return the Resizer's content to its natural size (defaults to true).
ResizeDirection : determines the direction the user needs to drag in order to increase the size of the Resizer's content (default to ResizeDirection.SouthEast).

You can download source for the Resizer control below. Included in the source is a sample application showing the various ways to use the control, including the use of a custom template to redefine the way the Resizer looks.

Enjoy!