WPF. Einfachste Möglichkeit zum verschieben von Bild (X,Y) programmgesteuert?

Kennt jemand eine einfache Möglichkeit zu animieren, eine Bewegung aus einem Bild der aktuellen Position zu einer neuen Position (X,Y) mit WPF-animation ohne XAML, 100% programmgesteuert? Und ohne Bezug zu "diesem" (mit RegisterName etc).

Ich versuche, eine Erweiterung der Klasse für Bild zu tun, animation Sachen drauf. Es ist leicht genug, um zu ändern der Eigenschaften width und height durch die animation, sondern nach der Suche nach der location-animation von einem Objekt, das es plötzlich mehr erweitert wird.

Als es ist eine Erweiterung der Klasse I wird nur ein Verweis auf das eigentliche Bild-Objekt und die X-und Y-ich möchte um es zu verschieben.

public static void MoveTo(this Image targetControl, double X, double Y, double Width, double Height){
 //code here
 ...
}

Update:

Dank. Fast arbeiten. Es scheint, Die GetTop und GetLeft gibt 'NaN' nicht explizit festgelegt. Finden Sie die Problemumgehung in diesem post: Canvas.GetTop() gibt NaN

public static void MoveTo(this Image target, double newX, double newY) {
                Vector offset = VisualTreeHelper.GetOffset(target);
                var top = offset.Y;
                var left = offset.X;
                TranslateTransform trans = new TranslateTransform();
                target.RenderTransform = trans;
                DoubleAnimation anim1 = new DoubleAnimation(0, newY - top, TimeSpan.FromSeconds(10));
                DoubleAnimation anim2 = new DoubleAnimation(0, newX - left, TimeSpan.FromSeconds(10));
                trans.BeginAnimation(TranslateTransform.YProperty, anim1);
                trans.BeginAnimation(TranslateTransform.XProperty, anim2);
        }

Musste ich tauschen Sie zwei der Werte (AB) mit 0. Ich gehe davon aus, dass sein muss, weil in diesem Zusammenhang der oberen linken Ecke des Bildes ist der Ursprung? Aber jetzt funktioniert es.

Vielen Dank für das update. Es war schön zu sehen, ein Beispiel, wie ein Vektor.
Ihre aktualisierte code funktioniert wirklich schön ! Vielen Dank für Ihre excellence !

InformationsquelleAutor Wolf5 | 2010-11-18

animation wpf

21

Versuchen Sie dies:
```
public static void MoveTo(this Image target, double newX, double newY)
{
    var top = Canvas.GetTop(target);
    var left = Canvas.GetLeft(target);
    TranslateTransform trans = new TranslateTransform();
    target.RenderTransform = trans;
    DoubleAnimation anim1 = new DoubleAnimation(top, newY - top, TimeSpan.FromSeconds(10));
    DoubleAnimation anim2 = new DoubleAnimation(left, newX - left, TimeSpan.FromSeconds(10));
    trans.BeginAnimation(TranslateTransform.XProperty,anim1);
    trans.BeginAnimation(TranslateTransform.YProperty,anim2);
}
```
Dies funktioniert nur, wenn das Bild in ein Canvas (die Eigenschaften Top und Left 0 zurück, andernfalls). Wenn Sie eine Leinwand können Sie einfach legen Sie die Leinwand.Top und Canvas.Linken Eigenschaften, um es zu bewegen. Für eine andere Art von container können Sie entweder die Ränder (eurgh) oder als Dekan erwähnt hat, verwenden Sie einen übersetzen verwandeln.
Fast arbeiten. Die left-und top-Eigenschaften werden mussten, bekommen von der VisualTreeHelper.GetOffset(Ziel) statt als GetTop und GetLeft zurückgegeben 'NaN'. Nur ein bug Links. Der start der animation scheint zu beginnen mit der doppelten der aktuellen Lage.
"0" als Wert fest.
bin immer Fehler in der Nähe der moveto-Methode..
Brauch ich fertige code-snippet

