title: C# drag and drop, why does the image flip upside down?
body: <p>Im developing a Metro App in C# and XAML, a page has a drag and drop feature.</p>
  
  <p>For some reason when the image is dropped in the area it gets dropped in the image flips upside down.</p>
  
  <p>Heres the XAML code</p>
  
  <pre><code>&lt;ScrollViewer Height="247"
          Grid.Row="1"
          HorizontalScrollMode ="Enabled"
          HorizontalScrollBarVisibility ="Visible"
          VerticalScrollMode ="Disabled"
          VerticalScrollBarVisibility ="Disabled" Margin="10,0,449,442" &gt;
  
          &lt;GridView x:Name="availableItems" 
              CanDragItems="True"
              CanReorderItems="True"
              DragItemsStarting="dragItem"
                    AllowDrop="True"
              Drop="dropItemSource"
              Width="auto"
              ItemsSource="{Binding source}" &gt;
              &lt;GridView.ItemTemplate&gt;
                  &lt;DataTemplate&gt;
                      &lt;Image Source="{Binding Image}" Width="163" Height="247" /&gt;
                  &lt;/DataTemplate&gt;
              &lt;/GridView.ItemTemplate&gt;
  
          &lt;/GridView&gt;
      &lt;/ScrollViewer&gt;
      &lt;Grid Grid.Row="1"&gt;
      &lt;GridView x:Name="chosenItems"
                CanDragItems="True"
                CanReorderItems="True"
                AllowDrop="True"
                DragItemsStarting="dragItem"
                Drop="dropItemDestination"
                ItemsSource="{Binding destination}" Margin="135,405,144,93" RenderTransformOrigin="0.5,0.5" Grid.Row="1" Background="#FFD18F8F"&gt;
  
          &lt;GridView.RenderTransform&gt;
              &lt;CompositeTransform ScaleY="-1"/&gt;
          &lt;/GridView.RenderTransform&gt;
          &lt;GridView.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;Image Source="{Binding Image}" Width="163" Height="247" HorizontalAlignment="Left" VerticalAlignment="Top"/&gt;
              &lt;/DataTemplate&gt;
          &lt;/GridView.ItemTemplate&gt;
  
      &lt;/GridView&gt;
  </code></pre>
  
  <p></p>
  
  <p>and heres the C# code</p>
  
  <pre><code>protected override void OnNavigatedTo(NavigationEventArgs e)
      {
  
  
          source.Add(new Item("Assets/Achord.png"));
          source.Add(new Item("Assets/Bchord.png"));
          source.Add(new Item("Assets/Cchord.png"));
          source.Add(new Item("Assets/Dchord.png"));
          source.Add(new Item("Assets/Echord.png"));
          source.Add(new Item("Assets/Fchord.png"));
          source.Add(new Item("Assets/Gchord.png"));
  
          availableItems.ItemsSource = source;
          chosenItems.ItemsSource = destination;
  
      }
  
      private void dragItem(object sender, DragItemsStartingEventArgs e)
      {
          draggedItem =(Item) e.Items[0];
      }
  
      private void dropItemDestination(object sender, DragEventArgs e)
      {
          source.Remove(draggedItem);
          destination.Insert(0, draggedItem);
      }
      private void dropItemSource(object sender, DragEventArgs e)
      {
          destination.Remove(draggedItem);
          source.Add(draggedItem);
      }
  }
  public class Item
  {
      public  Item(string image)
      {
          this.Image = image;
      }
      public string Image
      {
          get;
          set;
      }
  }
  </code></pre>
  
  <p>It's a bit of a peculiar problem, I've tried putting break points in to see if at any point the code is doing something to the image, but I cant see anything.</p>