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

Answered Closed
0
0

Hi

I added a png to a button. The png is visible on the button, but it ist stretched to fit the height of the button which looks quite awful. What can i do?

  • You must to post comments
Best Answer
0
0

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

 

  • You must to post comments
0
0

Hi Luca

the problem is, that small images are scaled up, as far as I saw all images smaller than 24×24 px are scaled up.  Is there a way to prevent this behavior?

  • You must to post comments
0
0

Hi Gunter,

I have added a small example here: https://wisej.com/examples that shows some of the many options and combinations with images. Looks like this:

If it sill doesn’t work for you please attach a sample app.

Best,
Luca

  • You must to post comments
Showing 3 results