question

qwecskcnjff1-6871 avatar image
0 Votes"
qwecskcnjff1-6871 asked ·

drag the three endpoints of the two lines

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-wpf
1.gif (33.5 KiB)
1.gif (8.1 KiB)
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

gekka avatar image
0 Votes"
gekka answered ·

<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;
            }
        }
    }
}
· 2 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

how to drag their common endpoint.

0 Votes 0 ·
gekka avatar image gekka qwecskcnjff1-6871 ·

Are you not running my sample code?

Select the appropriate radio button at the bottom , select line and drag marker with your mouse.

0 Votes 0 ·