WPF C＃实现了一个调整大小的抓握

Posted 2021-04-14

我想对我的工具实现一个调整大小的抓握。我知道我可以通过设置ResizeMode="CanResizeWithGrip"激活一个手柄，但我想抓住一个网格，这只在悬停时可见。我用图像制作了一个网格

<Grid x:Name="gridResize" Background="Transparent" Margin="236,235,0,0">
    <Image x:Name="resizeGrip" HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="27" Margin="37,35,0,0" Source="UserControls/Images/sizegrip.png"/>
</Grid>

我必须在代码中处理这些事件：

private void ResizeGrip_MouseDown(object sender, MouseButtonEventArgs e)
{
    throw new NotImplementedException();
}

private void GridResize_MouseLeave(object sender, MouseEventArgs e)
{
    gridResize.Visibility = Visibility.Hidden;
}

private void GridResize_MouseEnter(object sender, MouseEventArgs e)
{
    gridResize.Visibility = Visibility.Visible;
}

有谁知道如何实现鼠标按下方法？

答案

这是一个简单的例子（注意我使用的是Border而不是图像，但更改它是直接的）

XAML

 <Window x:Class="Test.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:Test" 
    xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
    mc:Ignorable="d"
    Title="MainWindow"
    PreviewMouseMove="window_PreviewMouseMove">

<Grid>
    <Grid Background="Red" x:Name="gridResize"  Margin="236,235,0,0" >
        <Border Focusable="True" Background="Black" BorderBrush="LightGray" BorderThickness="1" Opacity="0.2" x:Name="resizeGrip" HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="27" 
                PreviewMouseLeftButtonDown="resizeGrip_PreviewMouseLeftButtonDown" PreviewMouseLeftButtonUp="resizeGrip_PreviewMouseLeftButtonUp"  >
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter  Property="Opacity" Value="1.0"/>
                            <Setter Property="Cursor" Value="SizeNWSE"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </Grid>
</Grid>

</Window>

码

public partial class MainWindow : Window
{ 
    public MainWindow()
    {
        this.InitializeComponent(); 
    }

    Point _startPosition;
    bool _isResizing = false;
    private void resizeGrip_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if (Mouse.Capture(resizeGrip))
        {
            _isResizing = true;
            _startPosition = Mouse.GetPosition(this);
        }
    }

    private void window_PreviewMouseMove(object sender, MouseEventArgs e)
    {
        if (_isResizing)
        {
            Point currentPosition = Mouse.GetPosition(this);
            double diffX = currentPosition.X - _startPosition.X;
            double diffY = currentPosition.Y - _startPosition.Y;
            double currentLeft = gridResize.Margin.Left;
            double currentTop = gridResize.Margin.Top;
            gridResize.Margin = new Thickness(currentLeft + diffX, currentTop + diffY, 0, 0);
            _startPosition = currentPosition;
        }
    }

    private void resizeGrip_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        if (_isResizing == true)
        {
            _isResizing = false;
            Mouse.Capture(null);
        }

    }


}

另一答案

接受的答案中的代码不起作用（请参阅wpf: capturing mouse does not work）。改用拇指：

<Thumb Name="ResizeGripper" DragDelta="ResizeGripper_DragDelta" />

private void ResizeGripper_DragDelta(object sender, DragDeltaEventArgs e)
{
    Width -= e.HorizontalChange;
}

有关更多信息：https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-resize-a-canvas-by-using-a-thumb