[Wp8.1ui Control Programming] Compilation of Windows Phone XAML pages

1.1.2 Compilation of XAML pages

The Windows Phone Application project compiles XAML pages through Visual Studio, and when the program is run, it loads and parses the XAML through a direct link operation, connecting XAML and procedural code automatically. If you don't care about fusing XAML files with procedural code, you just need to add it to the Windows Phone project of Visual Studio and compile it with the build action in the interface, which is common to XAML files for public style resources. However, if you want to compile a XAML file and mix it with procedural code, the first step is to specify a subclass for the root element of the XAML file, which can be done with the class keyword in the XAML language namespace, which is typically used by Windows Phone's program pages. Typically a new XAML file in a Windows Phone project automatically generates a corresponding XAML.CS file and associates two files by default, for example, adding a XAML file as follows:

< page x:class= "Phoneapp1.mainpage" ......> ... Omit several codes </page>

The XAML.CS file associated with the XAML file is as follows:

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

namespace phoneapp1{public sealed partial class Mainpage:page {... Omit several codes}}

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

Typically we are XAML.CS files associated with XAML files called code-behind files. If you refer to any one of the event handlers in XAML (through the event attributes, such as the click attribute of the button), this is where we define these event handlers. The partial keyword in a class definition is important because the implementation of the class is distributed across multiple files. Perhaps you will find it strange, because in the project only see the MainPage.xaml.cs file defines the MainPage class, in fact, MainPage class is also defined in another place, just hidden in the project. When we compile the Windows Phone project, you will see a file in the project's Obj\debug folder with the G.cs extension created by Visual Studio, and for each XAML file you will find a G.cs file. For example, if we have a MainPage.xaml file in our project, you will find the Mainpage.g.cs file under the Obj\debug folder. Here's a look at the structure of the Mainpage.g.cs file:

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

Using system;......namespace phoneapp1 {    public partial class  MainPage : global::Windows.UI.Xaml.Controls.Page {         [global::system.codedom.compiler.generatedcodeattribute ("Microsoft.Windows.UI.Xaml.Build.Tasks", "  4.0.0.0 ")]         (global::windows.ui.xaml.controls.grid  layoutroot;        ......         private bool _contentloaded;        [ System.Diagnostics.DebuggerNonUserCodeAttribute ()]        public  Void initializecomponent ()  {             if  (_contentloaded)  {                 return;            }             _contentLoaded = true;             global::windows.ui.xaml.application.loadcomponent (This, new global::system.uri ("ms-appx :///mainpage.xaml "),  global::windows.ui.xaml.controls.primitives.componentresourcelocation.application);             LayoutRoot =  (Global:: Windows.ui.xaml.controls. grid) this. FindName ("LayoutRoot");            ......         }    }}

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

As we can see from the Mainpage.g.cs file, the MainPage class also defines some controls and related methods here, and InitializeComponent () The InitializeComponent () method inside the MainPage.xaml file is loaded and parsed inside the MainPage.cs file, which is defined in the Mainpage.g.cs file. Controls that are declared in a XAML page typically generate internal fields for the corresponding control in. G.cs. In fact, this depends on whether the control has a x:name property, and as long as it has this property, it automatically calls the FindName method, which associates the field with the page control. Without the x:name attribute, there is no field, and this association has some performance waste because it is associated with the Loadcomponents method when the control is loaded, and XAML is dynamically parsed at this time.

In the project's Obj\debug folder, we also found files with G.i.cs extension, and for each XAML file you will find a G.i.cs file for each, and these g.i.cs files are basically the same as the corresponding G.cs files. So what is the meaning of these g.i.cs files? In fact, these g.i.cs files are not generated at compile time, but when you create a XAML file is generated immediately, or you modify the XAML file G.i.cs file will be changed, and G.cs file is necessary to successfully compile the project will not be generated. The g in the file suffix indicates the meaning of the generated, I means IntelliSense, and the G.i.cs file is the IntelliSense file corresponding to the XAML file, using go to in VS Definition function to find the implementation of the InitializeComponent method, entered is the G.i.cs file InitializeComponent method inside.

1.1.3 Dynamically loading XAML

Dynamic load XAML is the effect of dynamically generating a UI by parsing a string or file in XAML format while the program is running. Typically, the interface elements of a Windows phone are rendered by directly reading the contents of a XAML file. As explained in the previous section, the compiler is associated with a XAML file and a XAML.CS file, which is the default UI implementation, but at some point you do not have to design all the XAML elements in advance, but you need to dynamically load the XAML objects while the program is running, then you need to use the dynamic load XAML to It is now.

The dynamic loading of XAML in the application needs to be implemented using the Xamlreader.load method, which provides a XAML processor engine for parsing XAML and creating the appropriate Windows Phone object Tree xamlreader.load method to parse a well-formed XAML fragment and create the appropriate Windows phone object tree, and then return the root of the object tree. Most of the code that can be written on a XAML page is implemented in the form of dynamically loaded XAML, not just normal UI controls, but other XAML code like animations that we can load dynamically, such as:

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

        //  the string of XAML code for a transparency change animation          private const string FadeInStoryboard =         @ "<storyboard xmlns=" "Http://schemas.microsoft.com/winfx/2006/xaml/presentation" " >            <DoubleAnimation                  duration= "" 0:0:0.2 ""                   Storyboard.targetproperty= "" (uielement.opacity) ""                   to= "" 1 ""/>        </ Storyboard> ";     //use the Xamlreader.load method to load a XAML string and parse it into animated objects      Storyboard storyboard = xaMlreader.load (Fadeinstoryboard)  as Storyboard; 

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

There are certain requirements for dynamically loading XAML strings for XAML using the Xamlreader.load method, and these "well-formed XAML fragments" must meet the following requirements:

(1) A XAML content string must define a single root element, and content created with Xamlreader.load can only be assigned to a Windows Phone object, which is a one-to-two relationship.

(2) The content string XAML must be well-formed XML and must be parsed XAML.

(3) The required root element must also specify a default XML namespace value. This is usually the namespace xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation".

The following is an example of a dynamically loaded XAML: A rectangle is generated by using the Xamlreader.load method to load a XAML string to generate a button and load a XAML file.
Code Listing 1-1 : dynamically loading XAML (source code: Chapter 1th \examples_1_1)

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

MainPage.xaml File Main code------------------------------------------------------------------------------------------------------ ------------<grid x:name= "Contentpanel" grid.row= "1" margin= "12,0,12,0" > <stackpanel x:name= "s            P_show "> <button x:name=" bt_addxaml "content=" Load XAML button "click=" Bt_addxaml_click "></Button> </StackPanel> </Grid>

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

650) this.width=650; "alt=" Copy Code "src=" http://common.cnblogs.com/images/ Copycode.gif "/>

