"Win 10 App development" UI composition Notes (V): Lighting

UI composition In addition to the ability to create three-dimensional space for UI elements, there is a fairly important part-the light. The wonderful and colorful universe, all from the light, light, so that we see all kinds of things, except the black hole, the world is a multicolored spot calumniate. Therefore, really want to simulate real objects, reasonable lighting is very important, otherwise it is "not like".

The composition API refines a common base class--compositionlight for a variety of lighting effects with two normative properties:

Targets: A collection of visual elements. Used to determine which things in the scene should be illuminated. For example, you simulated a wall, hanging on the walls of various paintings, landscapes, birds and beasts, there are beautiful women, there are bats, if you want to see the painting, black you even a dog hair can not see, so you see a lot of art galleries or museums will install a variety of light sources, only to hit the lights you can see these paintings. If you want to see beautiful women, then put the beauty into the Targets collection, so that the beauty will be illuminated by the lights.

Exclusionsfromtargets: This is an exclusion list. The exact opposite of the above is the designation of objects that you do not want to be illuminated. If you think the bat is too scary to look at, you can exclude it and not be illuminated by the lights.

Ambient light

Ambient light is similar to our home incandescent, energy-saving lamps, this light source is more uniform, the basic can illuminate the entire room.

Let's look at an example of ambient light. In the following example, a picture is loaded on the interface, and then we use the ambient light to illuminate it. By the way, a Slider control is used to adjust the intensity of the light.

    <GridBackground="{ThemeResource Applicationpagebackgroundthemebrush}">        <grid.rowdefinitions>            <RowDefinition/>            <RowDefinitionHeight= "Auto"/>        </grid.rowdefinitions>        <ImageSource= "Assets/5.jpg"Stretch= "Uniform"Name= "img"/> <SliderGrid.Row= "1"Margin= "2,9"stepfrequency= "0.1"Value= "1"Minimum= "0"Maximum= "Ten"valuechanged= "Onslidervalchanged"/>    </Grid>

Switch to the code file, in the constructor of the page class, let's add a light effect.

        NULL ;          Public MainPage ()        {            this. InitializeComponent ();              = elementcompositionpreview.getelementvisual (img);  = v.compositor;  =   compos. Createambientlight (); Light. Targets.add (v);        }

Notice why I want to declare the ambientlight variable to the class level, because it can be adjusted to its strength later. The following is the handling code for the ValueChanged event of the Slider control.

        Private void Onslidervalchanged (object  sender, Rangebasevaluechangedeventargs e)        {            if  Null)                {= (float) e.newvalue;            }        }

It is important to determine if the light variable is null, because this event processing is associated in XAML code, which is called when the page class instance is constructed (mainly when the value of the Value property is set), and then the ambient optical object is not created, and if not judged, it appears Null reference exception.

The Ambientlight class represents ambient light, which has a color property that specifies the color of the light, which is the default white light. When an object is illuminated by white light, it presents itself as a natural. As a result, the above code performs as well.

Intensity represents the intensity of light, from the above example we see that this value should be greater than 0, less than or equal to 0 is all black, what can not see, that there is no meaning, the value is not too big, so I this example the largest to 10, of course you can set 100, 1000, but the intensity is too big, Will be bright blind, what can not see, also meaningless. The light intensity defaults to 1, and we can set the appropriate values as needed.

We can also change the other colors of the light, for example, we change the code, with a ghostly green light to illuminate.

  Light. Color = Colors.green;

Then, the effect is amazing.

Fixed-point Light

Light, that is, pointlight, it is like a small light bulb, the light emitted is not as comprehensive as the ambient light, but point-like, but it can illuminate the surrounding objects, and close to the object near the words, shining brighter, it is like torches, candles. Therefore, the properties of the Pointlight class are more complex than the ambient light.

The color and Intensity properties are the same, which represents the colors of the light and the latter represents the intensity. In addition, there are the following: Constantattenuation, Quadraticattenuation, Linearattenuation, the properties of these attributes are the same, but the algorithm is different, there are some square values, and some are linear. These values are used to set the attenuation speed of the light, what do you mean, we just said that the light level is related to distance, and as the distance between the light and the object increases, the brightness will decay. Of course, if the light is strong, the distance is far more likely to illuminate the larger range, in close range, the local light will be brighter. These values are used to describe the speed at which the light decays. In the real world, this may be related to air visibility or air density, as these factors can affect the propagation of light. But there is no real atmosphere in the virtual graph, so it needs to be simulated by the algorithm.

Because the point light is a luminous point, it will certainly have a position, that is, the coordinates, the following two properties are used to determine the coordinates of the point: The Offset property determines the position, it is a three-dimensional coordinate; what's coordinatespace? It requires specifying a visual object to calculate the intensity of the light. You want to, the big night, you in a wilderness on a torch, you will feel that the torch does not seem very bright, but, if you in a narrow cave with a torch, you will feel it particularly bright. So, this property is to set up a container to determine how bright the light can shine.

