Metro Study Notes + experiences (1)

 

Preface:

Recently, the Windows 8 consumer preview version has just been released, and its performance is still stable. No, I just came down to visual studio11 a few days ago. The most interesting thing is Metro. New things. As a result, I downloaded some sample source code and wrote some technical aspects into this series of blogs.

Welcome to the official version of Windows 8 in March and the opening of the app store ....

 

Body:

This is the first metro I wrote.ProgramThe interface is as follows:

 

How can this problem be solved? Although this Metro program is simple, it is my first program after all. I would like to share the source code here.

 

This is The XAML required for status switching:

 1 <Visualstatemanager. visualstategroups> 2 <Visualstategroup> 3 <Visualstate X: Name = " Fill  " > </Visualstate> 4 <Visualstate X: Name = "  Snapped  " > 5 <Storyboard> 6 <Objectanimationusingkeyframes storyboard. targetproperty = "  (Stackpanel. Orientation)  " Storyboard. targetname = " Centercontent  " > 7 <Discreteobjectkeyframe keytime = "  0  " > 8 <Discreteobjectkeyframe. value> 9 <Orientation> vertical </orientation> 10 </Discreteobjectkeyframe. value> 11 </Discreteobjectkeyframe>12 </Objectanimationusingkeyframes> 13 <Objectanimationusingkeyframes storyboard. targetproperty = "  (Stackpanel. Orientation)  " Storyboard. targetname = "  About  " > 14 <Discreteobjectkeyframe keytime = "  0  " >15 <Discreteobjectkeyframe. value> 16 <Orientation> vertical </orientation> 17 </Discreteobjectkeyframe. value> 18 </Discreteobjectkeyframe> 19 </Objectanimationusingkeyframes> 20 </Storyboard> 21 </Visualstate> 22 <Visualstate X: Name ="  Full  " > 23 <Storyboard> 24 <Objectanimationusingkeyframes storyboard. targetproperty = "  (Stackpanel. Orientation)  " Storyboard. targetname = "  Centercontent  " > 25 <Discreteobjectkeyframe keytime ="  0  " > 26 <Discreteobjectkeyframe. value> 27 <Orientation> horizontal </orientation> 28 </Discreteobjectkeyframe. value> 29 </Discreteobjectkeyframe> 30 </Objectanimationusingkeyframes> 31 <Objectanimationusingkeyframes storyboard. targetproperty = "  (Stackpanel. Orientation)  " Storyboard. targetname = "  About  " > 32 <Discreteobjectkeyframe keytime = "  0  " > 33 <Discreteobjectkeyframe. value> 34 <Orientation> horizontal </orientation> 35 </Discreteobjectkeyframe. value> 36 </Discreteobjectkeyframe> 37 </Objectanimationusingkeyframes> 38 </Storyboard> 39 </Visualstate> 40 </Visualstategroup> 41 </Visualstatemanager. visualstategroups>

This isCode:

Windows. UI. viewmanagement. applicationview. getforcurrentview (). viewstatechanged + = blkpage_viewstatechanged; // Add the event to the window constructor.

 1               Switch  (ARGs. viewstate)  2   {  3                   Case  Windows. UI. viewmanagement. applicationviewstate. Filled: // approximately 2/3 displayed in the window  4   {  5 Visualstatemanager. gotostate (This , "  Fill  " , False  );  6                           Break  ;  7   }  8                   Case  Windows. UI. viewmanagement. applicationviewstate. fullscreenlandscape: // normal display  9  {  10 Visualstatemanager. gotostate ( This , "  Full  " , False  );  11                           Break  ;  12   }  13                   Case Windows. UI. viewmanagement. applicationviewstate. Snapped: // approximately 1/3  14   {  15 Visualstatemanager. gotostate ( This , "  Snapped  " , False  );  16                           Break  ;  17 }

In addition to the above three modes, there is also a fullscreenportrait, indicating the status when the window is displayed vertically, which is equivalent to Rotating 90 degrees under normal state.

In this example, several less frequently used spaces are used: richtextblock and richtextblockoverflow. These controls have an overflowcontenttarget attribute. In this attribute, binding can be bound to a control. When the original control has insufficient space, extra text is displayed in the bound control, the text can only be placed in richtextblock, rather than richtextblockoverflow. It is displayed in a paragraph.

XAML:

 1 <Richtextblock padding = "  20  " Grid. Row = "  2  " Grid. Column = "  0  " Overflowcontenttarget ="  {Binding elementname = firstrich}  " Fontsize = "  {Binding elementname = SLI, Path = value}  " Maxheight = "  500  " > 2 <Paragraph> 3 <Run X: Name = "  Txt  " TEXT = "  {Binding elementname = Box, Path = text}  " > </Run> 4 </Paragraph> 5   6 </Richtextblock> 7 <Richtextblockoverflow padding = "  20  " Horizontalalignment = "  Stretch  " Verticalalignment = "  Stretch  " Grid. Row = "  2  " Grid. Column = "  1  " X: Name = "  Firstrich  " Overflowcontenttarget = "  {Binding elementname = secondrich}  " Maxheight = "  500  " /> 8 <Richtextblockoverflow padding = "  20  " Horizontalalignment = "  Stretch  " Verticalalignment = "  Stretch  " Grid. Row = " 2  " Grid. Column = "  2  " X: Name = "  Secondrich  " Maxheight = "  500  " />

 

This is all the content in my program.Source codeI hope you will see:

:

* ************ Renew *****************

 

 

This blog is original, and the copyright is shared by the author and the blog Park. If you want to reprint it, goArticleTo indicate the source.