InformationsquelleAutor Dean Chalk

Hier ist es... Es ändert sich die Größe und bewegt MediaElement unter der Canvas. Nur Eingabe-Parameter:

Storyboard story = new Storyboard();
DoubleAnimation dbWidth = new DoubleAnimation();
dbWidth.From = mediaElement1.Width;
dbWidth.To = 600;
dbWidth.Duration = new Duration(TimeSpan.FromSeconds(.25));

DoubleAnimation dbHeight = new DoubleAnimation();
dbHeight.From = mediaElement1.Height;
dbHeight.To = 400;
dbHeight.Duration = dbWidth.Duration;

story.Children.Add(dbWidth);
Storyboard.SetTargetName(dbWidth, mediaElement1.Name);
Storyboard.SetTargetProperty(dbWidth, new PropertyPath(MediaElement.WidthProperty));

story.Children.Add(dbHeight);
Storyboard.SetTargetName(dbHeight, mediaElement1.Name);
Storyboard.SetTargetProperty(dbHeight, new PropertyPath(MediaElement.HeightProperty));

DoubleAnimation dbCanvasX = new DoubleAnimation();
dbCanvasX.From = 0;
dbCanvasX.To = 5;
dbCanvasX.Duration = new Duration(TimeSpan.FromSeconds(.25));

DoubleAnimation dbCanvasY = new DoubleAnimation();
dbCanvasY.From = 0;
dbCanvasY.To = 5;
dbCanvasY.Duration = dbCanvasX.Duration;

story.Children.Add(dbCanvasX);
Storyboard.SetTargetName(dbCanvasX, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasX, new PropertyPath(Canvas.LeftProperty));

story.Children.Add(dbCanvasY);
Storyboard.SetTargetName(dbCanvasY, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasY, new PropertyPath(Canvas.TopProperty));

story.Begin(this);

<Viewbox Stretch="Uniform" StretchDirection="Both" SnapsToDevicePixels="True">
        <Grid  Width="640" Height="480" Name="MainLayout" SnapsToDevicePixels="True" Background="Black">
            <Canvas Width="640" Height="480" Name="MainCanvas" SnapsToDevicePixels="True">
                <MediaElement Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337" LoadedBehavior="Manual" Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" />
                <Button Canvas.Left="294" Canvas.Top="196" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
            </Canvas>
        </Grid>
    </Viewbox>

UPDATE:

Statt MediaElement verwenden Sie diese Zeile:

 <Rectangle Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337"    Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" Fill="{DynamicResource {x:Static SystemColors.MenuBarBrushKey}}" />

Und vergessen Sie nicht, setzen Sie den C# - code:

private void button1_Click(object sender, RoutedEventArgs e) {}

Können Sie MediaElement als gut, aber Sie haben, um zu definieren, eine VideoClip etwas zu sehen 😉

Ya, ich diesen code in ein neues Fenster-element Hinzugefügt und der C# - code in das button_click-Ereignis. Der code läuft völlig in Ordnung, aber nicht eine animation durchzuführen. Hab ich was verpasst?
Ja, es funktioniert. Check meine Antwort. Vergessen Sie nicht abstimmen...
Ich habe jetzt ein wenig besser in WPF Animationen in den letzten paar Tagen. Werde es wieder versuchen, wenn ich nach Hause komme.
Ersetzen MediaElement mit einem Rechteck gemacht das rect bewegen, aber es wollte nicht wirken wie ein sprite über den Bildschirm bewegen, sondern es machte eine Vergrößerung (und größeren) Rechteck aufgestellt, in der äußersten rechten unteren Ecke. Nicht gerade die Animationen erwartet man von der Frage ab, ich denke, es ist die hart-kodierten Werten in der C# - code. Ich abgewählt, weil ich weiß, die Beantwortung von Fragen ist nicht einfach, und Sie kümmern sich genug, um zu aktualisieren Sie Ihre Antworten.
Ich mache UI-Steuerelement kleiner mit Ihrem code. Es funktioniert gut, aber wie machen es zurück zu Alter Größe? Ich habe getestet wie .Breite= 111 und .Höhe= 222 aber nicht funktioniert...

