c# - tutorial - Arrastra y suelta una imagen en WPF

wpf presentacion

Question

Estoy tratando de arrastrar y soltar una imagen de un lugar en el lienzo a otro (debería ser relativamente simple), pero no puedo entenderlo. La imagen que quiero mover tiene el siguiente XAML:

<Image Height="28" HorizontalAlignment="Left" Margin="842,332,0,0" Name="cityImage" Stretch="Fill" VerticalAlignment="Top" Width="42" Source="/Settlers;component/Images/city.png" MouseLeftButtonDown="cityImage_MouseLeftButtonDown" MouseMove="cityImage_MouseMove" MouseLeftButtonUp="cityImage_MouseLeftButtonUp"/>

El código es el siguiente:

bool isDragging = false; Point initMousePos; private void cityImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
isDragging = true;
initMousePos = e.GetPosition(theGrid); } private void cityImage_MouseMove(object sender, MouseEventArgs e) {
if (isDragging)
{
    Image image = sender as Image;
    Canvas.SetTop(image, initMousePos.X);
    Canvas.SetLeft(image, initMousePos.Y);
    image.Visibility = System.Windows.Visibility.Visible;
} }

private void cityImage_MouseLeftButtonUp (remitente del objeto, MouseButtonEventArgs e) {isDragging = false; }

Answer 1

Desea establecer las propiedades Izquierda y Superior del lienzo en algo que no sea la posición inicial. En el manejador de MouseMove, debe obtener la posición relativa al padre. También; asegúrese de que el elemento principal sea un lienzo y no una cuadrícula. Tiene un margen izquierdo y un margen superior bastante grande en la imagen, así como un control con el nombre de variable "theGrid".

Answer 2

Lo que hago para lograr lo que quieres es usar

System.Windows.Controls.Primitives.Thumb 

como la raíz de un UserControl y establecer ControlTemplate para mostrar una imagen (dentro de un borde, pero debería funcionar también sin ella), algo como:

<Thumb Name="myRoot" DragDelta="MyRootDragDelta">
  <Thumb.Template>
    <ControlTemplate>
      <Image ... >
      ... see below ...
      </Image>
    </ControlTemplate>
  </Thumb.Template>
</Thumb>

Además, vinculo la fuente de la imagen a una propiedad de la clase:

<Image.Source>
  <Binding Path="ImageSource" RelativeSource=
                 {RelativeSource FindAncestor,
                  AncestorType=my:MyImageControl, AncestorLevel=1}" />
</Image.Source>

El UserControl tiene un nombre TranslateTransform (digamos translateTransform ) cuyas propiedades X e Y deben establecerse en el controlador de eventos DragDelta :

private void MyRootDragDelta(object sender, DragDeltaEventArgs e) 
{
  translateTransform.X += e.HorizontalChange;
  translateTransform.Y += e.VerticalChange;
}

No te olvides de agregar:

public ImageSource ImageSource { get; set; }

Espero que esto ayude. Si algo no está claro, no dude en preguntar más.