快捷導(dǎo)航

C#?wpf使用DockPanel實(shí)現(xiàn)制作截屏框

更新時(shí)間：2023年09月07日 08:44:41 作者：CodeOfCC

做桌面客戶端的時(shí)候有時(shí)需要實(shí)現(xiàn)截屏功能,能夠在界面上框選截屏,本文就來(lái)為大家介紹一下wpf如何使用DockPanel制作截屏框吧,感興趣的可以了解下

前言

做桌面客戶端的時(shí)候有時(shí)需要實(shí)現(xiàn)截屏功能，能夠在界面上框選截屏，做一個(gè)蒙版然后中間選框透明可以移動(dòng)和改變大小。這個(gè)功能是不太好實(shí)現(xiàn)的，需要一定的方法，其中使用DockPanel是相對(duì)簡(jiǎn)單直接的實(shí)現(xiàn)。

一、如何實(shí)現(xiàn)

我們按照如下步驟即可實(shí)現(xiàn)一個(gè)截屏窗口

1、設(shè)置透明窗口

首先窗口必須是無(wú)邊框的透明窗口，我們這里不使用Transparency，因?yàn)閷?duì)性能影響比較大。我們使用WindowChrome實(shí)現(xiàn)無(wú)邊框透明窗口。

<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、使用DockPanel

在窗口中定義一個(gè)DockPanel控件作為父級(jí)，定義4個(gè)方位填充控件以及中間截屏框。

<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>
        <!--左-->
        <Thumb  Margin="-8,0,0,0" Width="16" Height="16" HorizontalAlignment="Left" VerticalAlignment="Center" Cursor="SizeWE"   DragDelta  ="Thumb_DragDelta"/>
        <!--上-->
        <Thumb  Margin="0,-8,0,0" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Top" Cursor="SizeNS" DragDelta  ="Thumb_DragDelta"/>
        <!--右-->
        <Thumb  Margin="0,0,-8,0" Width="16" Height="16" HorizontalAlignment="Right" VerticalAlignment="Center" Cursor="SizeWE" DragDelta  ="Thumb_DragDelta"/>
        <!--下-->
        <Thumb  Margin="0,0,0,-8" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Bottom" Cursor="SizeNS" DragDelta  ="Thumb_DragDelta"/>
        <!--左上-->
        <Thumb  Margin="-8,-8,0,0" Width="16" Height="16" HorizontalAlignment="Left" VerticalAlignment="Top" Cursor="SizeNWSE" DragDelta  ="Thumb_DragDelta"/>
        <!--右上-->
        <Thumb  Margin="0,-8,-8,0" Width="16" Height="16" HorizontalAlignment="Right" VerticalAlignment="Top"  Cursor="SizeNESW" DragDelta  ="Thumb_DragDelta"/>
        <!--右下-->
        <Thumb  Margin="0,0,-8,-8" Width="16" Height="16" HorizontalAlignment="Right" VerticalAlignment="Bottom"  Cursor="SizeNWSE"  DragDelta  ="Thumb_DragDelta"/>
        <!--左下-->
        <Thumb  Margin="-8,0,0,-8" Width="16" Height="16" HorizontalAlignment="Left" VerticalAlignment="Bottom" Cursor="SizeNESW" DragDelta  ="Thumb_DragDelta"/>
    </Grid>
</DockPanel>

效果預(yù)覽

3、實(shí)現(xiàn)拖動(dòng)邏輯

（1）注冊(cè)事件

與Grid的拖動(dòng)實(shí)現(xiàn)非常類似，4個(gè)方位的控件可以當(dāng)成margin使用，上一步的截屏框注冊(cè)3個(gè)鼠標(biāo)事件

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

（2）拖動(dòng)邏輯

將4個(gè)方位的控件的寬高組成一個(gè)margin，代入《C# wpf 實(shí)現(xiàn)Grid內(nèi)控件拖動(dòng)》即可，只需要注意邊界處理（寬高不能為負(fù)數(shù)），此處不貼具體代碼。下面是Button_MouseDown的部分代碼示例，以此類推即可。

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

4、實(shí)現(xiàn)拖動(dòng)調(diào)大小邏輯

（1）注冊(cè)事件

給界面中的8個(gè)Thumb注冊(cè)同一個(gè)Thumb_DragDelta事件。

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

（2）實(shí)現(xiàn)邏輯

將4個(gè)方位的控件的寬高組成一個(gè)margin，代入《C# wpf Grid中實(shí)現(xiàn)控件拖動(dòng)調(diào)整大小》的Thumb_DragDelta即可，只需要注意邊界處理（寬高不能為負(fù)數(shù)）。此處不貼具體代碼。下面是Thumb_DragDelta的部分代碼示例，以此類推即可。

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

二、效果預(yù)覽

三、總結(jié)

本文簡(jiǎn)單介紹截屏框的實(shí)現(xiàn)，曾經(jīng)為了事件這個(gè)界面功能花了不少精力，尤其是計(jì)算控件寬度以及位置關(guān)系，需要仔細(xì)計(jì)算。本文實(shí)現(xiàn)的截屏界面效果是可以的，拖動(dòng)也是流暢的，完全滿足一般項(xiàng)目的使用。

到此這篇關(guān)于C# wpf使用DockPanel實(shí)現(xiàn)制作截屏框的文章就介紹到這了,更多相關(guān)C# wpf DockPanel截屏框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: