Interaction with XAML Objects

In the first chapter, we added a line to insert a file containing JavaScript code into the page. Now this file will serve for us.
The purpose of this chapter is to show how a user can interact with a page and how actions such as a mouse click can be recognized and associated with programs acting on the page.

To add an action

The name of the event handler is assigned to the program that responds to user actions. XAML allows you to consider these events, and each type of user action has a corresponding name in the language.
Here's how we feel about the events:

    In
  1. XAML code is added to the shape string:
    nameEventation = «javaScript: имя
    2. "IN
  2. the corresponding function is added to the JavaScript file:
    function nomfuction ()
    {
    ...
    }

Main events

MouseLeftButtonDown: When the left mouse button is pressed.
MouseLeftButtonUp: When he is released.
MouseEnter: The mouse enters the surface of the object.
MouseLeave: She's coming out.
MouseMove: It moves across the surface.
Loaded: When the page is loaded.

Sample Code: Welcome Display

In this simple example, when you click on the page, the message "Hello!" Appears.
Starts with a rectangle to which the MouseLeftButtonDown event is added:

<Canvas etc.
<Rectangle
 Height="100"
 Width="100"
 Fill="Yellow" 
 MouseLeftButtonDown="javascript:hello" 
/>
</Canvas>
JavaScript code that displays the message:
function hello()
{
  alert("Salut!");
}

Click the yellow rectangle:

Sample Code: Changing the Color of a Circle

JavaScript event functions can get two arguments: sender, the object where the event occurs, and args, a list of parameters passed to the function.
So or can use object attributes, associating them with sender, which replaces the object inside the JavaScript function.
In this example, we draw an ellipse, and when you click inside this image, its color changes from yellow to blue.
So that we associate the Fill attribute with sender and assign it a new color.

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Ellipse  
      Height="100" Width="100" 
      Stroke="Black" 
      Strokethickness="10" 
      Fill="Yellow"
      MouseLeftButtonDown="javascript:mouseclic"
/>

</Canvas>

And JavaScript code

function mouseclic(sender, args)
{
   sender.Fill="LightBlue";
}

In fact, the circle must remain blue for it to turn yellow again, an additional command is added:

 MouseLeftButtonDown="javascript:mouseclic"
 MouseLeftButtonDown="javascript:mouseup"

With another JavaScript function:

function mouseup(sender, args)
{
   sender.Fill="Yellow";
}

Viewing files