title: Place a moveable reactangle on an WPF image control
body: <p>I need to place a moveable rectangle on a WPF Image control. When the user clicks a button after moving the rectangle it should give me the Rect coordinates.</p>
  
  <p>I can't imaging this is so hard to do, but I can't figure it out. Found some examples to draw a rectangle with the mouse and then crop the image, but that's not what I need.</p>
  
  <p>Here is the code of my UserControl which can shown an Image and his properties.
  On the Image there should be placed a moveable rectangle as I described above.</p>
  
  <p>Any ideas how I can accomplish this? </p>
  
  <pre><code>    &lt;UserControl x:Class="Test.View.UserControls.PhotoEditorControl"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               mc:Ignorable="d"
               d:DesignHeight="500"
               d:DesignWidth="400"
               x:Name="photoEditorControl"&gt;
    &lt;UserControl.Resources&gt;
      &lt;ResourceDictionary&gt;
        &lt;ResourceDictionary.MergedDictionaries&gt;
          &lt;ResourceDictionary Source="../../Styles.xaml" /&gt;
        &lt;/ResourceDictionary.MergedDictionaries&gt;
      &lt;/ResourceDictionary&gt;
    &lt;/UserControl.Resources&gt;
    &lt;Grid Background="Transparent"
          Visibility="{Binding ElementName=photoEditorControl,Path=ControlVisibility, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"&gt;
      &lt;Grid Name="popupBackground"
            Grid.RowSpan="4"&gt;
        &lt;Grid.Background&gt;
          &lt;SolidColorBrush Color="#9995AE"
                           Opacity="0.3" /&gt;
        &lt;/Grid.Background&gt;
      &lt;/Grid&gt;
      &lt;Border BorderBrush="Black"
              Background="WhiteSmoke"
              BorderThickness="1"
              CornerRadius="15"
              DockPanel.Dock="Bottom"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"&gt;
        &lt;Border.BitmapEffect&gt;
          &lt;DropShadowBitmapEffect Color="Black"
                                  Opacity="0.5"
                                  Direction="270"
                                  ShadowDepth="0.7" /&gt;
        &lt;/Border.BitmapEffect&gt;
        &lt;Grid Width="380"
              Height="450"&gt;
          &lt;Grid.ColumnDefinitions&gt;
            &lt;ColumnDefinition Width="*" /&gt;
            &lt;ColumnDefinition Width="*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Grid.RowDefinitions&gt;
            &lt;RowDefinition Height="Auto" /&gt;
            &lt;RowDefinition Height="*" /&gt;
            &lt;RowDefinition Height="150" /&gt;
            &lt;RowDefinition Height="Auto" /&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Border Margin="15,15,15,0"
                  Background="WhiteSmoke"
                  Grid.Row="1"
                  Grid.ColumnSpan="2"
                  VerticalAlignment="Top"
                  HorizontalAlignment="Center"&gt;
            &lt;Border.Effect&gt;
              &lt;DropShadowEffect ShadowDepth="3"
                                Color="LightGray" /&gt;
            &lt;/Border.Effect&gt;
            &lt;Image Source="{Binding ElementName=photoEditorControl, Path=Image.MediumUrl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                   Stretch="Uniform"&gt;
            &lt;/Image&gt;
          &lt;/Border&gt;
          &lt;Grid Grid.Row="2"
                Grid.ColumnSpan="2"&gt;
            &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="150*" /&gt;
            &lt;/Grid.ColumnDefinitions&gt;
            &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto" /&gt;
              &lt;RowDefinition Height="Auto" /&gt;
              &lt;RowDefinition Height="Auto" /&gt;
              &lt;RowDefinition Height="Auto" /&gt;
              &lt;RowDefinition Height="Auto" /&gt;
              &lt;RowDefinition Height="25" /&gt;
            &lt;/Grid.RowDefinitions&gt;
            &lt;TextBlock Name="textBlock1"
                       Text="Properties"
                       Grid.ColumnSpan="2"
                       HorizontalAlignment="Center"
                       Style="{StaticResource InfoLabel}" /&gt;
            &lt;TextBlock Grid.Row="1"
                       Name="textBlockName"
                       Text="Filename:"
                       Style="{StaticResource InfoLabel}" /&gt;
            &lt;TextBlock Grid.Row="2"
                       Name="textBlockAlbum"
                       Text="Original name:"
                       Style="{StaticResource InfoLabel}" /&gt;
            &lt;TextBlock Grid.Row="3"
                       Name="textBlockFilesize"
                       Text="Filesize:"
                       Style="{StaticResource InfoLabel}" /&gt;
            &lt;TextBlock Grid.Row="4"
                       Name="textBlockSize"
                       Text="Size:"
                       Style="{StaticResource InfoLabel}" /&gt;
            &lt;TextBlock Grid.Row="5"
                       Name="textBlockSavedDate"
                       Text="Upload date:"
                       Style="{StaticResource InfoLabel}" /&gt;
            &lt;TextBlock Grid.Row="1"
                       Grid.Column="1"
                       Name="textBlockNameData"
                       Margin="4"
                       Text="{Binding ElementName=photoEditorControl, Path=Image.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /&gt;
            &lt;TextBlock Grid.Row="2"
                       Grid.Column="1"
                       Name="textBlockOriginalNameData"
                       Margin="4"
                       Text="{Binding ElementName=photoEditorControl, Path=Image.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /&gt;
            &lt;TextBlock Grid.Row="3"
                       Grid.Column="1"
                       Name="textBlockFileSizeData"
                       Margin="4"
                       Text="{Binding ElementName=photoEditorControl, Path=Image.FileSize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /&gt;
            &lt;TextBlock Grid.Row="4"
                       Grid.Column="1"
                       Name="textBlockSizeData"
                       Margin="4"&gt;
                &lt;TextBlock.Text&gt;
                  &lt;MultiBinding StringFormat="{}{0}x{1}"&gt;
                    &lt;Binding ElementName="photoEditorControl"
                             Path="Image.Width"
                             Mode="TwoWay"
                             UpdateSourceTrigger="PropertyChanged" /&gt;
                    &lt;Binding ElementName="photoEditorControl"
                             Path="Image.Height"
                             Mode="TwoWay"
                             UpdateSourceTrigger="PropertyChanged" /&gt;
                  &lt;/MultiBinding&gt;
                &lt;/TextBlock.Text&gt;
            &lt;/TextBlock&gt;
            &lt;TextBlock Grid.Row="5"
                       Grid.Column="1"
                       Name="textBlockUploadDateData"
                       Margin="4"
                       Text="{Binding ElementName=photoEditorControl, Path=Image.DateUploaded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /&gt;
          &lt;/Grid&gt;
          &lt;Button Content="Close"
                  Grid.Row="3"
                  Height="30"
                  HorizontalAlignment="Left"
                  VerticalAlignment="Center"
                  Margin="10 5 5 10"
                  Name="buttonCancel"
                  Width="75"
                  Command="{Binding ElementName=photoEditorControl, Path=CloseControlCommand}" /&gt;
          &lt;Button Content="Done"
                  Grid.Column="1"
                  Grid.Row="3"
                  Height="30"
                  Margin="5 5 10 10"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Center"
                  Name="buttonDone"
                  Width="75"
                  Visibility="Visible" /&gt;
        &lt;/Grid&gt;
      &lt;/Border&gt;
    &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>Why don I see my full UserControl code? When I vlick edit I do see it in the text editor.</p>