Windows Phone 8.1 in ScrollViewer (i)

Before opening:

Recommended blog for Mr. Wang Lei's Windows 8.1 about ScrollViewer

Link: Re-imagine Windows 8 Store Apps (9)-ScrollViewer Basics of controls

The function of ScrollViewer is that when the content is outside the set range, scroll bars are used to scroll through the content.

If you want to write something in ScrollViewer, OK, you can write a <TextBlock> tag directly, but when you write a second <TextBlock> it will be reported

Wrong, say multiple settings content value

So use labels like layout control Grid,stackpanel to write directly

In conclusion, you can:

<ScrollViewer> <Grid> .......</grid> </ScrollView>

You can also:

<ScrollViewer> <ScrollViewer.Content> <Grid>.........</Grid> </scrollviewer.content > </ScrollViewer>

The first one is added to the content by default. The content inside is the contents of ScrollViewer.

First, ScrollViewer important properties and methods

A.horizontalscrollmode and Verticalscrollmode Properties

Lets you set how the horizontal and vertical scrollbars behave, that is, whether you can scroll. Value has three options (Enalbled,disabled,auto)

B.horizontalscrollbarvisibility and Verticalscrollbarvisibility Properties

Used to set whether the horizontal and vertical scroll bars are visible. Value is True or False

C.viewchanged method

event that represents a scrolling trigger

With the Viewchanged method, we can monitor the front desk ScrollViewer at any time in the background.

How do you watch it? As follows: Other important attributes of ScrollViewer

A.computedhorizontalscrollbarvisibility and Computedverticalscrollbarvisibility

Judging the visibility of horizontal and vertical scroll bars

B.extentwidth and Extentheight

Determine the width and height of the content within the ScrollViewer, as the width and height set in the code below are 500

E.viewportwidth and Viewportheight

Determine the width and height of the viewable area

F.scrollablewidth and Scrollableheight

Judging the horizontal and vertical dimensions of the scrollable area, you will find that it is to take (extentwidth-viewportwidth) and

(extentheight-viewportheight) results. I can see from the results below that Scrollabelwidth has been 100.

G.horizontaloffset and Verticaloffset

Determines the horizontal and vertical offset of the scrolled content, which is the "0,f", and F refers to the value represented by the F above

Method:

We can also dynamically specify where the ScrollViewer scrolls

Windows 8.1 is using Scrolltohorizontaloffset () and Scrolltoverticaloffset () both methods, and of course can still be in Windows

Used in Phone 8.1, but the method has expired

The newest method of WP8.1 Similar function is the ChangeView () method, the parameter is the above two values, the last one is Zoomfactor, the default is 1

Well, the theory I have learned so much, the following direct code:

Because of the limited space, I wrote the horizontal scrollbar, and the vertical scroll bar was the same as it.

Xaml:

<page x:class= "Testunion.scrollviewertest" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" x mlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "using:testunion" xmlns:d= "http// schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/ 2006 "mc:ignorable=" D "background=" {ThemeResource Applicationpagebackgroundthemebrush} "> <Grid> & Lt        grid.rowdefinitions> <rowdefinition height= "50*"/> <rowdefinition height= "50*"/>                      </Grid.RowDefinitions> <scrollviewer x:name= "ScrollViewer" isdeferredscrollingenabled= "True" Horizontalscrollmode= "Enabled" verticalscrollmode= "Enabled" horizontalscrollbarvisibility= "Visible" verticalscrollbarvisibility= "visible" viewchanged= "Scrollviewer_viewch Anged "> <scrollviewer.content> <stackpanel height= "width=" > <StackPanel.Background>                    <imagebrush imagesource= "assets/3.jpg"/> </StackPanel.Background> <textbox header= "username:"/> <passwordbox header= "password:"/> <pass Wordbox header= "Confirm password:"/> <button x:name= "btn" content= "scroll to the specified horizontal or vertical offset position (choose Center here)" click= "Btn_click"/ > </StackPanel> </ScrollViewer.Content> </ScrollViewer> <s Tackpanel grid.row= "1" orientation= "Vertical" > <stackpanel orientation= "Horizontal" > &L T TextBox x:name= "horvisibility" placeholdertext= "Judging horizontal scrollbar visibility" header= "computedhorizontalscrollbarvisibility" Width= "                "margin=" 10,10,0,0 "/> </StackPanel> <stackpanel orientation=" Horizontal "> <textbox X:name= "VErvisibility "placeholdertext=" to determine the vertical scrollbar visibility "header=" computedverticalscrollbarvisibility "width=" "Margin=" 10,10,0,0 "/> </StackPanel> <stackpanel orientation=" Horizontal "> < !--, of course, it's there.-<!--Extentheight-scrollviewer High---<!--viewportheight-visible Area high--&                Gt <textbox x:name= "Extentwidth" placeholdertext= "scrollviewer the contents of the wide" header= "Extentwidth" width= "255" margin= " 10,10,0,0 "/> <textbox x:name=" viewportwidth "placeholdertext=" the width of the viewable area "header=" Viewportwidth "Width="                "margin=" 10,10,0,0 "/> </StackPanel> <stackpanel orientation=" Horizontal "> <!--This side of course also exists-<!--verticaloffset-the vertical offset of the scrolling content-<!--Scrollablehei ght-the vertical direction of the scrollable area--<textbox x:name= "HorizontalOffset" placeholdertext= "Scrolling content horizontal offset" header= "Horizonta Loffset "width=" 195 "margin=" 10,10,0,0 "/> <textbox x:name=" scrollablewidth "placeholdertext=" scrollable area horizontal size "header=" Scrollablewidth "W Idth= "195" margin= "10,10,0,0"/> </StackPanel> </StackPanel> </grid></page&gt ;

