[SOLVED] Button with png, .the png is visible on the button, but it ist stretched.

The default size of the image is set in the theme. The reason is that we support SVG icons and usually SVG icons have a very large natural size. Also, it’s a lot more convenient to normalize the size instead of having to manually resize all icons as you’d have to do with WinForms.

However, there are several ways (as usual with Wisej) to personalize the default behavior, here are two alternatives:

1. Add an ImageList component and assign it to the button(s). The button will resize all images to match the size set in the image list. (see example  linked before). You don’t have to add the images to the image list, once it’s assigned to the button it works for all images assigned to the button or to the image list.
2. Or add a theme mixin under /Themes to add/alter the currently loaded theme. This is what to use in the mixin file (name it [name you like].mixin.theme) to create a new appearance named “button-16×16” inheriting from “button” (from the active theme) and only altering the icon size – assign “button-16×16” to the AppearanceKey of the button to use this variation:

{
  "appearances": {
  // button with 16x16 icons
    "button-16x16": {
      "inherit": "button",
      "components": {
        "icon": {
          "states": {
            "default": {
              "properties": {
               "scale": true,
               "width": 16,
               "height": 16
              }
            }
          }
        }
      }
    }
  }
}

Note the “scale”:true property. If you set it to false, the theme engine tries to maintain the aspect ratio of the image and you can enforce the height or the width.

Using the image list allows you to reuse the same list for multiple buttons and to choose the size for each list – and you don’t have to resize the images.

Using the theme mixin lets you control more theme aspects, and you can create a button class with the customized appearance.

HTH

Best,

Luca