Top

This property gets or sets the Top corner of a specific object. It represents in pixels (double type) the distance between the top limit of the screen (Graphics) and the selected object's most top point.

In the image above, the red arrow represents the distance between the button and the top corner of the screen. In other words, if the button is moved to the bottom increasing the distance between the button and the top corner of the screen, the Left property will increase pixel by pixel accordingly.

In the next examples, the objects Left corner are defined by one point only.

   

Properties:

The properties shown above in the Properties Window represent its value during the design. It means this will be the value when you start the application, but it can be changed during runtime. You can specify a logic where the Top property will assume another value.

Please check below some ways to manipulate the Top value during runtime.

Example 1: Changing the Top property on a C# Script.

You can access the top property of any object by invoking objectName.Top as in the example below:

.     Create a new Screen (Graphics) and save it (i.e. Graphics1).

.     Insert Button5 and in the Text property write "Up".

.     Insert Button6 and in the Text property write "Down".

.     Insert an Ellipse1, please check its name in the Properties Window.

.     Next step is to configure the "Up" and the "Down" button. In this example, we want to write logic to move the Ellipse1 over the Graphics area.

.     So far, the Graphics should look like the image below:

      

.     Now select the "Up" Button and in the "Mouse Down" event, write the following code:

      

.     Configure the "Down" Button as following:

      

.     Run the Application (F5) and see the results.

      

.     If you click on the "Up" Button, the Ellipse named Ellipse1 will move towards the top as we are decreasing its Top Property.

.     If you click on the "Down" Button, the Ellipse named Ellipse1 will move to the bottom as we are increasing its Top Property.

Example 2: Changing the Top property with a tag.

.     Create a new Screen (Graphics) and save it (i.e.  Graphics1).

.     Insert Button5 and in the Text property write "Up".

.     Insert Button6 and in the Text property write "Down".

.     Insert an Ellipse1, please check its name in the Properties Window.

.     Next step is to configure the "Up" and the "Down" button. In this example, we want to write logic to move the Ellipse1 over the Graphics area.

.     So far, the Graphics should look like the image below:

.      Now select the "Up" Button and in the "Mouse Down" event, write the following code:

.     Configure the "Down" Button as following:

.     Run the Application (F5) and see the results.

.     If you click on the "Up" Button, the Ellipse named Ellipse1 will move to the top as we are decreasing its Top Property through the tag value.

.     If you click on the "Down" Button, the Ellipse named Ellipse1 will move to the left as we are increasing its Top Property through the tag value.