New Fashion Windows 8 Development (27): Adjust the UI Based on The View status of the application

We know that in Win8 screen display, the applicationProgramThere are several statuses, such as "full possession", "edge Station", "", and different UI la S.

A friend may have found applicationview in the windows. UI. viewmanagement namespace and obtained an enumeration value about the display view status through its value attribute. This is the case:

However, you may think that, of course, I know how to obtain this value. The question is, how do I know when the application is "on the sidelines? Or when will the user fill in the blanks?

 

Let me give you a prompt. When the above four statuses occur, where do you say the current window will change? Or which properties of the window have changed?

Think about it.

........................................................................................................................ ..........................................

........................................................................................................................ ..........................................

........................................................................................................................ ............................................................

Is it time? Yes, the size of the window has changed. do you understand it now? As long as we process the sizechanged event of the current window, we all know that the "board tile" style applications of Windows 8 are full screen by default, so once he is not serious about class, if the teacher asks him to "stand by" or the user says "You play", the size of the window will definitely change at this time. Do you mean this?

 

Well, the key technical points have been found, and it is easy to change the layout according to different view states. You can useCodeTo change. Of course, you can also use status switching for processing.

I don't know if I found the custom control template? There are visual stategroup and visual state, right? Okay. Why don't we apply this to our page?

 

The theory is always so abstract, so my bragging style is "less theory more actions". This is my original English phrase. Chinese is called "more work, less brag ". Therefore, let's talk about it as a matter of fact.

 

1. Create a New W8 "Panel" style application. 39 words are omitted here.

2. Open mainpage. XAML on the home page. refer to the following code to go directly.

<Page X: class = "appviewexample. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: appviewexample "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D"> <page. resources> <style X: Key = "navtbstyle" targettype =" Textblock "> <setter property =" margin "value =" 3,30, 8, 8 "/> <setter property =" fontweight "value =" bold "/> <setter property =" fontfamily "value =" "/> <setter property =" fontsize "Value = "45"/> </style> <style X: key = "ckitemstyle" targettype = "checkbox"> <setter property = "margin" value = ","/> </style> </page. resources> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <grid. colu Mndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <stackpanel X: Name = "pnlleft" grid. column = "0" margin = "3"> <textblock text = "> my homepage" fontfamily = "global user interface" style = "{staticresource navtbstyle}"/> <textblock text = "> Review" fontfamily = "global user interface" style = "{staticresource navtbstyle}"/> <textblock text = "> Exhibition Area" fontfamily = "glo Bal User Interface "style =" {staticresource navtbstyle} "/> <textblock text ="> about me "fontfamily =" global user interface "style =" {staticresource navtbstyle }"/> </stackpanel> <stackpanel grid. column = "1" margin = "21"> <textblock text = "Your name:"/> <textbox/> <textblock margin = "0, 22, "text =" Your Date of Birth: "/> <textbox/> <textblock text =" select your favorite sports: "margin =, 0, 0 "/> <stackpanel X: Name =" plchoices "Orientation = "Horizontal"> <checkbox content = "badminton" style = "{staticresource ckitemstyle}"/> <checkbox content = "running" style = "{staticresource ckitemstyle}"/> <checkbox content = "" style = "{staticresource ckitemstyle}"/> <checkbox content = "" style = "{staticresource ckitemstyle}"/> <checkbox content = "" style = "{staticresource ckitemstyle}"/> <checkbox content = "" style = "{staticresource ckitemstyle}"/> <Che Ckbox content = "" style = "{staticresource ckitemstyle}"/> <checkbox content = "" style = "{staticresource ckitemstyle}"/> <checkbox content = "" style = "{staticresource ckitemstyle}"/> <checkbox content = "single pick" style = "{staticresource ckitemstyle}"/> </stackpanel> <textblock fontsize = "45" X: name = "tbstate" margin = "," textwrapping = "Wrap" horizontalalignment = "center"/> </stackpanel> <! -- Status group --> <visualstatemanager. visualstategroups> <visualstategroup X: Name = "appviews"> <visualstate X: Name = "nomal"/> <visualstate X: Name = "snapped"> <storyboard> <objectanimationusingkeyframes storyboard. targetname = "pnlleft" storyboard. targetproperty = "visibility"> <discreteobjectkeyframe keytime = "0" value = "Collapsed"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard. targetname = "plchoices" storyboard. targetproperty = "orientation"> <discreteobjectkeyframe keytime = "0" value = "vertical"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate X: name = "fullscreenportrait"> <storyboard> <objectanimationusingkeyframes storyboard. targetname = "pnlleft" storyboard. targetproperty = "visibility"> <discreteobjectkeyframe keytime = "0" value = "Collapsed"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard. targetname = "plchoices" storyboard. targetproperty = "orientation"> <discreteobjectkeyframe keytime = "0" value = "vertical"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate X: name = "fullscreenlandscape"> <storyboard> <objectanimationusingkeyframes storyboard. targetname = "pnlleft" storyboard. targetproperty = "visibility"> <discreteobjectkeyframe keytime = "0" value = "visible"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard. targetname = "plchoices" storyboard. targetproperty = "orientation"> <discreteobjectkeyframe keytime = "0" value = "horizontal"/> </objectanimationusingkeyframes> </storyboard> </visualstate> <visualstate X: name = "filled"> <storyboard> <objectanimationusingkeyframes storyboard. targetname = "pnlleft" storyboard. targetproperty = "visibility"> <discreteobjectkeyframe keytime = "0" value = "visible"/> </objectanimationusingkeyframes> <objectanimationusingkeyframes storyboard. targetname = "plchoices" storyboard. targetproperty = "orientation"> <discreteobjectkeyframe keytime = "0" value = "vertical"/> </strong> </storyboard> </visualstate> </visualstategroup> </visualstatemanager. visualstategroups> </GRID> </Page>