InformationsquelleAutor Academy of Programmer

Dieser code basiert auf dem @DeanChalk Antwort.

Bewegt es sich ein Image innerhalb einer Canvas (RFID_Token) Diagonal von oben rechts nach unten Links, mittig über ein weiteres Image innerhalb einer Canvas (RFID_Reader).

<Canvas>
    <Canvas x:Name="RFID_Reader_Canvas">
        <Image x:Name="RFID_Reader" Source="RFID-Reader.png" Height="456" Width="682" Canvas.Left="37" Canvas.Top="524"/>
    </Canvas>
    <Canvas x:Name="RFID_Token_Canvas">
        <Image x:Name="RFID_Token" Source="RFID-Token.png" Height="268" Width="343" Canvas.Left="874" Canvas.Top="70"/>
    </Canvas>
</Canvas>

var StartX = Canvas.GetLeft(RFID_Token);
var StartY = Canvas.GetTop(RFID_Token);

var EndX = RFID_Reader.Width / 2 + Canvas.GetLeft(RFID_Reader) - StartX - (RFID_Token.Width / 2);
var EndY = RFID_Reader.Height / 2 + Canvas.GetTop(RFID_Reader) - StartY - (RFID_Token.Height / 2);

var AnimationX = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(1));
var AnimationY = new DoubleAnimation(0, EndY, TimeSpan.FromSeconds(1));

var Transform = new TranslateTransform();
RFID_Token_Canvas.RenderTransform = Transform;

Transform.BeginAnimation(TranslateTransform.XProperty, AnimationX);
Transform.BeginAnimation(TranslateTransform.YProperty, AnimationY);

InformationsquelleAutor Danny Beckett

Ich hielt mit NaN oder 0-Werte für meine verschachtelten Elementen, hier ist eine modifizierte version des Danny ' s Antwort :

    public void MoveTo(Canvas canvas, FrameworkElement target, FrameworkElement destination)
    {
        Point oldPoint = target.TransformToAncestor(canvas).Transform(new Point(0, 0));
        Point newPoint = destination.TransformToAncestor(canvas).Transform(new Point(0, 0));

        var EndX = destination.Width / 2 + newPoint.X - oldPoint.X - (target.Width / 2);
        var EndY = destination.Height / 2 + newPoint.Y - oldPoint.Y - (target.Height / 2);

        TranslateTransform trans = new TranslateTransform();
        target.RenderTransform = trans;
        DoubleAnimation anim1 = new DoubleAnimation(0, EndX, TimeSpan.FromSeconds(0.3));
        DoubleAnimation anim2 = new DoubleAnimation(0, EndY, TimeSpan.FromSeconds(0.3));
        trans.BeginAnimation(TranslateTransform.XProperty, anim1);
        trans.BeginAnimation(TranslateTransform.YProperty, anim2);
    }

InformationsquelleAutor Akli

Bitte finden Sie eine Lösung, die verwendet die Left und Top Eigenschaften der Leinwand für die extension-Methode. Siehe den folgenden code:

    public static void MoveTo(this Image target, Point newP)
    {

        Point oldP = new Point();
        oldP.X = Canvas.GetLeft(target);
        oldP.Y = Canvas.GetTop(target);

        DoubleAnimation anim1 = new DoubleAnimation(oldP.X, newP.X, TimeSpan.FromSeconds(0.2));
        DoubleAnimation anim2 = new DoubleAnimation(oldP.Y, newP.Y , TimeSpan.FromSeconds(0.2));

        target.BeginAnimation(Canvas.LeftProperty , anim1);
        target.BeginAnimation(Canvas.TopProperty, anim2);

    }

InformationsquelleAutor laserman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.