WP8.1 WinRT ImageControl mit Zoom

[internetfreak]

Hallo Leute,

für meine App PhotoKeeper suche ich verzweifelt nach einer Lösung, die es mir ermöglicht, in meinen Bildern korrekt zu zoomen, ähnlich, wie man es bei der Foto-App tun kann.
Ich habe mittlerweile stundenlang Google befragt, aber leider irgendwo nichts brauchbares gefunden. Zu den ausprobierten Dingen gehörten:

• ScrollViewer -> Buggt rum; bei zu großem Zoom gibts Glitches (Bild springt leicht herum)
• ManipulationDelta -> Zoom funktioniert, aber eine Verschiebung des Bildes lässt sich unbegrenzt durchführen, so dass man das Bild aus dem View herausschieben kann und ich keinen geeigneten Weg derzeit weiß, das Ganze zu beheben

Egal, was ich probiert habe, ich stehe noch ohne Zoom da. Die Bilder sind derzeit in einem Image-Control untergebracht, welches selbst wiederum Part des ItemTemplate eines FlipViews ist, um durch die Bilder scrollen zu können.

Hat vielleicht jemand von euch schon Erfahrungen gemacht und kann diese mit mir teilen? Ohne brauchbaren Zoom ist es eigentlich sinnlos, die Bilder anzusehen, da diese ja immerhin auf die Bildschirmgröße skaliert werden und man so nicht mehr jedes Detail sehen kann

Ich hoffe auf positive Antworten

LG

[StevieBallz]

Bei ManipulationDelta arbeitest du ja direkt mit dem entsprechenden Event, oder? Da könntest du im Eventhandler dementsprechend die aktuelle Position des Bildes abfragen und halt die Verschiebung stoppen/rückgängig machen so sie aus dem sichtbaren Bereich hinaus geht.

[internetfreak]

Ja, bei Delta arbeite ich entsprechend mit dem Event, aber sobald ich eben die Verschiebung auf dem Image aktiviere, geht das FlipView nicht mehr (zumindest auf den Bereichen, die vom Image bedeckt sind, was durchaus für den kompletten Screen der Fall sein kann, da ich die Bilder so groß wie möglich anzeige)
Es muss doch irgendwie gut möglich sein, das ganze zu erledigen, so dass es ähnlich zur Foto-App von MS ist, andere Apps haben es ja auch geschafft und ich möchte auch nicht unbedingt irgendein Toolkit kaufen müssen, nur damit ich ein Control habe, welches alles kann. Ich würde nur gern halt auch wissen, was ich falsch mache, denn der Ansatz mit dem ScrollViewer war bisher der beste, da gibts nur paar Problemchen:

- Sobald gezoomt ist, kann ich nicht mehr komplett an den Rand des Bildes scrollen, der ScrollViewer verweigert das durch die Bounce-Animation und scrollt wieder etwas zurück. Scrolle ich zu schnell, triggere ich das FlipView -> das Bild wechselt.
- Wenn ich zoome, muss ich irgendwie effektiv den FlipView deaktvieren, so dass er nicht mehr wechseln kann (tut die Foto-App ja auch), denn wechsle ich, während gezoomt ist, so ist das nachfolgende Bild auch gezoomt, lässt sich aber nicht mehr zurücksetzen. Ich kann zwar den Zoomfaktor beim Wechsel wieder zurücksetzen, allerdings tritt das SelectionChanged-Event nur auf, wenn ich gewechselt habe, d.h. sobald die Animation vorbei ist, wodurch das Bild erst in gezoomter Ansicht gezeigt wird und dann ca 1 Sekunde später auf 1x Zoom wechselt.

Ich nehme gerne noch weitere Vorschläge an, ich habe so an sich keinen Releasedruck, auch wenn ich gerne die App diesen Monat dann veröffentlichen wollte

[internetfreak]

Hat vielleicht jemand eine Idee zur Lösung des Problems? ich habe mittlerweile auch einen kleinen Ansatz, den ich demnächst mal ausprobieren werde, sobald ich dazu komme (derzeit an anderen Stellen in der App am arbeiten), aber ich würde gerne dennoch noch weitere Vorschläge sammeln, wenn möglich.