Although the Code is so long, it is actually very simple. The first part is the UI layout. You can just do it. The second part is the declaration. There are four different States. Note: visualstatemanager. visualstategroups must be included in the grid and not in the page. Otherwise, you will call visualstatemanager in the code. the gotostate method will change to go to hell.

 

3. The next step is to handle the event of window size change.

Using system; using system. collections. generic; using system. io; using system. LINQ; 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; // introduce the following namespace using Windows. UI. viewmanagement; namespace appviewexample {public sealed partial class mainpage: Page {public mainpage () {This. initializecomponent (); this. loaded + = (page, argp) => {window. current. sizechanged + = current_sizechanged;}; this. unloaded + = (page, argp) => {window. current. sizechanged-= current_sizechanged;} void current_sizechanged (Object sender, windows. UI. core. windowsizechangedeventargs e) {Switch (applicationview. value) {Case applicationviewstate. filled: visualstatemanager. gotostate (this, "filled", false); tbstate. TEXT = "current view: filled"; break; Case applicationviewstate. fullscreenlandscape: visualstatemanager. gotostate (this, "fullscreenlandscape", false); tbstate. TEXT = "current view: fullscreenlandscape"; break; Case applicationviewstate. fullscreenportrait: visualstatemanager. gotostate (this, "fullscreenportrait", false); tbstate. TEXT = "current view: fullscreenportrait"; break; Case applicationviewstate. snapped: visualstatemanager. gotostate (this, "snapped", false); tbstate. TEXT = "current view: snapped"; break; default: Break ;}}}}

When the page is not displayed, process window. current. the sizechanged event is meaningless. Therefore, I will add an event handler after the page is loaded, and unbind the event when the page is unloaded.

 

During testing, it is best to use a simulator, because in the simulator, you can use the following toolbar to rotate the screen.

 

Everything is ready. Select "Simulator" from the drop-down list of the debug button and start running. Then, let's take a look at your operations. Let's take a look at some of my screenshots, try again.

 

 

 

 

 

 

[Supplement]

The above code is a bit complicated. In fact, we can use a line of code to complete it.

 
Visualstatemanager. gotostate (this, windows. UI. viewmanagement. applicationview. value. tostring (), false );