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.
    • On the canvas, 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
    , set the image appearance:
    • Visible
      . Show the image at runtime.
    • Enabled
      . Enable interaction with the image at runtime.
    • Opacity
      . Set the image opacity level (in percentages).
    • Blink
      . Blink the image at runtime.
    • Rotation
      . Rotate the image around its center point (in arc degrees). Positive values rotate the image clockwise; Negative values rotate the image counterclockwise.
    • Dynamic color
      . Only for SVG images format. Colorize the image with the selected color.
    • Colorization mode
      . Set the colorization mode of the image for
      Dynamic color
      .
    • 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 image keeps its original aspect ration when resized.
      • Stretch
        . The image fills the container and ignores its original aspect ratio when resized.
  4. (optional) To resize, move, or align the image, see Graphic objects layout.
  5. (optional) In
    Properties
    , set image margins (nine slicling):
    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.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.
Normal