WPF Child Window Implementation 3. Resize window

After implementing moving window moving, we still need resizing capacity. To achieve this goal, Thumb would be needed again.

1. We customize our own thumb, which we could use to resize our control. Add a class named ResizeThumb.cs to our solution. And input below codes.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;

namespace TestApp
{
    public class ResizeThumb : Thumb
    {
        public ResizeThumb()
        {
            this.DragDelta += new DragDeltaEventHandler(this.ResizeThumb_DragDelta);
        }

        private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;

            UserControl item = element.TemplatedParent as UserControl;

            if (item != null)
            {
                double deltaVertical, deltaHorizontal;

                switch (this.VerticalAlignment)
                {
                    case VerticalAlignment.Bottom:
                        deltaVertical = Math.Min(-e.VerticalChange, item.ActualHeight - item.MinHeight);
                        item.Height -= deltaVertical;
                        break;
                    case VerticalAlignment.Top:
                        deltaVertical = Math.Min(e.VerticalChange, item.ActualHeight - item.MinHeight);
                        Canvas.SetTop(item, Canvas.GetTop(item) + deltaVertical);
                        item.Height -= deltaVertical;
                        break;
                    default:
                        break;
                }

                switch (this.HorizontalAlignment)
                {
                    case HorizontalAlignment.Left:
                        deltaHorizontal = Math.Min(e.HorizontalChange, item.ActualWidth - item.MinWidth);
                        Canvas.SetLeft(item, Canvas.GetLeft(item) + deltaHorizontal);
                        item.Width -= deltaHorizontal;
                        break;
                    case HorizontalAlignment.Right:
                        deltaHorizontal = Math.Min(-e.HorizontalChange, item.ActualWidth - item.MinWidth);
                        item.Width -= deltaHorizontal;
                        break;
                    default:
                        break;
                }
            }

            e.Handled = true;
        }
    }
}

Then we modify the style in App.xaml.

<Application x:Class="TestApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml"
             xmlns:common="clr-namespace:TestApp">
    <Application.Resources>
        <Style x:Key="ChildWindowStyle" TargetType="{x:Type common:LayoutControl}">
            <Setter Property="BorderBrush" Value="Silver"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Height" Value="300"/>
            <Setter Property="Width" Value="400"/>
            <Setter Property="Margin" Value="20"/>
            <Setter Property="Background" Value="#FFE6E6E6"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type common:LayoutControl}">
                        <Grid>
                            <Grid Opacity="0">
                                <common:ResizeThumb Height="2" Cursor="SizeNS"
                                        VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
                                <common:ResizeThumb Width="2" Cursor="SizeWE"
                                        VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
                                <common:ResizeThumb Width="2" Cursor="SizeWE"
                                        VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
                                <common:ResizeThumb Height="2" Cursor="SizeNS"
                                        VerticalAlignment="Bottom"  HorizontalAlignment="Stretch"/>

                                <common:ResizeThumb Width="3" Height="3" Cursor="SizeNWSE"
                                        VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                <common:ResizeThumb Width="3" Height="3" Cursor="SizeNESW"
                                        VerticalAlignment="Top" HorizontalAlignment="Right"/>
                                <common:ResizeThumb Width="3" Height="3" Cursor="SizeNESW"
                                        VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                                <common:ResizeThumb Width="3" Height="3" Cursor="SizeNWSE"
                                        VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                            </Grid>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" Margin="2"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="20"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>

                                    <!--Make window has shadow-->
                                    <Rectangle Fill="{TemplateBinding Background}" Grid.RowSpan="2">
                                        <Rectangle.Effect>
                                            <DropShadowEffect BlurRadius="10" ShadowDepth="3"/>
                                        </Rectangle.Effect>
                                    </Rectangle>

                                    <!--Title bar-->
                                    <Grid Grid.Row="0" Background="{TemplateBinding BorderBrush}">
                                        <TextBlock Text="{TemplateBinding Title}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

                                        <Thumb Name="moveThumb" Opacity="0"/>

                                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                                            <!--Minimum button-->
                                            <Button Name="mininumBtn" Content="⚊" BorderThickness="0" Background="Transparent"/>
                                            <!--Maximum button-->
                                            <Button Name="maxinumBtn" Content="⬒" Margin="3,0" BorderThickness="0"
                                            Background="Transparent"/>
                                            <!--Close button-->
                                            <Button Name="closeBtn" Content="✖" Margin="0,0,3,0" BorderThickness="0"
                                            Foreground="Red" Background="Transparent"/>
                                        </StackPanel>
                                    </Grid>

                                    <ContentPresenter Grid.Row="1"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

Apply this new style to your control, then everything is done. Run app.