title: C# WPF - how to prevent image to be dragged outside canvas
body: <p>i tried this <a href="https://stackoverflow.com/questions/17035225/c-sharp-wpf-drag-an-image">Answer</a> and implement it to my code, and here is my code :</p>
  
  <p>XAML</p>
  
  <pre><code>&lt;Window x:Class="DSLayout.MainWindow"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
              xmlns:tk="http://schemas.xceed.com/wpf/xaml/toolkit"
              xmlns:local="clr-namespace:DSLayout"
              Title="MainWindow" Height="720" Width="1280" ResizeMode="NoResize"&gt;
  &lt;Window.Resources&gt;
      &lt;local:BrushColorConverter x:Key="BrushColorConverter"/&gt;
  &lt;/Window.Resources&gt;
  
  &lt;Grid&gt;
      &lt;Border BorderBrush="Silver" BorderThickness="1" Name="borderHeader" Margin="12,12,12,636" /&gt;
      &lt;Border BorderBrush="Silver" BorderThickness="1" Name="borderEditor" Margin="12,69,850,12"&gt;
          &lt;Canvas&gt;
              &lt;Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="20" Height="59" Name="border1" Width="355"&gt;&lt;/Border&gt;
              &lt;Canvas Height="59" Canvas.Left="26" Canvas.Top="20"&gt;&lt;/Canvas&gt;
              &lt;TextBlock Name="textBlock1" Text="Color Palette" Height="31" Width="197" FontSize="22" Canvas.Left="40" Canvas.Top="34" /&gt;
              &lt;tk:ColorPicker x:Name="ColorPalette" ColorMode="ColorCanvas" 
                              SelectedColor="{Binding ElementName=Layout, 
                                              Path=Background, 
                                              Converter={StaticResource BrushColorConverter}}" 
                              Canvas.Left="243" Canvas.Top="34" Height="31" /&gt;
              &lt;Button Grid.Row="1" Content="Add Image" Click="AddButtonClick" Canvas.Left="24" Canvas.Top="100" Height="43" Width="104" /&gt;
              &lt;Border BorderBrush="Silver" BorderThickness="1" Canvas.Left="24" Canvas.Top="227" Height="350" Name="border3" Width="355"&gt;
                  &lt;Canvas&gt;
                      &lt;TextBlock Canvas.Left="15" Canvas.Top="27" Height="23" Name="textBlock2" Text="X-Pos " FontSize="16" Width="53" /&gt;
                      &lt;TextBlock Canvas.Left="174" Canvas.Top="27" FontSize="16" Height="23" Name="textBlock3" Text="Y-Pos " Width="53" /&gt;
                      &lt;Label Name="posX" Height="23" Width="83" Canvas.Left="74" Canvas.Top="27" /&gt;
                      &lt;Label Name="posY" Canvas.Left="233" Canvas.Top="27" Height="23" Width="83" /&gt;
                      &lt;TextBlock Canvas.Left="15" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock4" Text="Width" Width="53" /&gt;
                      &lt;TextBlock Canvas.Left="174" Canvas.Top="68" FontSize="16" Height="23" Name="textBlock5" Text="Height" Width="53" /&gt;
                      &lt;Label Name="imgHeight" Canvas.Left="74" Canvas.Top="68" Height="23" Width="83" /&gt;
                      &lt;Label Name="imgWidth" Canvas.Left="233" Canvas.Top="68" Height="23" Width="83" /&gt;
                      &lt;!--&lt;TextBlock Canvas.Left="15" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock4" Text="Height" Width="53" /&gt;
                      &lt;TextBlock Canvas.Left="174" Canvas.Top="169" FontSize="16" Height="23" Name="textBlock5" Text="Width" Width="53" /&gt;
                      &lt;TextBox Canvas.Left="74" Canvas.Top="169" Height="23" Name="textBox3" Width="83" /&gt;
                      &lt;TextBox Canvas.Left="233" Canvas.Top="169" Height="23" Name="textBox4" Width="83" /&gt;--&gt;
                  &lt;/Canvas&gt;
              &lt;/Border&gt;
          &lt;/Canvas&gt;
      &lt;/Border&gt;
      &lt;Border BorderBrush="Silver" BorderThickness="1" Name="borderLayout" Margin="446,69,12,12"&gt;
          &lt;Canvas x:Name="Layout" Background="White" AllowDrop="True" ClipToBounds="True"
                  MouseLeftButtonDown="MouseLeftButtonDown"
                  MouseLeftButtonUp="MouseLeftButtonUp"
                  MouseMove="MouseMove"&gt;
          &lt;/Canvas&gt;
      &lt;/Border&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>CS</p>
  
  <pre><code>namespace DSLayout
  {
      public partial class MainWindow : Window
      {
          public MainWindow()
          {
              InitializeComponent();
          }
  
          public int imgX { get; set; }
  
          public int imgY { get; set; }
  
          private void AddButtonClick(object sender, RoutedEventArgs e)
          {
              var dialog = new Microsoft.Win32.OpenFileDialog();
              dialog.Filter =
                  "Image Files (*.jpg; *.png; *.jpeg; *.gif; *.bmp)|*.jpg; *.png; *.jpeg; *.gif; *.bmp";
  
              if ((bool)dialog.ShowDialog())
              {
                  var bitmap = new BitmapImage(new Uri(dialog.FileName));
                  var image = new Image { Source = bitmap };
                  this.imgX = bitmap.PixelWidth;
                  this.imgY = bitmap.PixelWidth;
  
                  Canvas.SetLeft(image, 0);
                  Canvas.SetTop(image, 0);
                  Layout.Children.Add(image);
                  imgHeight.Content = bitmap.PixelHeight;
                  imgWidth.Content = bitmap.PixelWidth;
              }
          }
  
          private Image draggedImage;
          private Point mousePosition;
  
  
          private void MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
          {
              var image = e.Source as Image;
  
              if (image != null &amp;&amp; Layout.CaptureMouse())
              {
                  mousePosition = e.GetPosition(Layout);
                  draggedImage = image;
                  Panel.SetZIndex(draggedImage, 1);
              }
          }
  
          private void MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
          {
              if (draggedImage != null)
              {
                  Layout.ReleaseMouseCapture();
                  Panel.SetZIndex(draggedImage, 0);
                  draggedImage = null;
              }
          }
  
          private void MouseMove(object sender, MouseEventArgs e)
          {
              if (draggedImage != null)
              {
                  var position = e.GetPosition(Layout);
                  var offset = position - mousePosition;
                  mousePosition = position;
  
                  if (mousePosition.X &gt; 0 &amp;&amp; mousePosition.Y &gt; 0)
                  {
                      Canvas.SetLeft(draggedImage, Canvas.GetLeft(draggedImage) + offset.X);
                      Canvas.SetTop(draggedImage, Canvas.GetTop(draggedImage) + offset.Y);
                  }
                  posX.Content = Canvas.GetLeft(draggedImage);
                  posY.Content = Canvas.GetTop(draggedImage);
  
              }
          }
  
  
      }
  }
  </code></pre>
  
  <p>so i tried using the ClipToBound="True" but it'll missing if i drag to outside the canvas. so i tried to limit it using <code>if (mousePosition.X &gt; 0 &amp;&amp; mousePosition.Y &gt; 0)</code> works but not that i want because it will go outside the canvas if i drag it to the left and i drag from the right point of the image.</p>
  
  <p>my idea is to make the draggedImage to be my cursor so with <code>if (mousePosition.X &gt; 0 &amp;&amp; mousePosition.Y &gt; 0)</code> it will prevent draggedImage to go outside the canvas. is that possible to do that?</p>
  
  <p>or any simple idea to solve this?</p>
  
  <p>EDIT :</p>
  
  <p>i tried using this code but it works but its not really good because when i drag it out side the canvas it'll move like bouncy from pos -1 to 0.</p>
  
  <pre><code>if (Canvas.GetLeft(draggedImage) &lt;= 0)
  {
      Canvas.SetLeft(draggedImage, 0);
  }
  
  if (Canvas.GetTop(draggedImage) &lt;= 0)
  {
      Canvas.SetTop(draggedImage, 0);
  }
  
  if (Canvas.GetLeft(draggedImage) + this.imgX &gt;= 800)
  {
      Canvas.SetLeft(draggedImage, 800 - this.imgX);
  }
  
  if (Canvas.GetTop(draggedImage) +this.imgY &gt;= 600)
  {
      Canvas.SetTop(draggedImage, 600 - this.imgY);
  }
  </code></pre>