Windows Phone development and learning-implement a gallery control by yourself

Those who have developed Android mobile apps must be familiar with the gallery Control, which enables dynamic switching between several screens, that is, the sliding effect of those pages on the mobile phone homepage of andriod. Of course, Windows Phone also has corresponding stuff, such as the panorama control and controls, but none of these two controls are the corresponding version of the gallery control, for example, Panorama will always display the 20 pixels on the right side, telling people that there is still content on the right side, and the page will become a background color when the ghost control slides, but nothing can be seen, if there is no background, it will be black. The two may be useful in other scenarios, but they do not implement Gallery.
The continuous and progressive effect of control. Since it is not feasible, you can only implement gallery Control for Windows Phone.

I asked a question on stackoverflow, but I had no choice but to answer the question. I used Google to search for a needle in a haystack. Fortunately, I did not have to worry about it. I finally found a solution from a foreign Daniel. The following describes how to implement gallery control on your own.

First, the results are provided. There are only three pages, but they cannot be dynamic. Here we have to look at static:

From the above three pages, we can see that the page can be divided into two parts, the above is a panoramatitle control, the bottom is similar to the item control, but these controls need to be implemented by themselves, the entire project structure is as follows:

The layout of the panoramictile control is as follows:

 
<Usercontrol X: class = "phoneapp1.panoramictitle" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: D = "http://schemas.microsoft.com/expression/blend/2008" xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D" fontfamily = "{staticresource phonefontfamilynormal}" fontsize = "{staticresource quota}" foreground = "{staticresource phoneforegroundbrush}" D: designheight = "140" d: designwidth = "1200"> <grid X: name = "layoutroot" background = "# ff1f1f1f"> <textblock style = "{staticresource phonetextpagetitle2style}" text = "panoramic title"/> </GRID> </usercontrol>
 

The layout of the windowsphonecontrol1 control is as follows:

<Usercontrol X: class = "phoneapp1.windowsphonecontrol1" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns: D = "http://schemas.microsoft.com/expression/blend/2008" xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" MC: ignorable = "D" fontfamily = "{staticresource phonefontfamilynormal}" fontsize = "{staticresource Phonefontsizenormal} "foreground =" {staticresource phoneforegroundbrush} "D: designheight =" 480 "D: designwidth =" 480 "> <grid X: name = "layoutroot" background = "{staticresource phonebackgroundbrush}"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <! -- Titlegrid is the name of the application and page title --> <grid X: Name = "titlegrid" grid. row = "0"> <textblock text = "my application" X: name = "textblockpagetitle" style = "{staticresource phonetextpagetitle1style}"/> <textblock text = "first page" X: name = "textblocklisttitle" style = "{staticresource phonetextpagetitle2style}"/> </GRID> <! -- Contentgrid contains ListBox. place additional content here --> <grid X: Name = "contentgrid" grid. row = "1"> <textblock Height = "135" horizontalalignment = "Left" margin = "6, 6," name = "textblock1" text = "This is the first page! "Verticalalignment =" TOP "width =" 468 "/> </GRID> </usercontrol>

The other two controls modify the textblock content.

The most important mainpage is as follows:

<Phone: phoneapplicationpage X: class = "phoneapp1.mainpage" 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: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable =" D "D: designwidth =" 800 "D: designheight = "800" fontfamily = "{staticresource quota}" fontsize = "{staticresource quota}" foreground = "{staticresource phoneforegroundbrush}" loaded = "phoneapplicationpage_loaded" xmlns: my = "CLR-namespace: phoneapp1"> <usercontrol. resources> <storyboard X: Name = "pagechangeanimation"> <doubleanimation to = "-480.0" speedratio = "4" storyboard. targetname = "panoramacontenttranslate" storyboard. targetproperty = "X"/> <doubleanimation X: Name = "slidetitledoubleanimation" speedratio = "4" storyboard. targetname = "titletranslate" storyboard. targetproperty = "X"/> </storyboard> </usercontrol. resources> <grid X: Name = "layoutroot" background = "{staticresource phonebackgroundbrush}"> <grid. rowdefinitions> <rowdefinition Height = "140"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <stackpanel grid. row = "0" grid. column = "0" X: Name = "titlepanel"> <stackpanel. rendertransform> <translatetransform X: Name = "titletranslate"/> </stackpanel. rendertransform> </stackpanel> <grid X: Name = "panoramicgrid" grid. row = "1" grid. column = "0" manipulationdelta = "phoneapplicationpage_manipulationdelta" manipulationcompleted = "phoneapplicationpage_manipulationcompleted"> <grid. rendertransform> <translatetransform X: Name = "panoramacontenttranslate" x = "-480" Y = "0"/> </grid. rendertransform> <grid. rowdefinitions> <rowdefinition/> </grid. rowdefinitions> <grid. columndefinitions> <columndefinition width = "480"/> <columndefinition width = "480"/> <columndefinition width = "480"/> </grid. columndefinitions> </GRID> </Phone: phoneapplicationpage>

