Windows Phone Authoring Guide page

Suitable for WP7 wp8+

SOURCE Download here

Make animated GIF small software download

Little Tricks

① picture is a solid color background: Sets the page to be the same color as the picture background

② picture is a gradient or other, cut when: cut the background separately (page set this as background) with the picture inside the element (transparent background)

1. Pivot Control (code in download package)

First look at the effect

No doubt, the picture over the animation effect is too poor, can not meet the requirements of the elder brother ...

2, Panroma also known as the Panorama Control (code in the download package)

Compared to the pivot control picture switch There is a seam connection, giving people feel not so empty. Unfortunately the start has an animated effect, because this brother abandoned it.

(Looking for a big day there is no way to get rid of the page start effect, that the Daniel know may wish to tell the younger brother)

3, Wptoolkit inside Flipview control

Address Download: Https://github.com/Kinnara/WPToolkit

Do you think it is necessary to refer to the entire DLL because of a small function? Of course you don't have time to toss it, you can quote it directly.

Brother may be idle egg ache, today spent a little time will inside Flipview control extract out

The first step: Copy the entire flipview, generate, look at the error, the other classes also copied over.

The second step: style copy, Wptoolkit all the styles are placed in Themes/generic.xaml this file, press Ctrl+f input Flipview to see if there are all those styles copied over

(Note: The style must be placed in the directory of your own project Themes/generic.xaml, the program can be automatically called)

If this is not the directory, please refer to this style manually

Step Three:

Create a new demo test

<phone:phoneapplicationpage x:class= "Test.flipviewtest" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:phone=" Clr-namespace: Microsoft.phone.controls;assembly=microsoft.phone "Xmlns:shell=" clr-namespace:microsoft.phone.shell;assembly= Microsoft.phone "Xmlns:local=" clr-namespace:microsoft.phone.controls;assembly=lyl. Control.flipview "xmlns:d=" http://schemas.microsoft.com/expression/blend/2008 "xmlns:mc="/HTTP/    schemas.openxmlformats.org/markup-compatibility/2006 "fontfamily=" {StaticResource phonefontfamilynormal} "    Fontsize= "{StaticResource phonefontsizenormal}" foreground= "{StaticResource Phoneforegroundbrush}" supportedorientations= "Portrait" orientation= "Portrait" mc:ignorable= "D" shell:systemtray.isvisible= "False" > & lt;!            --layoutroot is the root grid that contains all page content--<grid x:name= "LayoutRoot" background= "#E3DFDC" > <local:FlipView> <local:flipviewitem> <image source= "/images/01.jpg"/> </local:FlipViewItem> <local:FlipViewItem> <image source= "/images/02.jpg"/> </local:flipviewitem&gt            ;            <local:FlipViewItem> <image source= "/images/03.jpg"/> </local:FlipViewItem> <local:FlipViewItem> <image source= "/images/04.jpg"/> </local:flipview                    item> <local:FlipViewItem> <border margin= "0,0,0,0" height= "" width= "480" >                    <Border.Background> <imagebrush imagesource= "/images/05.jpg"/> </Border.Background> <image source= "/images/startbutton.png" width= "margin=" 0 , 590,0,0 "/> </Border> </local:FlipViewItem> </local:FlipView> &l T;/grid></phone:PhoneApplicationPage> 

It's no problem to be here, of course not. Further encapsulation is needed here for the next direct call

Directly on the code, brother will not wordy

Using system;using system.collections.generic;using system.linq;using system.text;using System.Threading.Tasks; Using system.windows;using system.windows.controls;using system.windows.markup;using System.Windows.Media.Imaging; Namespace microsoft.phone.controls{public class Flipviewhelper {//<summary>///Data source/        </summary> public list<flipviewmodel> Data {get; set;}        <summary>///////</summary> public string Startsource {get; set;}        Public Action Fliplastclick;            public void Show (Panel el) {var flip = new FlipView (); for (int i = 0; i < Data.count; i++) {var xml = "<border xmlns=\" http:// schemas.microsoft.com/winfx/2006/xaml/presentation\ "xmlns:x=\" http://schemas.microsoft.com/winfx/2006/xaml\ " Margin=\ "0,0,0,0\" height=\ "800\" width=\ "480\" > "+" <border.Background> "+" <imagebrush imagesource=\ "{0}\"/> "+" </border.back Ground> "//+" <image source=\ "{4}\" width=\ "{1}\" margin=\ "0,{2},0,0\" visibility=\ "{3}\"/&gt                ;"                + "</Border>"; XML = String. Format (XML, Data[i].                ImageSource);                var border = xamlreader.load (XML) as border; if (border! = NULL && i = = data.count-1) {BitmapImage bit = new BitmapImage ()                    ; Bit.                    UriSource = new Uri (Startsource, urikind.relative); var image = New Image {Source = bit, Width = Data[i]. Startwidth, Margin = new Thickness (0, Data[i].                    Startmargintop, 0, 0),}; Start the Experience button click event Image. Tag + = (S1, e1) = {if (FLiplastclick = null) {Fliplastclick ();                    }                    }; Border.                Child = image;                } var item = new Flipviewitem (); Item.                Content = border; Flip.            Items.Add (item); } el.        Children.add (flip);        }} public class Flipviewmodel {public string ImageSource {get; set;}        private int _startwidth = 200;            public int Startwidth {get {return _startwidth;}        set {_startwidth = value;}        } private Double _startmargintop = 590;            Public double Startmargintop {get {return _startmargintop;}        set {_startmargintop = value;} }    }}

Use: Reference Dll,http://files.cnblogs.com/walleyekneel/lyl.control.flipview.rar

            var flip = new Flipviewhelper ();            Flip. Data = new list<flipviewmodel>             {               new flipviewmodel{imagesource= "/images/01.jpg"},               new flipviewmodel{imagesource= "/images/02.jpg"},               new flipviewmodel{imagesource= "/images/03.jpg"},               new flipviewmodel{imagesource= "/images/04.jpg"},               new flipviewmodel{imagesource= "/images/05.jpg"},            };            Flip. Startsource = "/images/startbutton.png";            Flip. Fliplastclick + = () =            {                //todo: Jump to a page                //Save a value to isolated storage, do not new this instance the next time you start it            };            Flip. Show (LayoutRoot);

　　

All source code has been released at the beginning.

WP8.1 with Flipview usage similar, next time to add, first watch the World Cup to go