3d sliding gallery made by WPF

Original: 3d sliding gallery made by WPF

3d sliding gallery made by WPF

With the popularity of Iphone\ipad and hot, now do mobile products no matter what platform, the leader always want to do imaging iOS system look. Since Microsoft released the WINDOW8 preview, the leader wants to move the company's mobile products to WINDOW8. The main interface of the company's mobile products is made of 3d gallery of three-dimensional album effect, such as:

Window8 is not with such a control, there is no control to achieve such effects I do not know, I think there is no, because I can not find on the VS, also does not conform to the WINDOW8 style, I looked all over the internet and did not find such effects of third-party control, so had to self-developed to implement. Although I think this effect put on window8 more funny, but leaders want so there is no way, the leader said how to do!

WINDOW8 's metro style development needs to be developed on the WINDOW8 platform, although the development framework is not WPF, but the same is the XAML plus C # (this effect is actually easier to implement with Silverlight, Because it has a class that simulates 3D animations directly from the 2d view, WINDOW8 is only installed on the virtual machine, so it is researched with WPF.

In the Internet only to find a simulation around the rolling effect of open source code, pictures and scrolling effects have (just 2D chart effect), take it to the operation to change the effect we want. Need to add four functional effects, one is to allow it to support the use of mouse sliding control, the second is to let the picture has a perspective stereoscopic effect, three is the current figure sliding to the left and right when the animation effect on the front and then the perspective of the conversion, and four for each image to increase the Click Trigger event.

One, mouse sliding control function

Because of the complex functions involved, the specific students have looked at the source of the study, here is the main entrance code to tell everyone. Just implement the control's OnMouseMove event to control the slide of the picture:

        Private voidLayoutroot_mousemove (Objectsender, MouseEventArgs e) {            if(E.leftbutton = =mousebuttonstate.pressed) {ispressed=true; Tempi+=1; if(Tempp. X >e.getposition (LayoutRoot). X) {if(Tempi >move_distance) {                       //slide the mouse to a certain distance after the picture automatically slide to the next oneMoveRight (); Tempi=0; } _touch_move_distance+=1; }                Else if(Tempp. X <e.getposition (LayoutRoot). X) {if(Tempi >move_distance) {                         //slide the mouse to a certain distance after the picture automatically slide to the next oneMoveLeft (); Tempi=0; } _touch_move_distance-=1; } tempp=e.getposition (LayoutRoot); }            Else if(E.leftbutton = =mousebuttonstate.released) {ispressed=false; Tempi=0; Tempp=NewPoint (0,0); }            Else{tempi=0; Tempp=NewPoint (0,0); }        }

Two, let the picture has the perspective stereoscopic effect, the animation effect transforms between the front and the face angle of view

The stereoscopic effect needs to have the control or the class support only then, the XAML provides one kind of realization method is uses the Viewport3D class, first customizes a picture view control which has the 2d diagram to 3D, uses the XAML implementation, the code involved is not listed here, only to say that the conversion animation effect implementation, Here are just a few

             This . Contentview;             var  as Transform3dgroup;             var rotate = (transform3dgroup.children[0 as as axisanglerotation3d;             );

Animationvisualelement is a custom implementation of animation effects, only implemented in stereo rotation, and other such as size scaling is also required

        Private voidAnimationvisualelement (axisanglerotation3d rotate,DoubleAngel) {Duration Duration=NewDuration (Timespan.fromseconds (.1)); //apply animations to Axisanglerotation3d's angle propertiesDoubleAnimation Animationangel =NewDoubleAnimation (); Animationangel.to=Angel; Animationangel.accelerationratio=0.3; Animationangel.decelerationratio=0.7; Animationangel.duration=duration; Rotate.        BeginAnimation (Axisanglerotation3d.angleproperty, Animationangel); }

Third, add click Trigger event for each picture

Click events to add a sub-image

         Public voidAddImage (ImageSource bitmapImage) {Viewport3dcontrol image=NewViewport3dcontrol (); Image. Setimagesource (refbitmapImage); Image. Index=_images.            Count; Image. Width=Childviewwidth; Image. Height=Childviewheight; Image. MouseDown+=NewMousebuttoneventhandler (Image_mousedown);            LAYOUTROOT.CHILDREN.ADD (image); Posimage (image, _images.            Count); _images.        ADD (image); }        voidImage_mousedown (Objectsender, MouseButtonEventArgs e) {Viewport3dcontrol View=(Viewport3dcontrol) sender; //to trigger an event to the main thread with a delegate output, it is important to note that this delegate method must be implemented when referencing this controlontouchdownevent (view, view.        Index); }         Public Delegate voidTouchdownhander (UIElement view,intindex);  Public EventTouchdownhander ontouchdownevent;

In particular, this control has an inertial sliding effect when sliding, and the key code to achieve this is this part

        void_timer_tick (Objectsender, EventArgs e) {            //Restore Location            if(ispressed = =false&& _touch_move_distance! =0)            {                //Spring Back_touch_move_distance + = (-_touch_move_distance) *spriness; }             for(inti =0; I < _images. Count; i++) {Viewport3dcontrol image=_images[i];            Posimage (image, I); }            if(Math.Abs (_target-_current) < Critical_point && IsPressed = =false)return;//Inertial sliding effect_current + = (_target-_current) *spriness; }

其实就是移动距离的变化算法实现的 This control is implemented in an effect that is identical to the effect of the gallery control on iOS or Android. Students learn the workpiece after this control, it should also be the simulation of natural physics animation effect of some understanding, first the control itself is self-timer, and then the need for relevant effects of simulation numerical algorithm. Give the students all the source code and demo, there is a gallery variant, the effect is more complex, here is not to say its realization principle, the students have studied. Gallery Variant:

The Demo interface

All code download, this project with Vs2010 Yi

Http://files.cnblogs.com/easywebfactory/3d_Gallery.rar

3d sliding gallery made by WPF