WPF에서 움직일 수있는 컨트롤 만들기

Question

패널 안에는 여러 개의 직사각형 컨트롤 (컨트롤 개수)이 있습니다. 사용자가 컨트롤을 정렬 할 수 있도록 패널 내에서 컨트롤을 이동할 수있게하려는 경우 그들을 가장 잘 맞는 방식으로 누구든지 제가 읽을 수있는 자원이 있거나 올바른 길로 향하게하는 간단한 팁이 있습니까?

감사

Answer 1

당신은 여기에서 많은 영감을 찾을 수 있습니다 : 사용자가 빠르게 마우스를 이동하는 경우로서

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part1.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part2.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part3.aspx

http://www.codeproject.com/KB/WPF/WPFDiagramDesigner_Part4.aspx

Answer 2

내가 드래그/이동 스타일로 컨트롤을 이동 가능한, 간단한 방법을 알아 냈 ... 다음 단계입니다.

1. 운동 영역이되고 싶은 컨트롤을 선택하십시오. 이것은 사용자가 마우스를 누르고 있으면 컨트롤이 움직이는 영역입니다. 제 경우에는 컨트롤 상단의 사각형 테두리였습니다. 다음 코드
   를 사용
2. 사용 사실이고 (은 initialPosition을), 최초의 MouseDown 이벤트에 거짓

3. 로 설정 몇 가지 포인트 속성을 설정하는 MouseUp 이벤트에 (내 경우 IsMoving에서) 부울을 설정하면 onMouseDown 이벤트

   if (FirstClick) 
   { 
       GeneralTransform transform = this.TransformToAncestor(this.Parent as Visual); 
       Point StartPoint = transform.Transform(new Point(0, 0)); 
       StartX = StartPoint.X; 
       StartY = StartPoint.Y; 
       FirstClick = false; 
   } 
   

4. 이제 시작 위치를 가졌으므로 이동 컨트롤에 상대적인 마우스 위치를 가져와야합니다. 이렇게하면 머리글의 가운데를 클릭하여 이동하지 않고 마우스 포인터 위치로 컨트롤의 왼쪽 상단을 즉시 이동합니다. 이렇게하려면 MouseDown 이벤트에 코드를 삽입 :

   Point RelativeMousePoint = Mouse.GetPosition(Header); 
   RelativeX = RelativeMousePoint.X; 
   RelativeY = RelativeMousePoint.Y; 
   

5. 는 이제 컨트롤 (STARTX 및 STartY)에서 시작된 지점이 당신의 운동 제어 (RelativeX, RelativeY) 내에서 마우스의 위치, 컨트롤을 새로운 위치로 옮겨야합니다! 이 작업에는 몇 가지 단계가 있습니다. 첫째, 귀하의 컨트롤은 TranslateTransform 인 RenderTransform을 가져야합니다. XAML에서이 값을 설정하지 않으려면 this.RenderTransform = new TranslateTransform을 사용하여 자유롭게 설정하십시오.

6. 이제 컨트롤이 새 위치로 이동하도록 RenderTransform에서 X 및 Y 좌표를 설정해야합니다. 다음 코드는 수행이

   private void Header_MouseMove(object sender, MouseEventArgs e) 
   { 
       if (IsMoving) 
       { 
        //Get the position of the mouse relative to the controls parent    
        Point MousePoint = Mouse.GetPosition(this.Parent as IInputElement); 
        //set the distance from the original position 
        this.DistanceFromStartX= MousePoint.X - StartX - RelativeX ; 
        this.DistanceFromStartY= MousePoint.Y - StartY - RelativeY; 
        //Set the X and Y coordinates of the RenderTransform to be the Distance from original position. This will move the control 
        TranslateTransform MoveTransform = base.RenderTransform as TranslateTransform; 
        MoveTransform.X = this.DistanceFromStartX; 
        MoveTransform.Y = this.DistanceFromStartY; 
       } 
   } 
   

당신이 추측 수 있듯이,이 중단 된 코드 (변수 선언 등)의 비트가 그러나 이것은 당신이 시작 :) 행복 코딩을 활용하기 위해 필요한 모든 기능해야한다.

편집 :
발생할 수있는 한 가지 문제는 컨트롤을 부모 컨트롤 영역 밖으로 이동할 수 있다는 것입니다. 해당 문제를 해결하기위한 빠르고 간단 코드는 다음과 같습니다.

if ((MousePoint.X + this.Width - RelativeX > Parent.ActualWidth) || 
    MousePoint.Y + this.Height - RelativeY > Parent.ActualHeight || 
    MousePoint.X - RelativeX < 0 || 
    MousePoint.Y - RelativeY < 0) 
{ 
    IsMoving = false; 
    return; 
} 

실제 이동이 일어나기 전에이 코드를 MouseMove 이벤트에 삽입하십시오. 컨트롤이 부모 컨트롤의 경계를 벗어나려고 시도하는지 확인합니다. IsMoving = false 명령은 컨트롤이 이동 모드를 종료하도록합니다. 즉, 경계에서 멈추었을 때 사용자가 이동 영역을 다시 클릭하여 컨트롤을 이동해야 할 필요가 있음을 의미합니다. 컨트롤이 자동으로 계속 이동하게하려면 해당 라인을 꺼내십시오. 컨트롤이 올바른 영역으로 돌아 가면 바로 커서 위로 돌아갑니다.