WPF C# implementing a resize grip

问题

i want to implement a resize grip to my tool. I know that i can activate a grip by setting ResizeMode="CanResizeWithGrip" but i want to grip to be in an Grid, which is only visible on Hovering. I made a Grid with an Image

<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>

And i have to handle these Events in Code:

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;
}

Does anyone knows how to implement the Mouse Down Method?

回答1:

Here is a simple example (Note I used a Border instead of the image, but changing it is straight forward)

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>

Code

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);
        }

    }


}

回答2:

The code in the accepted answer does not work (see wpf: capturing mouse does not work). Use thumb instead:

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

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

For more information: https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/how-to-resize-a-canvas-by-using-a-thumb

来源：https://stackoverflow.com/questions/42338586/wpf-c-sharp-implementing-a-resize-grip