Configure an image

Add an image object and edit its properties.
  1. In
    Project view
    , in
    UI
    , right-click a container to contain the image, and then select
    New
    Drawings
    Image
    .
  2. Select the image to include:
    • In
      Properties
      , next to
      Path
      , select
      Browse
       and select an image to include into your application.
    • In the editor, double-click and select an image to include into your application.
    TIP:
    To find items, start typing the item name to find in
    Select file
    .
    If the file does not appear in
    Select file
    , select
    Import file(s)
     and in
    Import file(s)
    , select the file to import and then choose
    Select
    .
  3. (optional) In
    Properties
    , edit the
    Appearance
     settings:
    • Visible
      . Show the object at runtime.
    • Enabled
      . Enable interaction with the object at runtime.
    • Opacity
      . Opacity level of the object in percentages. Set to
      0
       to make the object transparent.
    • Blink
      . Blink the object at runtime.
    • Rotation
      . Rotate the object around its center point (in arc degrees). Positive values rotate the object clockwise; Negative values rotate the object counterclockwise.
    • Dynamic color
      . Only for SVG images format. Colorize the image with the selected color.
    • Colorization mode
      . Set the colorization mode of the image. The available options include:
      Replace
      ,
      Hue
      ,
      Multiply
      ,
      Add
      .
    • Hit test visible
      . Intercept user selections. False by default - user selections are not intercepted and are passed to the underlying object.
    • Fill mode
      . Select either:
      • Fit
        . The object keeps its original aspect ratio when resized.
      • Stretch
        . The object fills the container and ignores its original aspect ratio when resized.
      • Tile
        . The object keeps its original aspect ratio when resized and repeats the image inside.
  4. (optional) To resize, move, or align the object, see Graphic objects layout.
  5. (optional) In
    Properties
    , set image margins (nine slicing):
    TIP:
    Setting image margins prevents distortions in the peripheral sections of an image when resizing.
    For example, you implement an image that has a black border. By setting image margins, you can make the black border not react to image size changes.
    • Image left margin
      . Size of the left peripheral section of the image to exclude when resizing the image.
    • Image top margin
      . Size of the top peripheral section of the image to exclude when resizing the image.
    • Image right margin
      . Size of the right peripheral section of the image to exclude when resizing the image.
    • Image bottom margin
      . Size of the bottom peripheral section of the image to exclude when resizing the image.
  6. (optional) In
    Events
    , add methods to existing events or add new events and methods. See Events and Methods.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal