可拖動silverlight用戶控件

Question

我在Silverlight中創建了draggaable用戶控件，但在移動頁面內控件時遇到問題。其實問題是，當我拖動時，拖動的控件移出頁面，我不想要。我希望控件只能在父控件內拖動。

任何幫助/建議，將不勝感激。

Below is the code used to perform operation: 
XAML: 
<Grid x:Name="LayoutRoot" > 
     <Grid.RenderTransform> 
      <TransformGroup> 
       <ScaleTransform/> 
       <SkewTransform/> 
       <RotateTransform/> 
       <TranslateTransform x:Name="LocalTranslateTransform"/> 
      </TransformGroup> 
     </Grid.RenderTransform> 
C#: 
private void OnToolbarClicked(object sender, MouseButtonEventArgs e) 
{ 
    mouseDownInToolbar = true; 
    DragOffset = e.GetPosition(LayoutRoot); 
    toolbarBorder.CaptureMouse(); 
} 

private void OnToolbarMoving(object sender, MouseEventArgs e) 
{ 
    if (mouseDownInToolbar) 
    { 
     // we want to move it based on the position of the mouse 
     moveUserControl(e); 
    } 
} 

private void moveUserControl (MouseEventArgs e) 
{ 
    Point mousePos = e.GetPosition(LayoutRoot); 
    Double newX = LocalTranslateTransform.X + (mousePos.X - DragOffset.X); 
    Double newY = LocalTranslateTransform.Y + (mousePos.Y - DragOffset.Y); 
    LocalTranslateTransform.X = newX; 
    LocalTranslateTransform.Y = newY; 
} 

private void OnToolbarReleased(object sender, MouseButtonEventArgs e) 
{ 
    mouseDownInToolbar = false; 
    toolbarBorder.ReleaseMouseCapture(); 
} 

Answer 1

當您使用TranslateTransform，你發送指令給合成器線程X/Y偏移量來顯示元素。它不遵守你的面板和任何可視化樹成員的規則。所以，你必須告訴合成器線程關於邊界。使用Clip這樣的：

<Grid Width="500" Height="500"> 
    <Grid.Clip> 
     <RectangleGeometry Rect="0,0,500,500" /> 
    </Grid.Clip> 

    <Grid x:Name="LayoutRoot"> 
     <!-- This is the element being dragged by the mouse --> 
    </Grid> 
</Grid> 

的RectangleGeometry將創造一個子元素允許出現的邊界。外面的任何東西都會被裁剪掉。

---

做必要的更改之後，這是它的樣子。

---

你需要創建一個約束。

計算是否將實際控制轉換到父級邊界之外。

private void moveUserControl (MouseEventArgs e) 
{ 
    Point mousePos = e.GetPosition(LayoutRoot); 
    Double newX = LocalTranslateTransform.X + (mousePos.X - DragOffset.X); 
    Double newY = LocalTranslateTransform.Y + (mousePos.Y - DragOffset.Y); 

    var minX = 0; 
    var maxX = 500 - ActualWidth; // 500 is parent width 
    var minY = 0; 
    var maxY = 500 - ActualHeight; // 500 is parent height 

    if (newX < minX) 
    { 
     newX = minX; 
    } 
    else if (newX > maxX) 
    { 
     newX = maxX; 
    } 

    if (newY < minY) 
    { 
     newY = minY; 
    } 
    else if (newY > maxY) 
    { 
     newY = maxY; 
    } 

    LocalTranslateTransform.X = newX; 
    LocalTranslateTransform.Y = newY; 
}