Control Visual Sizer

Wrap any element in it – a chart, a notes box, an image, a panel on a dashboard or design surface – to let the user make it larger or smaller. The content stretches to fill the container by default, so it follows the new size.

How resizing works

The user drags the grip and the container's bottom-right corner follows the pointer, even outside the container's bounds, until the button is released. The new size is set as the container's FrameworkElement.Width and FrameworkElement.Height, so from then on it keeps that size rather than following its parent's layout; its FrameworkElement.MinWidth, FrameworkElement.MaxWidth and the like still apply, which is the way to bound it. A double click on the grip, or a call to ResetSize, clears that size again. ResizeStarted and ResizeCompleted tell you when a drag begins and ends – to save the new layout, for example.

A resize grows the container to the right and downwards, so place it where it can do so: on a Canvas, or with its FrameworkElement.HorizontalAlignment and FrameworkElement.VerticalAlignment set to Left and Top.

The grip

The grip is a 17-pixel square of dots drawn in GripperBrush. IsGripperVisible hides it, IsGripperEnabled leaves it on show but stops it responding, and ResizerStyle replaces its look entirely. The default style gives the container a minimum size of 17 by 17 logical pixels, so the grip always fits.

Shadow

IsDropShadowEnabled gives the container a drop shadow, which helps a resizable panel read as something that can be picked up and changed.

Two resizable panels on a dashboard canvas; the new sizes are saved when a drag ends.

<Window x:Class="Dashboard.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sizer="clr-namespace:Binarymission.WPF.Controls.Containers;assembly=Binarymission.WPF.Controls.Containers.ControlVisualReSizer"
        Title="Dashboard" Width="900" Height="600">

    <Canvas Background="#F4F6F9">
        <sizer:ControlVisualResizer Canvas.Left="20" Canvas.Top="20" Width="420" Height="260"
                                    MinWidth="200" MinHeight="120" MaxWidth="840"
                                    IsDropShadowEnabled="True" Background="White"
                                    ResizeCompleted="OnPanelResized">
            <Image Source="Images/monthly-sales.png" Stretch="Uniform" />
        </sizer:ControlVisualResizer>

        <sizer:ControlVisualResizer Canvas.Left="460" Canvas.Top="20" Width="280" Height="200"
                                    IsDropShadowEnabled="True" DropShadowDepth="2" DropShadowOpacity="0.4"
                                    Background="White" GripperBrush="SteelBlue">
            <TextBox AcceptsReturn="True" TextWrapping="Wrap" Text="Notes for the board meeting" />
        </sizer:ControlVisualResizer>
    </Canvas>
</Window>

The handler, and a resizer built in code.

using System;
using System.Windows;
using System.Windows.Controls;
using Binarymission.WPF.Controls.Containers;

private void OnPanelResized(object sender, EventArgs e)
{
    ControlVisualResizer panel = (ControlVisualResizer)sender;
    Properties.Settings.Default.SalesPanelSize = new Size(panel.Width, panel.Height);
    Properties.Settings.Default.Save();
}

ControlVisualResizer notes = new ControlVisualResizer
{
    Width = 280,
    Height = 200,
    MinWidth = 160,
    MinHeight = 100,
    IsDropShadowEnabled = true,
    Content = new TextBox { AcceptsReturn = true, TextWrapping = TextWrapping.Wrap }
};
Canvas.SetLeft(notes, 40);
Canvas.SetTop(notes, 300);
dashboardCanvas.Children.Add(notes);