C WPF uses dockpanel to realize screenshot box

---

Preface

Sometimes it is necessary to realize the screen capture function when making a desktop client , Screen capture can be selected on the interface , Make a mask, and then the middle box is transparent. You can move and change the size . This function is not easy to implement , Need a certain method , It uses DockPanel It is a relatively simple and direct implementation .

---

One 、 How to achieve ？

We can implement a screenshot window by following the steps below

1、 Set transparent window

First of all, the window must be a transparent window without borders , We don't use Transparency, Because it has a great impact on performance . We use WindowChrome Implement borderless transparent window .

<Window x:Class="WpfApp4.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp4" mc:Ignorable="d" Title="MainWindow" Height="720" Width="1280" Background="{x:Null}" ResizeMode="NoResize" WindowStyle="None" WindowState="Maximized" >
    <WindowChrome.WindowChrome>
        <WindowChrome GlassFrameThickness="-1" CaptionHeight="0" />
    </WindowChrome.WindowChrome>
</Window>

2、 Use DockPanel

Define a in the window DockPanel Control as parent , Definition 4 Three orientation filling controls and the middle screenshot box .

<DockPanel>
    <Grid x:Name="leftPanel" Width="400" DockPanel.Dock="Left" Background="#80000000"></Grid>
    <Grid x:Name="topPanel" Height="200" DockPanel.Dock="Top" Background="#80000000"></Grid>
    <Grid x:Name="rightPanel" Width="400" DockPanel.Dock="Right" Background="#80000000"></Grid>
    <Grid x:Name="bottomPanel" Height="200" DockPanel.Dock="Bottom" Background="#80000000"></Grid>
    <Grid x:Name="clipRect" MouseDown="Button_MouseDown" MouseMove="Button_MouseMove" MouseUp="Button_MouseUp" Background="Transparent">
        <Grid.Resources>
            <Style TargetType="Thumb"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Thumb"> <Border BorderBrush="Gray" BorderThickness="2" CornerRadius="8" Background="White"></Border> </ControlTemplate> </Setter.Value> </Setter> </Style>
        </Grid.Resources>
        <!-- Left -->
        <Thumb  Margin="-8,0,0,0" Width="16" Height="16" HorizontalAlignment="Left" VerticalAlignment="Center" Cursor="SizeWE"   DragDelta  ="Thumb_DragDelta"/>
        <!-- On -->
        <Thumb  Margin="0,-8,0,0" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Top" Cursor="SizeNS" DragDelta  ="Thumb_DragDelta"/>
        <!-- Right -->
        <Thumb  Margin="0,0,-8,0" Width="16" Height="16" HorizontalAlignment="Right" VerticalAlignment="Center" Cursor="SizeWE" DragDelta  ="Thumb_DragDelta"/>
        <!-- Next -->
        <Thumb  Margin="0,0,0,-8" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Bottom" Cursor="SizeNS" DragDelta  ="Thumb_DragDelta"/>
        <!-- Top left -->
        <Thumb  Margin="-8,-8,0,0" Width="16" Height="16" HorizontalAlignment="Left" VerticalAlignment="Top" Cursor="SizeNWSE" DragDelta  ="Thumb_DragDelta"/>
        <!-- The upper right -->
        <Thumb  Margin="0,-8,-8,0" Width="16" Height="16" HorizontalAlignment="Right" VerticalAlignment="Top"  Cursor="SizeNESW" DragDelta  ="Thumb_DragDelta"/>
        <!-- The lower right -->
        <Thumb  Margin="0,0,-8,-8" Width="16" Height="16" HorizontalAlignment="Right" VerticalAlignment="Bottom"  Cursor="SizeNWSE"  DragDelta  ="Thumb_DragDelta"/>
        <!-- The lower left -->
        <Thumb  Margin="-8,0,0,-8" Width="16" Height="16" HorizontalAlignment="Left" VerticalAlignment="Bottom" Cursor="SizeNESW" DragDelta  ="Thumb_DragDelta"/>
    </Grid>
</DockPanel>

Results the preview

3、 Implement drag logic

（1） Registration events

And Grid The drag implementation of is very similar ,4 The control of three directions can be used as margin Use , The screenshot box of the previous step is registered 3 Mouse events

 <Grid x:Name="clipRect" MouseDown="Button_MouseDown" MouseMove="Button_MouseMove" MouseUp="Button_MouseUp" Background="Transparent">

（2） Drag logic

take 4 The width and height of the control in three directions form a margin, Plug in 《C# wpf Realization Grid Drag the inner control 》 that will do , Just pay attention to boundary treatment （ Width and height cannot be negative ）, No specific code is posted here . Here is Button_MouseDown Some code examples of , And so on .

_mouseDownMargin = new Thickness(leftPanel.ActualWidth, topPanel.ActualHeight, rightPanel.ActualWidth, bottomPanel.ActualHeight);

4、 Implement drag resizing logic

（1） Registration events

In the interface 8 individual Thumb Register the same Thumb_DragDelta event .

<Thumb  Margin="-8,0,0,0" Width="16" Height="16" HorizontalAlignment="Left" VerticalAlignment="Center" Cursor="SizeWE"   DragDelta  ="Thumb_DragDelta"/>

（2） Implementation logic

take 4 The width and height of the control in three directions form a margin, Plug in 《C# wpf Grid Control drag resizing in 》 Of Thumb_DragDelta that will do , Just pay attention to boundary treatment （ Width and height cannot be negative ）. No specific code is posted here . Here is Thumb_DragDelta Some code examples of , And so on .

if (thumb.HorizontalAlignment == HorizontalAlignment.Left)
{
    
    right = rightPanel.ActualWidth;
    left = leftPanel.ActualWidth + e.HorizontalChange;
    width = (double.IsNaN(c.Width) ? c.ActualWidth : c.Width) - e.HorizontalChange;
}

---

Two 、 Complete code

https://download.csdn.net/download/u013113678/85841950

---

3、 ... and 、 Results the preview

---

summary

That's what we're going to talk about today , This article briefly introduces the implementation of the screenshot box , I used to spend a lot of energy on the interface function of events , In particular, calculate the control width and position relationship , It needs to be calculated carefully . The screen capture interface effect achieved in this paper is OK , Dragging is also smooth , Fully meet the use of general projects .