1.4.1.2 use XAML to describe the user interface

1.4.1.2 use XAML to describe the user interface

 

Windowspresentation Foundation (WPF) is used to create a user interface.. Net Library, which supports Declarative Programming. It separates the description of the User Interface part from the part that implements the imperative program logic. The best way to use the basic library of the Windows Presentation layer is to make the program logic as small as possible and create as many declarative libraries as possible.

Declarative descriptions are represented in a tree structure. Each object that is composed of them represents the elements of the graphic user interface. It can be created using C #, but the basic library of the Windows Presentation layer also provides a better way to use the XML-based language, called XAML. However, we can see that there are many similarities between XAML and LINQ. Listing 1.5 compares the XAML code with the imperative Windows Forms library code to implement the same functionality.

 

Listing 1.5 creating a UI using thedeclarative and imperative styles (XAML and C #)

 

<! -- Declarative userinterface in WPF and XAML -->

<Canvasbackground = "black">

<Ellipsex: Name = "greenellipse" width = "75" Height = "75"

Canvas. Left = "0" canvas. Top = "0" fill = "lightgreen"/>

</Canvas>

 

// Imperative user interface using Windows Forms

Protected override voidonpaint (painteventargs e ){

E. Graphics. fillrectangle (brushes. Black, clientrectangle );

E. Graphics. fillellipse (brushes. lightgreen, 0, 0, 75, 75 );

}

 

 

It is not difficult to determine what makes the first code segment more declarative. The XAML Code describe the user interface by combining the elements and specifying their attributes. The whole code is an expression that creates a Black canvas with a green ellipse. The command version illustrates how to draw a user interface, and specify the operations to be performed through the statement sequence to obtain the required graphic user interface. This example demonstrates the difference between the two. Declarative style only describes what to do, while imperative style must specify "how" to do.

In declarative versions, we do not need to learn more about the underlying technical details. If you look at this code, you do not need to know how WPF is represented and draw a graphical user interface. Using the Windows Forms code, you can see all the technical details (such as the paint brush representation and drawing sequence ). In listing 1.5, the relationship between XAML and the drawing code is clear. We can use WPF and XAML to describe more complex programs. Let's look at an example:

 

<Doubleanimation

Storyboard. targetname = "greenellipse"

Storyboard. targetproperty = "(canvas. Left )"

From = "0.0" to = "100.0" Duration = ""/>

 

This is an expression that creates an animation and changes the left attribute of the elliptic (specified by the greenellipse name). Its value ranges from 0 to 100 in 5 seconds. The code is implemented in XAML. We can also use C # To write the code and construct the object tree explicitly. Doubleanimation is a class, so you can specify its attributes. However, writing in XAML is more declarative. However, in either case, the code can be declared, thanks to WPF. It is quite complicated to use traditional imperative code to implement animation. You must create a timer and register an event handler, which is called every several milliseconds to calculate the new location of the ellipse.

 

Declarative Programming with. net

 

WPF and LINQ are two mainstream Declarative Programming technologies. Of course there are others. The goal of LINQ is to simplify a common language for data processing. It draws on a lot of ideas about declarative Data Processing languages. For example, declarative methods can also be found in SQL or XSLT.

Another area of declarative style is the use of. NET features in C # Or VB. NET. A feature is a method used to annotate a class or its members, specifying how it can be used under specific circumstances. For example, editing the graphical user interface control in the designer is declarative, because when we are processing the control, it shows what we want to get from the designer instead of writing code, configure the designer using commands.

 

So far, we have seen several declarative-style technologies that make the problem easier to solve. You may ask yourself how to use it to solve your own problems. In the next section, we will briefly introduce an example in Chapter 15th.