UWP: Zoom big Images
Teil1 (besser: über Manipulation Transform )
Zoom von Fotos und großen Bildern in Universal Windows Platform Anwendungen ist super einfach.
Ich habe lange nach einer Lösung gesucht und nichts richtiges gefunden aber dafür die beste Lösung gefunden.
Man stellt das Image auf Strech=Uniform und dann im Zoom muss man nur das Margin des Images negativ in allen 4 Richtungen verändern
Hier zunächst das Image Control in XAML.
Es befindet sich innerhalb eines Grid Elements, wobei das Image mit denEigenschaften:
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Stretch="Uniform"
Automatisch so eingestellt wird, dass es wie Fill die maximale Füllung einnimmt.
XAML: Image und umfassendes Grid Element
<Grid Grid.Row="0" Name="gridTest_Video" >
<ScrollViewer>
<Image x:Name="ctlImage" Grid.Column ="0"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Stretch="Uniform"
>
</Image>
</ScrollViewer>
</Grid>
|
Zoom in C#
Hier anhand eines Buttons, den man mehrfach drücken muss
Der globale Merker: dblZoom wird einfach negativ erweitert mit jedem Klick oder Event.
Dann wird die Margin des Image-Controls mit new Thickness einfach negativ erweitert in alle Richtungen Left,Top, Right, Bottom
double dblZoom = 0;
private void btnTEST_Click(object sender, RoutedEventArgs e)
{
dblZoom = dblZoom - 100;
ctlImage.Margin = new Thickness( dblZoom , dblZoom , dblZoom , dblZoom );
}
|
Tutorial Video (ohne Overlay Probleme)
Original
Zoom
Nachteil
Wie man sieht ist der Zoom Vorgang sehr einfach. Allerdings werden dadurch andere Felder verdeckt.
Man muss also mit
Clip nacharbeiten.