We can see that the animation effect is defined, and the sliding is based on the offset on the X axis. The home page is a grid with two rows and three columns, and the above line is where the panoramictitle control is placed, the following three columns correspond to three windowsphonecontrol controls respectively.

Mainpage. XAML. CSCodeAs follows:

Using system; using system. collections. generic; using system. LINQ; using system. net; using system. windows; using system. windows. controls; using system. windows. documents; using system. windows. input; using system. windows. media; using system. windows. media. animation; using system. windows. shapes; using Microsoft. phone. controls; namespace phoneapp1 {public partial class mainpage: phoneapplicationpage {// <summary> // size of the pages /// </Summary> Public const int pagewidth = 480; public mainpage () {// create three page lists this. pagelist = new list <usercontrol> () {New windowsphonecontrol1 () {isenabled = false}, new windowsphonecontrol2 () {isenabled = false}, new windowsphonecontrol3 () {isenabled = false }}; this. currentpageindex = 0; initializecomponent (); supportedorientations = supportedpageorientation. portrait;} // <summary> // ordered list of the panorama pages /// </Summary> protected list <usercontrol> pagelist {Get; set ;} /// <summary> // index of the page currently displayed // </Summary> protected int currentpageindex {Get; set;} private void phoneapplicationpage_loaded (Object sender, routedeventargs e) {var frame = (phoneapplicationframe) application. current. rootvisual; frame. width = pagewidth * 3; // load the panoramictitle control var Title = new panoramictitle (); this. titlepanel. children. add (title); this. loadpages ();} private void loadpages () {This. panoramicgrid. children. clear (); // slide the first page and then move to the left if (currentpageindex =-1) {currentpageindex = 2 ;} // slide the third page and then slide to the right if (currentpageindex = 3) {currentpageindex = 0;} var currentpage = This. pagelist [this. currentpageindex]; currentpage. isenabled = true; this. panoramicgrid. children. add (currentpage); grid. setcolumn (currentpage, 1); grid. setrow (currentpage, 1); If (this. pagelist. count> This. currentpageindex + 1) {var nextpage = This. pagelist [this. currentpageindex + 1]; nextpage. isenabled = false; this. panoramicgrid. children. add (nextpage); grid. setcolumn (nextpage, 2); grid. setrow (nextpage, 1);} If (this. currentpageindex> 0) {var previouspage = This. pagelist [this. currentpageindex-1]; previouspage. isenabled = false; this. panoramicgrid. children. add (previouspage); grid. setcolumn (previouspage, 0); grid. setrow (previouspage, 1) ;}} private void phoneapplicationpage_manipulationcompleted (Object sender, manipulationcompletedeventargs e) {If (E. originalsource is panel) {If (E. totalmanipulation. translation. x <0) {If (E. totalmanipulation. translation. x>-100/* | this. currentpageindex> = This. pagelist. count-1 */) {This. slidetitledoubleanimation. to = This. currentpageindex * pagewidth/2 *-1; this. pagechangeanimation. begin ();} else {This. changepage (1) ;}} else if (E. totalmanipulation. translation. x> 0) {If (E. totalmanipulation. translation. X & lt; 100) {This. slidetitledoubleanimation. to = This. currentpageindex * pagewidth/2 *-1; this. pagechangeanimation. begin ();} else {This. changepage (-1) ;}}} private void changepage (INT step) {This. currentpageindex + = step; this. loadpages (); this. panoramacontenttranslate. X + = pagewidth * step; this. slidetitledoubleanimation. to = This. currentpageindex * pagewidth/2 *-1; this. pagechangeanimation. begin ();} private void phoneapplicationpage_manipulationdelta (Object sender, manipulationdeltaeventargs e) {If (E. originalsource is panel) {This. panoramacontenttranslate. X = E. cumulativemanipulation. translation. x-pagewidth; this. titletranslate. X = E. cumulativemanipulation. translation. x/2-(this. currentpageindex * pagewidth/2 );}}}}

First, load the three controls to the page list and select the current page by judging the index of the current page. What is the previous page on the next page, and put them in the three columns of the grid. As for the animation effect, we can see from the last two functions that the offset of the X axis is indeed used to adjust the animation effect. You can also further adjust the effect yourself.

The above is the implementation process of Android gallery control on Windows Phone. I don't know if Microsoft will improve the gallery control in the future, so that it can be used directly without the trouble.