. CS:

Using system;using system.collections.generic;using system.io;using system.linq;using System.runtime.interopservices.windowsruntime;using windows.foundation;using Windows.Foundation.Collections; Using windows.ui.xaml;using windows.ui.xaml.controls;using windows.ui.xaml.controls.primitives;using windows.ui.xaml.data;using windows.ui.xaml.input;using windows.ui.xaml.media;using Windows.UI.Xaml.Navigation;//" Blank page "Item template in http://go.microsoft.com/fwlink/?    linkid=390556 on the namespace testunion{////<summary>//////for self or to navigate to a blank page inside the Frame.             </summary> public sealed partial class Scrollviewertest:page {public scrollviewertest () { This.        InitializeComponent ();        }///<summary>///This page will be called when it is displayed in Frame.        </summary>//<param name= "E" > Describes how to access event data for this page. This parameter is typically used for configuration pages. </param> protected override void Onnavigatedto (NavigationEventArgs e) {} private void S CrOllviewer_viewchanged (object sender, Scrollviewerviewchangedeventargs e) {//computedhorizontalscrollbar            Visibility-visibility of the current horizontal scroll bar Horvisibility.text = scrollViewer.ComputedHorizontalScrollBarVisibility.ToString (); Computedverticalscrollbarvisibility-visibility of the current vertical scroll bar Vervisibility.text = Scrollviewer.computedvertica            Lscrollbarvisibility.tostring ();            The width of the content within the extentwidth-scrollviewer Extentwidth.text = scrollViewer.ExtentWidth.ToString ();            Viewportwidth-width Viewportwidth.text of the viewable area = scrollViewer.ViewportWidth.ToString ();            HorizontalOffset-The offset of the horizontal direction of the scrolled content Horizontaloffset.text = scrollViewer.HorizontalOffset.ToString ();        Scrollablewidth-size of the horizontal direction of the scrollable area Scrollablewidth.text = scrollViewer.ScrollableWidth.ToString (); } private void Btn_click (object sender, RoutedEventArgs e) {//To center content inside ScrollView Scro Llviewer.cHangeview (SCROLLVIEWER.SCROLLABLEWIDTH/2, scrollviewer.scrollableheight/2,1); This way the Scrolltohorizontaloffset () and Scrolltoverticaloffset () functions have expired (but can still be used) and now use the ChangeView () function above to//changeview () The first and second parameters are the offset of the horizontal scroll and the offset of the vertical scroll, the third is zoomfactor, the default value is 1, as if it is about scaling, this is set to 1 on the line//scrollviewer.scrolltohorizontaloffset (s            CROLLVIEWER.SCROLLABLEWIDTH/2);        Scrollviewer.scrolltoverticaloffset (SCROLLVIEWER.SCROLLABLEHEIGHT/2); }    }}

Run:

Initial:

Left Slide:

Click the button to center it:

Windows Phone 8.1 in ScrollViewer (i)