Table of Contents

Event directives

Event directives are special attributes that can be used on template nodes handle events.

click

Sets the UI method that will be called when the node is clicked.

Directive name : event:click

The value must be the name of a method.

The method takes as first parameter a IUIEventArgs object. If the node bearing the directive is in a repeat node, the method must take a second parameter corresponding to the iterated element.

Example :

  • Template:
<vertical-layout>
  <text size="extralarge" event:click="HandleClick">
    Title
  </text>
  <popover overlay-id="DetailsPopover">
    <text>
      Details
    </text>
  </popover>
</vertical-layout>
  • HandleClick method:
    • args : IUIEventArgs
ToggleOverlay(new ToggleOverlayOptions("DetailsPopover").WithTarget(args.CurrentTarget));

Arguments

The expected UI method take as first parameter an IUIEventArgs object that provides the following properties and methods:

  • object CurrentTarget : Gets the element to which the event handler has been attached.
  • void StopPropagation() : Prevents the propagation of the current event.

mouseenter

Sets the UI method that will be called when the mouse pointer enters the node.

Directive name : event:mouseenter

The value must be the name of a method.

The method takes as first parameter a IUIEventArgs object. If the node bearing the directive is in a repeat node, the method must take a second parameter corresponding to the iterated element.

This event is equivalent to the mouseenter event in web development. It is triggered when the mouse pointer enters the element's boundaries.

Example :

  • Template:
<vertical-layout>
  <text size="large" event:mouseenter="HandleMouseEnter">
    Hover over me
  </text>
</vertical-layout>
  • HandleMouseEnter method:
    • args : IUIEventArgs
// UIResources.Core.MouseEnterTitle (Scope=Frontend) => "Mouse Enter"
// UIResources.Core.MouseEnterMessage (Scope=Frontend) => "Mouse entered the element"
ShowToast(MessageType.Info, UIResources.Core.MouseEnterTitle, UIResources.Core.MouseEnterMessage);

Arguments

The expected UI method take as first parameter an IUIEventArgs object that provides the following properties and methods:

  • object CurrentTarget : Gets the element to which the event handler has been attached.
  • void StopPropagation() : Prevents the propagation of the current event. Note: This method has no effect for mouseenter events.

mouseleave

Sets the UI method that will be called when the mouse pointer leaves the node.

Directive name : event:mouseleave

The value must be the name of a method.

The method takes as first parameter a IUIEventArgs object. If the node bearing the directive is in a repeat node, the method must take a second parameter corresponding to the iterated element.

This event is equivalent to the mouseleave event in web development. It is triggered when the mouse pointer leaves the element's boundaries.

Example :

  • Template:
<vertical-layout>
  <text size="large" event:mouseleave="HandleMouseLeave">
    Mouse will leave me
  </text>
</vertical-layout>
  • HandleMouseLeave method:
    • args : IUIEventArgs
// UIResources.Core.MouseLeaveTitle (Scope=Frontend) => "Mouse Leave"
// UIResources.Core.MouseLeaveMessage (Scope=Frontend) => "Mouse left the element"
ShowToast(MessageType.Info, UIResources.Core.MouseLeaveTitle, UIResources.Core.MouseLeaveMessage);

Arguments

The expected UI method take as first parameter an IUIEventArgs object that provides the following properties and methods:

  • object CurrentTarget : Gets the element to which the event handler has been attached.
  • void StopPropagation() : Prevents the propagation of the current event. Note: This method has no effect for mouseleave events.

resize

Sets the UI method that will be called every time the size actually rendered for the node changes.

Directive name : event:resize

The value must be the name of a method.

The method takes as first parameter a IResizeEventArgs object. If the node bearing the directive is in a repeat node, the method must take a second parameter corresponding to the iterated element.

Unlike the other event directives, this one does not listen to a web event: the node is observed, and the method is called once the layout has been computed, then on every layout change. A size identical to the previous one is never reported twice.

Example :

  • Template:
<vertical-layout event:resize="HandleContainerSizeChanged">
  <datagrid />
</vertical-layout>
  • HandleContainerSizeChanged method:
    • args : IResizeEventArgs
Fields.ShowSideBySide = args.Size.Width > 900;

In this example, the HandleContainerSizeChanged method is called every time the vertical layout is resized, and decides whether the content should be displayed side by side.

Arguments

The expected UI method take as first parameter an IResizeEventArgs object that provides the following property:

  • IUIElementSize Size : Gets the size actually rendered for the node, carrying its Width and Height in pixels as decimal values.

The size is the node's border box: padding and border are included, margin is not.

To only store the size, use the layout:rendered-size directive instead. Both directives report the same size through the same mechanism, so a node uses one or the other, never both at once.

Warning

If the layout only needs to adapt to the viewport size and not to one specific container, prefer using @Viewport in UI template or Window.Current.Viewport in UI code.