"Win 10 App development" UI composition Notes (iii): Integration with XAML

In addition to DirectX game development, we generally rarely use UI composition alone, so interacting with XAML and integrating is a corollary. This can be used to mix the advantages of both, so that the UI layout can be more flexible.

When it comes to integration with XAML, we must first know a man, who is very important, in the Windows.UI.Xaml.Hosting namespace, called Elementcompositionpreview, and with it, we can in the XAML element and Composition UI elements to walk between them. Let's see what members it's made public.

     Public Sealed classElementcompositionpreview:ielementcompositionpreview { Public Static voidsetimplicitshowanimation (UIElement element, icompositionanimationbase animation);  Public Static voidsetimplicithideanimation (UIElement element, icompositionanimationbase animation);  Public Static voidSetistranslationenabled (UIElement element,BOOLvalue);  Public Staticcompositionpropertyset Getpointerpositionpropertyset (UIElement targetelement);  Public StaticVisual getelementvisual (UIElement Element);  Public StaticVisual getelementchildvisual (UIElement Element);  Public Static voidsetelementchildvisual (UIElement element, visual visual);  Public Staticcompositionpropertyset Getscrollviewermanipulationpropertyset (ScrollViewer ScrollViewer); }

The methods exposed by this class are static and do not require an instance invocation. We should not rush to understand the role of each method, which will bring ourselves into a dead end. Here, let's focus on the usage of the following methods first.

1, Getelementvisual: To make XAML elements interact with the composition API, this method is particularly important, by invoking it, we can get the representation element of the composition UI tree in the XAML element, and can get the associated Composi Tor object, with an associated compositor instance, we can create a variety of UI elements.

2, Setelementchildvisual: When we use the composition API to create a custom UI element, call this method to insert it into the XAML object's visual tree. Note that UI elements are always inserted into the last position of the visual tree, so the elements we assemble ourselves always block the original XAML elements. You have to pay attention to this.

3, Getelementchildvisual: Only You call the Setelementchildvisual method to add a custom visual element to the visual tree, in order to call this method, this method is to return your last inserted element. If you have not inserted a custom visual element, the method returns NULL. Be careful not to confuse this method with the Getelementvisual method, which is different. The Getelementvisual method is to get the visual object associated with the target XAML object, and the Getelementchildvisual method is to get the custom element you last inserted into the visual tree.

Let's look at an example below.

On the page, I put a Border object.

    <Background= "{ThemeResource Applicationpagebackgroundthemebrush} " >        <  Name= "BD"  Background= "Black"/>     </Grid>

By the way the background is set to black, convenient to watch the movie behind.

Switch to the code file, and now we customize the UI to assemble it and then insert it into the subtree of the Border element.

         PublicMainPage () { This.            InitializeComponent ();        compositmyvisual (); }        voidcompositmyvisual () {Visual VISUALFORBD= elementcompositionpreview.getelementvisual (BD); //Build UICompositor compos =Visualforbd.compositor; //root elementContainervisual Rootvs =Compos.            Createcontainervisual (); //First VISUAL elementSpritevisual V1 =Compos.            Createspritevisual (); V1. Brush=Compos.            Createcolorbrush (Colors.green); V1. Size=NewVector2 (450f, 300f);//sizeV1. Offset =NewVector3 (30f, 20f, -1f);//DisplacementRootvs. Children.insertattop (v1); //Second visual elementSpritevisual v2 =Compos.            Createspritevisual (); V2. Brush=Compos.            Createcolorbrush (Colors.skyblue); V2. Size=NewVector2 (400f, 400f); V2. Offset=NewVector3 (180f, 125f, 0f); Rootvs. Children.insertattop (v2); //This is a very important sentence . elementcompositionpreview.setelementchildvisual (BD, Rootvs); }

Remember, after you assemble the UI elements, call the Elementcompositionpreview.setelementchildvisual method and insert the custom elements into the visual tree.

In the previous post, the old week was introduced, containervisual is a container element, it exposes a children collection, we can add child elements to it, there are four methods we can call.

1, Insertattop: child elements will always be at the top of other elements, so this element will block other elements.

2. Insertatbottom: The added child element is always at the bottom of the display layer, and it is obscured by other elements.

3. Insertabove: Put the current child element on top of an element. For example, we can explicitly specify that the current element be positioned above the a element, which allows the current element to block the a element.

4, Insertbelow: Put the current element below an element. If the current element is placed below the a element, then the element may be obscured by a element.

Let's look at the effect of this example.

In the above code, the first element is filled with a green brush, the second one is sky blue, and when we insert the element tree, we put them at the top of all the elements.

    Rootvs. Children.insertattop (v1);    Rootvs. Children.insertattop (v2);

are located at the top, then the element that is added to it will block the front element, so we can see that the sky-blue area blocks part of the green area.

With this interaction, we can also easily rotate the XAML elements in three dimensions.

The interface of this example is divided into two parts. On the left, let's put three sliders to adjust the rotation angle of the XAML object on the X, Y, Z axes, ranging from 90 to 90, respectively.

            <SliderName= "SldX"Header= "X-axis"Maximum= "All"Minimum= " -90"SmallChange= "1"stepfrequency= "1"Value= "0"valuechanged= "Onslidervalchanged"/>            <SliderName= "Sldy"Header= "Y-axis"Maximum= "All"Minimum= " -90"SmallChange= "1"stepfrequency= "1"Value= "0"valuechanged= "Onslidervalchanged"/>            <SliderName= "Sldz"Header= "Z Axis"Maximum= "All"Minimum= " -90"SmallChange= "1"stepfrequency= "1"Value= "0"valuechanged= "Onslidervalchanged"/>

The right side of the interface is a rectangle.

  <grid.column= "1"  Width= "  Height= " Fill = "Brown" Name = "Rect" />

We're just going to make the rectangle rotate three-dimensional.

Define a method that obtains real-time values from the three Slider controls above and then changes the three-dimensional direction of the rectangle (the rotation angle on the three axes).

 void   Setui () {Visual V             = elementcompositionpreview.getelementvisual (rect);  //  set direction  float  x = (float   float  y = (float  ) Sldy.value;  float  z = (float  ) Sldz.value;            quaternion q  = new   quaternion (x, Y, z, 1f);        V.orientation  = Q; }

A quaternion instance contains four values, the first three is the value rotated on the three axes, and the W regardless of it, always assigns it 1 on the line.

Come on, look at the effect.

The source code for this example can be downloaded here.

Okay, so we'll talk about this in the next week. How to use the Win component to draw a dot on a XAML element can achieve the effect of customizing Renderer in WPF.

"Win 10 App development" UI composition Notes (iii): Integration with XAML