[internetfreak]

Noch jemand ne Idee, wie ich das Ganze regeln kann, so dass es ähnlich zur Fotoapp aussieht? Hab schon versucht, die Items des Flipview zu manipulieren, damit man den bspw. deaktivieren kann, solange Zoom > 1 (so macht es auch die Fotoapp, da kann man nicht wechseln, solange gescrollt wird), aber irgendwie gab es ne Exception dann, was auch doof war, vlt hatte ich auch nur was falsch gemacht.

[internetfreak]

Hat jemand vielleicht eine Idee oder gar etwas Code für mich, auf dem ich aufbauen kann? Es gibt irgendwie im Internet nichts anständiges, was ich benutzen kann, so dass ich wohl nicht drum herum komme, etwas zu porten, wenn ich denn was passendes als portierbares Control finde

[internetfreak]

Hat wirklich niemand eine Lösung bzw. einen Anhaltspunkt für mich? Ich habe jetzt so viel schon im Netz gesucht, aber leider nichts passendes gefunden, die meisten Dinge beschränkten sich auf ein einzelnes Bild. Ich wüsste ja so nun, wie ich zoomen kann dank der Manipulation-Events, aber wie handle ich beispielsweise das Image-Flipping korrekt? Ich möchte an sich ein ähnliches Verhalten, wie in der Fotoapp und mit dem FlipView habe ich zumindest schon einmal die Bildershow, nur eben ohne Zoom, der fehlt mir derzeit noch, nur habe ich da keinen Plan, wie es weitergehen soll

EDIT: Es gibt ja von MS ein MediaViewer Control bzw Sample, dieses wäre genau das, was ich suche (bisschen funktionsreduziert halt, brauche zb keinen Footer und Header) nur bekomme ich das nicht auf WinRT portiert, weil sich da ja doch einiges geändert hat und ich nicht alles ersetzt bekomme bzw weiß, was das Replacement ist. Kann mir da vielleicht jemand behilflich sein, der sich etwas besser mit WinRT und XAML auskennt?

[internetfreak]

Nach weiterer Befragung von Google bin ich nun soweit, dass ich zumindest das FlipView selbst steuern kann, d.h. dass ich quasi über die Manipulation-Events die Items vor/zurückwechseln kann und dabei aber auch theoretisch zoomen könnte, ohne das FlipView selbst auszulösen.
Jetzt ist mein Problem aber nach wie vor der Zoom. Durch ein wenig theoretisch Überlegung habe ich bereits etwas nutzbaren Code, mit dem ich zoomen kann und der angepeilte Punkt (der Punkt, an dem angefangen wurde, zu zoomen) soweit immer in der Mitte bleibt. Das Ganze klappt recht gut, solange das Bild anfangs einen Zoomlevel von 1 hat, d.h. bisher ohne Zoom blieb (Zoom wird realisiert durch ein CompositeTransform, der RendertransformOrigin liegt bei 0/0). Sobald das Bild schon einmal gezoomt wurde, klappt mein Code nicht mehr komplett, da das Bild einmal springt und dann die Verschiebung nicht mehr passt. Ich habe versucht, das Ganze irgendwie zu lösen, aber komme nicht darauf, was ich genau tun müsste, um korrekt weiterzukommen.
Hier mal der entsprechende Code, den ich verwende, um den Zoom zu regeln:

 private void Image_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            manipulationOrigin = e.Position;
        }

        private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            var transform = (sender as Image).RenderTransform as CompositeTransform;
            var scaledOrigin = new Point();
            var vector = new Point();

            double scale = e.Delta.Scale;

            transform.ScaleX *= scale;
            transform.ScaleY *= scale;

            scaledOrigin = new Point(manipulationOrigin.X * e.Cumulative.Scale, manipulationOrigin.Y * e.Cumulative.Scale);

            vector = new Point(scaledOrigin.X - manipulationOrigin.X, scaledOrigin.Y - manipulationOrigin.Y);

            transform.TranslateX = -vector.X;
            transform.TranslateY = -vector.Y;
        }

