WPF using ResizeGrip to resize controls

Question

I want that the user can resize a control by draging a resize-grip on the lower right border. With the ResizeGrip there seems to exists the perfect control for

Answer 1

Ok, I got bored last night and wrote a little sample for you using Thumb. You should be able to Copy/Paste/Compile/Run.

But basically, I created a UserControl named DialogReplica, just something that looks like a dialog with a grip, you can see it thrown in the main window.

<Window x:Class="ResizeGrip.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ResizeGrip="clr-namespace:ResizeGrip"
    Title="MainWindow" Height="350" Width="525">
<Canvas>
    <ResizeGrip:DialogReplica Canvas.Top="25" Canvas.Left="100"/>
</Canvas>

Here's the xaml for the UserControl (you mostly interested in the Thumb part):

<UserControl x:Class="ResizeGrip.DialogReplica"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Border x:Name="Border" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="#FF626161" BorderThickness="2" CornerRadius="3">

    <DockPanel x:Name="sizableContent" Background="LightGray" Focusable="False" LastChildFill="True" MinHeight="100" MinWidth="100">

        <Border DockPanel.Dock="Top" Background="Gray" Height="30">
            <DockPanel>
                <Button DockPanel.Dock="Right" Width="16" Height="16" 
                    VerticalAlignment="Center" HorizontalAlignment="Center"
                    VerticalContentAlignment="Top" HorizontalContentAlignment="Center"
                    Margin="0,0,4,0" Background="Transparent">
                    <Button.Content>
                        <Grid>
                            <Line X1="1" Y1="1" X2="8" Y2="8" Stroke="White" StrokeThickness="1"/>
                            <Line X1="1" Y1="8" X2="8" Y2="1" Stroke="White" StrokeThickness="1"/>
                        </Grid>
                    </Button.Content>
                </Button>
                <TextBlock Text="Pretend Dialog" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </DockPanel>
        </Border>

        <DockPanel DockPanel.Dock="Bottom" HorizontalAlignment="Stretch">

            <Thumb DockPanel.Dock="Right" VerticalAlignment="Bottom" Margin="0,0,1,1"
                   DragDelta="OnResizeThumbDragDelta" 
                   DragStarted="OnResizeThumbDragStarted" 
                   DragCompleted="OnResizeThumbDragCompleted">
                <Thumb.Style>
                    <Style TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
                        <Style.Setters>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Grid x:Name="resizeVisual" DockPanel.Dock="Right" VerticalAlignment="Bottom"  >
                                            <Line X1="6" Y1="18" X2="18" Y2="6" Stroke="DarkGray" StrokeThickness="1.5"/>
                                            <!--smallest/right|bottom most -->
                                            <Line X1="10" Y1="18" X2="18" Y2="10" Stroke="DarkGray" StrokeThickness="1.5"/>
                                            <Line X1="14" Y1="18" X2="18" Y2="14" Stroke="DarkGray" StrokeThickness="1.5"/>
                                            <!--longers/left|top most-->
                                            <Grid.Style>
                                                <Style TargetType="{x:Type Grid}">
                                                    <Style.Triggers>
                                                        <Trigger Property="IsMouseOver" Value="True">
                                                            <Setter Property="Cursor" Value="SizeNWSE"/>
                                                        </Trigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Grid.Style>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style.Setters>
                    </Style>
                </Thumb.Style>
            </Thumb>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Margin="12" Width="75" TabIndex="1" Content="Ok"/>
            </StackPanel>
        </DockPanel>

        <StackPanel HorizontalAlignment="Center" Margin="16,16,16,4">
            <TextBlock Text="Drag the lower right corner to resize."/>
        </StackPanel>
    </DockPanel>
</Border>

finally, here's the code behind for the UserControl

public partial class DialogReplica : UserControl
{
    private Cursor _cursor;

    public DialogReplica()
    {
        InitializeComponent();
    }

    private void OnResizeThumbDragStarted(object sender, DragStartedEventArgs e)
    {
        _cursor = Cursor;
        Cursor = Cursors.SizeNWSE;
    }

    private void OnResizeThumbDragCompleted(object sender, DragCompletedEventArgs e)
    {
        Cursor = _cursor;
    }

    private void OnResizeThumbDragDelta(object sender, DragDeltaEventArgs e)
    {
        double yAdjust = sizableContent.Height + e.VerticalChange;
        double xAdjust = sizableContent.Width + e.HorizontalChange;

        //make sure not to resize to negative width or heigth            
        xAdjust = (sizableContent.ActualWidth + xAdjust) > sizableContent.MinWidth ? xAdjust : sizableContent.MinWidth;
        yAdjust = (sizableContent.ActualHeight + yAdjust) > sizableContent.MinHeight ? yAdjust : sizableContent.MinHeight;

        sizableContent.Width = xAdjust;
        sizableContent.Height = yAdjust;
    }
}