Getting Started with UWP development (15)--manipulating pictures with gestures in Flipview

The ultimate goal of this article is to simulate the system in the photo APP can swipe left and right, zoom the picture operation. In the implementation process, we will gradually analyze Some of the UWP's ideas and techniques for writing the UI.

First, we first realize a landscape can browse the image of the function, but also the implementation of most apps. The simplest way is to use FlipView, and then set the FlipView ItemTemplate to Image. The approximate code is as follows:

    <FlipViewItemsSource="{Binding Photos,mode=onetime}">        <flipview.itemtemplate>            <DataTemplate>                <ImageSource="{Binding Imageuri,mode=onetime}"></Image>            </DataTemplate>        </flipview.itemtemplate>    </FlipView>

The code is simple, and the effect is very good. Problem picture if the vertical and horizontal relatively large, such as the long micro-blog portrait of the long picture on the phone can not easily read. At this point we need to be able to zoom and drag the picture to see the part of the picture. Please note that this is a strong demand! In particular, open a spokesperson photo but embarrassed to find that cannot be scaled when the strong demand!

To analyze the problems we encounter, we need to support gestures to zoom and move the image. The UWP is typically handled by UIElement -type manipulation related events. Next, let's create a control that supports gestures.

The idea at first is to inherit the image to implement a scalableimage that supports scaling, but unfortunately the image class is not allowed to inherit the sealed type. So let's just make it bigger and implement a Scalablegridthat allows internal elements to be manipulated through manipulation .

     Public classScalablegrid:grid {PrivateTransformGroup TransformGroup; PrivateScaleTransform ScaleTransform; PrivateTranslateTransform TranslateTransform;  PublicScalablegrid () { This. ScaleTransform =NewScaleTransform ();  This. TranslateTransform =NewTranslateTransform ();  This. TransformGroup =NewTransformGroup ();  This. TRANSFORMGROUP.CHILDREN.ADD (ScaleTransform);  This. TRANSFORMGROUP.CHILDREN.ADD (TranslateTransform);  This. RenderTransform =TransformGroup;  This. Manipulationmode = Manipulationmodes.system |Manipulationmodes.scale;  This. Manipulationdelta + =Scalablegrid_manipulationdelta;  This. Loaded + =scalablegrid_loaded;  This. SizeChanged + = (A, b) = =            {                 This. Scaletransform.centerx = This. ActualWidth/2;  This. Scaletransform.centery = This. ActualHeight/2;            };  This. doubletapped + =scalablegrid_doubletapped; }        Private voidScalablegrid_doubletapped (Objectsender, Doubletappedroutedeventargs e) {Scaletransform.scalex= Scaletransform.scaley =1;  This. translatetransform.x =0;  This. Translatetransform.y =0;  This. Manipulationmode = Manipulationmodes.system |Manipulationmodes.scale; }        Private voidScalablegrid_loaded (Objectsender, Windows.UI.Xaml.RoutedEventArgs e) {             This. Loaded-=scalablegrid_loaded; Scaletransform.centerx= This. ActualWidth/2; Scaletransform.centery= This. ActualHeight/2; }        Private voidScalablegrid_manipulationdelta (Objectsender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e) {            if(Scaletransform.scalex = =1&& Scaletransform.scaley = =1)            {                 This. Manipulationmode = Manipulationmodes.system |Manipulationmodes.scale; }            Else            {                 This. Manipulationmode = Manipulationmodes.translatex | Manipulationmodes.translatey | Manipulationmodes.scale |Manipulationmodes.translateinertia; } Scaletransform.scalex*=E.delta.scale; Scaletransform.scaley*=E.delta.scale; if(Scaletransform.scaley <1) {Scaletransform.scalex= Scaletransform.scaley =1; } translatetransform.x+=e.delta.translation.x; Translatetransform.y+=E.DELTA.TRANSLATION.Y;        Stopwhentranslatetoedge (); }

the TranslateTransform and scaletransform respectively correspond to panning and scaling operations.

this. Manipulationmode = Manipulationmodes.system | Manipulationmodes.scale;

The operations supported in the constructor include System and scale , without TranslateX and Translatey because you do not want to have a panning operation when you initially open it. Only after zooming, the support for panning is released based on magnification.

this. SizeChanged + = (A, b) + =            {                this this2;                  This  This 2 ;            };

The SizeChanged event is to reposition the center point of the Zoom when the window size changes, such as the Desktop Zoom window or the phone's screen shift.

        Private void scalablegrid_doubletapped (object  sender, Doubletappedroutedeventargs e)        {            1 ;              This 0 ;              This 0 ;             this. Manipulationmode = Manipulationmodes.system | manipulationmodes.scale;        }

The doubletapped event is for a double-click Restore to the initial state.

The support code for gestures is in private void Scalablegrid_manipulationdelta (object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e) method. It is determined that the scale is greater than 1, that is, the panning operation is supported. While removing the system enumeration, this is because you do not want the panning of the picture to be judged as a sliding flipview control, which causes the image to toggle.

The Stopwhentranslatetoedge () method is to avoid moving the picture out of the edge of the screen so that the operation cannot continue.

Place the completed Scalablegrid in the ItemTemplate of the Flipview:

    <flipview itemssource="{Binding photos,mode=onetime}">        < flipview.itemtemplate>            <DataTemplate>                <local:ScalableGrid>                    <image source="  {Binding imageuri,mode=onetime}'></Image>                </local:ScalableGrid>            </DataTemplate>        </FlipView.ItemTemplate>    </FlipView>

At this point, a sliding view of the image is completed. We can toggle the picture on the left and right, zooming and moving a picture of filpview, and reading a long microblog is no problem.

Is that perfect? Perverted users will find that after zooming in on a picture, if the current picture does not fill the entire filpviewitem, you can switch to another picture by swiping the screen in a blank space. Although it is not a big problem, but the user master will be uncomfortable, how to solve it? It's just a matter of waiting for the next article.

GitHub:

Https://github.com/manupstairs/UWPSamples/tree/master/UWPSamples/PhotosBrowser

Getting Started with UWP development (15)--manipulating pictures with gestures in Flipview