manipulationOrigin ist dabei auf Klassenebene spezifiziert, während transform wie gesagt das CompositeTransform ist, welches mein Image-Control verwendet.

Ich hoffe, mein Problem ist verständlich bzw es kann mit Hilfe des Codes nachgestellt werden.

[StevieBallz]

Eigentlich müsstest du alle Schritte hintereinander ausführen. Verschieben => Zoomen => wieder verschieben => wieder zoomen => usw.

Was du probierst ist wenn ich das richtig sehe das ganze auf eine einzige Verschiebung zurückzuführen. Mein Tipp wäre jetzt sich einfach mal so ein Beispiel mit konkreten Zahlen aufzuzeichnen und dann zu schauen ob deine Formel zum richtigen Ergebnis kommen kann. Die Frage ist auch in welchen Koordinaten das Manipulation Delta seine Werte zurückgibt (bzgl. Screen oder bzgl. dem Control - in dem Fall dem Image-Control und ob du da evtl. auch was davon skalieren musst).

[internetfreak]

Die Verschiebung kommt ja nur vom Zoom her, das ist keine normale Verschiebung derzeit. Ich frage mich halt, wieso es funktioniert, wenn ich das Bild aus dem Urzustand heraus skaliere. Komischerweise klappt das zoomen durchaus auch dann, sobald das Bild gezoomt wurde und eben diesen Sprung gemacht hat, also ist nur ein ganz kleiner Teil falsch am Anfang des Ganzen und genau das verstehe ich nicht.
Konntest du vielleicht mit meinem Code das Verhalten nachstellen und sehen, was da schiefgeht?

[StevieBallz]

Ich hab im Büro leider kein WP SDK - insofern kann ich das gerade nicht testen. Ich gehe davon aus dass du den Sprung hast wenn du den neuen Ursprung errechnest beim folgenden Zoom-Versuch. Weil aus dem errechnest du ja die Verschiebung in der Transform und das wird wohl der Grund sein wieso er da so Ruckartig einen Sprung an eine andere Stelle macht.

[internetfreak]

Mit dem Debugger habe ich ja bereits herausgefunden, dass anfangs alles noch halbwegs passt, aber auf einmal die Translation eben einen Wert >=0 annimmt oder so, daher ja dann auch die plötzliche Verschiebung bzw. der ruckartige Sprung. An sich ist das Netz ja voll mit Codebeispielen, leider sind die meisten aber für Windows Phone 8, also Silverlight ausgelegt und diese kann ich nicht komplett übernehmen, da mir irgendwo immer eine Property o.Ä fehlt, welche aber im Originalcode benötigt wird und ich nicht weiß, wie ich das auf WinRT kompensieren kann. So gut WinRT auch ist, so doof ist es irgendwo auch, dass es teilweise Dinge gibt, die fehlen oder nicht mehr so gut machbar sind, ohne gleich ein Framework kaufen zu müssen.

[internetfreak]

Durch etwas herumprobieren habe ich nun einen Teil der Lösung gefunden. Wie ich vermutete liegt es mitunter noch am Scale, den das Image hat. Nehme ich den Scale dazu, so klappt es mit dem Zoom fast ohne Sprünge, denn der Zoom funktioniert derzeit nur, wenn ich die Manipulation an demselben Punkt durchführe, wie die vorige Manipulation. Sobald ich meine Finger etwas bewege, springt das Bild dennoch, da dann die Translation zuerst einen etwas größeren Sprung durchführt. Hier müsste noch nachgeholfen werden, aber ich komme derzeit nich auf die Lösung. So sieht die neue Berechung des Origin aus:

private void Image_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
        {
            lastScale = ((sender as Image).RenderTransform as CompositeTransform).ScaleX;
            manipulationOrigin = new Point(e.Position.X * lastScale, e.Position.Y * lastScale);
        }

Der Rest des Codes ist unberührt, d.h. ich skaliere dann den manipulationOrigin weiterhin noch mit dem kumulativen Scale der DeltaEventArgs. Weiß jemand vielleicht weiter bzw kann mich in die richtige Richtung führen?