drag the three endpoints of the two lines

qwecskcnjff1 41 Reputation points
2020-06-17T05:31:07.617+00:00

I use the mouse to draw two lines, how to drag the three endpoints of the two lines,Similar to the effect below(it is a usercontrol,i want to line or path,not a usercontrol),I want to have two lines, and I can drag their common endpoint

10222-1.gif

10118-1.gif

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,706 questions
0 comments No comments
{count} votes

Accepted answer
  1. gekka 7,986 Reputation points MVP
    2020-06-18T05:37:31.197+00:00
    <Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    
        <DockPanel>
            <StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal"
        ToggleButton.Checked="RadioButtons_Checked">
                <RadioButton Content="Drag Point" x:Name="isDrag"  IsChecked="true"/>
                <RadioButton Content="Append Line" x:Name="isAppend"/>
            </StackPanel>
    
            <Canvas x:Name="canvas2">
                <Canvas.Resources>
                    <ControlTemplate TargetType="Thumb" x:Key="markerTemplate">
                        <Ellipse Fill="{TemplateBinding Background}" 
                                 HorizontalAlignment="Stretch" 
                                 VerticalAlignment="Stretch"/>
                    </ControlTemplate>
    
                    <Style TargetType="Thumb" x:Key="markerStyle">
                        <Setter Property="Width" Value="10"/>
                        <Setter Property="Height" Value="10" />
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <TranslateTransform X="-5" Y="-5" />
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Cursor" Value="Hand"/>
                        <Setter Property="Template" Value="{StaticResource markerTemplate}" />
                        <EventSetter Event="DragDelta" Handler="Thumb_DragDelta"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=.}" Value="{x:Null}">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                    <Style TargetType="{x:Type Line}">
                        <Setter Property="Cursor" Value="UpArrow" />
                        <EventSetter Event="MouseLeftButtonDown" Handler="Line_MouseLeftButtonDown" />
                    </Style>
                </Canvas.Resources>
    
                <Line X1="50"  Y1="50"   X2="200"  Y2="200" Stroke="Blue" StrokeThickness="2"/>
                <Line X1="100"  Y1="20"  X2="20"  Y2="200" Stroke="Green" StrokeThickness="2"/>
    
                <Thumb x:Name="marker1" DataContext="{x:Null}"
                       Canvas.Left="{Binding Path=X1,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                       Canvas.Top="{Binding Path=Y1,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                       Background="{Binding Path=Stroke}"
                       Style="{StaticResource  markerStyle}" />
    
                <Thumb x:Name="marker2"
                       DataContext="{x:Null}"
                       Canvas.Left="{Binding Path=X2,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                       Canvas.Top="{Binding Path=Y2,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                       Background="Red" 
               Style="{StaticResource  markerStyle}" />
            </Canvas>
        </DockPanel>
    </Window>
    
    
    
    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Input;
    using System.Windows.Shapes;
    
    namespace WpfApp1
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
            }
    
            private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
            {
                var thumb = (System.Windows.Controls.Primitives.Thumb)sender;
                Canvas.SetLeft(thumb, Canvas.GetLeft(thumb) + e.HorizontalChange);
                Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
            }
    
            private void Line_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                var line = (Line)sender;
                if (this.isDrag.IsChecked == true)
                {
                    this.marker1.DataContext = line;
                    this.marker2.DataContext = line;
                }
                else if (this.isAppend.IsChecked == true)
                {
                    var p = e.GetPosition((Canvas)line.Parent);
                    var p1 = new Point(line.X1, line.Y1);
                    var p2 = new Point(line.X2, line.Y2);
    
                    Line newline = new Line();
                    newline.Stroke = line.Stroke;
                    newline.StrokeThickness = line.StrokeThickness;
    
                    System.Windows.Controls.Primitives.Thumb thumb = null;
                    string num = "";
                    if ((p1 - p).Length < 10)
                    {
                        newline.X2 = p1.X;
                        newline.Y2 = p1.Y;
                        num = "1";
    
                    }
                    else if ((p2 - p).Length < 10)
                    {
                        newline.X2 = p2.X;
                        newline.Y2 = p2.Y;
                        num = "2";
                    }
                    else
                    {
                        return;
                    }
    
                    newline.SetBinding(Line.X1Property, new Binding("X" + num) { Source = line, Mode = BindingMode.TwoWay, UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged });
                    newline.SetBinding(Line.Y1Property, new Binding("Y" + num) { Source = line, Mode = BindingMode.TwoWay, UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged });
    
                    var canvas = (Canvas)line.Parent;
                    int index = canvas.Children.IndexOf(marker1);
                    canvas.Children.Insert(index, newline);
    
                    this.marker1.DataContext = newline;
                    this.marker2.DataContext = newline;
    
                    //Begin Drag
                    Dispatcher.BeginInvoke(new Action(() => { marker2.RaiseEvent(e); }), System.Windows.Threading.DispatcherPriority.Render);
                }
            }
    
    
            private void RadioButtons_Checked(object sender, RoutedEventArgs e)
            {
                if (this.marker1 != null && this.marker2 != null)
                {
                    this.marker1.DataContext = null;
                    this.marker2.DataContext = null;
                }
            }
        }
    }
    

0 additional answers

Sort by: Most helpful