Rectangle.xaml file code: A XAML file that is dynamically loaded into the program------------------------------------------------------------------------------------ ------------------------------<rectangle xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "          xmlns:x=" http://schemas.microsoft.com /winfx/2006/xaml "         height="  Width= "480" >     <Rectangle.Fill>        < lineargradientbrush>            < Gradientstop color= "Black"  offset= "0"/>             <gradientstop color= "Red"  offset= "0.5"/>             <gradientstop color= "Black"  offset= "1"/>         </linearGradientbrush  >    </rectangle.fill></rectangle> 

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

MainPage.xaml.cs File Main code--------------------------------------------------------------------------------------------------- ---------------        //  load XAML Buttons          private void bt_addxaml_click (Object sender, routedeventargs e)         {             //Note that the namespace inside the XAML string "http://schemas.microsoft.com/winfx/2006/xaml/presentation"   cannot be less.             string buttonXAML =  " <button xmlns= ' http://schemas.microsoft.com/winfx/2006/xaml/presentation '     +                   " content =\ "load XAML file \"   foreground=\ "red\" ></Button> ";            &nbsp button btnred =  (Button) xamlreader.load (Buttonxaml);             btnRed.Click += btnRed_Click;             sp_show. Children.add (btnred);        }         //  loaded XAML button associated event         async void btnred _click (object sender, routedeventargs e)         {             string xaml = string. Rectangle.xaml file for empty;            //loader              storagefile fileread = await  windows.applicationmodel.package.current.installedlocation.getfileasync ("Rectangle.xaml");            //  read the contents of the file      xaml = await fileio.readtextasync (FileRead);             //  Loading rectangle             Rectangle rectangle =  (Rectangle) Xamlreader.load (XAML);             sp_show. Children.add (rectangle);         }

650) this.width=650; "alt=" Copy Code "src=" Http://common.cnblogs.com/images/copycode.gif "/>

650) this.width=650; "src=" Http://images.cnitblog.com/i/152755/201406/031803562701975.png "/>

This article comes from the deep understanding of Windows Phone 8.1 UI Control programming

Source code Download: Http://vdisk.weibo.com/s/zt_pyrfNHoezI

Welcome to follow my Weibo @wp forestry administration

WP8.1 Technology Group: 372552293

[Wp8.1ui Control Programming] Compilation of Windows Phone XAML pages