Let's look at the example of fixed-point light.

In the interface we place a text, and then the Slider control below is used to adjust the attenuation speed of the point light, that is, the Constantattenuation property, the greater the value, indicating that the same distance light will be weaker, because it decays faster and more obvious, this value is greater than 0 of any value.

    <GridBackground="{ThemeResource Applicationpagebackgroundthemebrush}">        <grid.rowdefinitions>            <RowDefinition/>            <RowDefinitionHeight= "Auto"/>        </grid.rowdefinitions>        <BorderBackground= "Black"Grid.Row= "0"Name= "BD">            <TextBlockVerticalAlignment= "Center"HorizontalAlignment= "Center"Text= "Welcome to the View Pro"FontSize= "Max"FontFamily= "XXFarEastFont-Xingkai"Foreground= "Gold"Name= "text"/>        </Border>        <SliderGrid.Row= "1"Margin= "2,7"Maximum= "5"Minimum= "1"Value= "1"stepfrequency= "0.1"Name= "SLD"/>    </Grid>

TextBlock why put in a Border, said before, the fixed-point light needs a container to calculate the illumination level, so, Border is used as a reference container.

Switch to Code view, in the constructor of the page class, let's add the fixed-point light.

         PublicMainPage () { This.            InitializeComponent (); //Get ContainerVisual Vscontainer =Elementcompositionpreview.getelementvisual (BD); //get TextBlock of visual objectsVisual txtvisual =elementcompositionpreview.getelementvisual (text); Compositor Compos=Vscontainer.compositor; //Create a light sourcePointlight light =Compos.            Createpointlight (); //Light ColorLight. Color =Colors.silver; //StrengthLight. Intensity =3.6f; //locationLight. Offset =NewVector3 (500f, 280f, 45f); //irradiation TargetLight .            Targets.add (txtvisual); //Relative ContainerLight. CoordinateSpace =Vscontainer; //Handling ValueChanged EventsSld. ValueChanged + = (k, x) = ={light. Constantattenuation= (float) SLD.            Value;        }; }

This processing of the ValueChanged event does not need to determine if light is null, because the light object has been initialized when this event is attached.

Note that we are not only going to get TextBlock's visual, although our illumination target is it, but because this light source needs a container, we have to get Border visual at the same time.

Come on, look at the effect.

Conical Light

This light, similar to a flashlight, actually resembles the pointlight above, but the cone light has an inner ring and an outer ring. Therefore, the cone light also has the color, intensity, attenuation degree and other parameters, of course, there will be a position.

The innerconeangle is the angle of the inner ring, the outerconeangle is the angle of the outer ring, expressed in radian angle. If you want to use an angle, you can use the Innerconeangleindegrees and Outerconeangleindegrees properties.

The innerconeintensity represents the light intensity of the inner ring, and the outerconeintensity represents the light intensity of the outer ring.

Offset indicates the position of the light, similar to the fixed-point light above, but the cone light has a Direction attribute. You know, with a flashlight, it has a direction of illumination. If the light source is in front of the object, in order for it to illuminate the object, the direction of the z axis must be negative, only negative values will be taken into the screen, if the light source is behind the object, the direction of the z axis must be positive, so that the direction of illumination will point to the outside of the screen.

Let's do an example. Put a picture on the interface, first of all to see the original image.

This study is not very tall on it. We then let it load on the Image element.

    <GridBackground="{ThemeResource Applicationpagebackgroundthemebrush}">        <BorderName= "BD"Background= "Black">            <ImageName= "img"Source= "Assets/2.jpg"/>        </Border>    </Grid>

The Image element also needs a container outside, here I still use border, because the cone light and fixed-point light, need a container to calculate the light.

Navigate to the code file and add a light source to the constructor of the page class.

         PublicMainPage () { This.            InitializeComponent (); //gets the target element and container elementVisual container =Elementcompositionpreview.getelementvisual (BD); Visual vimg=elementcompositionpreview.getelementvisual (IMG); //Create a light sourceSpotLight light =vimg.Compositor.CreateSpotLight (); //Setting up ContainersLight. CoordinateSpace =container; //Add illuminate TargetLight . Targets.add (VIMG); //color of outer ring and inner ring lightLight. Outerconecolor =Colors.blue; Light. Innerconecolor=Colors.lightyellow; //intensity of the outer ring and inner ring lightLight. Innerconeintensity =3.2f; Light. Outerconeintensity=1f; //AngleLight. Innerconeangleindegrees =30f; Light. Outerconeangleindegrees=90f; //locationLight. Offset =NewVector3 (550f, 270f, 150f); //directionLight. Direction =NewVector3 ( -1f,1.1f, - 1f); }

Well, look at the effect.

OK, this article is here, dinner.

"Win 10 App development" UI composition Notes (V): Lighting