Button with png, .the png is visible on the button, but it ist stretched. #352

Activity

1. itg-assistant commented on Jun 12, 2026

   

   itg-assistantbot

   on Jun 12, 2026

   Author

   More actions

   Luca answered 2016-11-04 14:38:03 UTC

   Hi Gunter,

   I have added a small example here: http://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
2. itg-assistant

   added

   BugSomething is broken or behaving unexpectedly.Something is broken or behaving unexpectedly.

   on Jun 12, 2026
3. itg-assistant commented on Jun 12, 2026

   

   itg-assistantbot

   on Jun 12, 2026

   Author

   More actions

   Gunter answered 2016-11-04 21:52:50 UTC

   Hi Luca

   the problem is, that small images are scaled up, as far as I saw all images smaller than 24x24 px are scaled up.  Is there a way to prevent this behavior?
4. itg-assistant commented on Jun 12, 2026

   

   itg-assistantbot

   on Jun 12, 2026

   Author

   More actions

   Luca answered 2016-11-04 22:23:08 UTC

   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:

   • 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.

   • 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-16x16" inheriting from "button" (from the active theme) and only altering the icon size - assign "button-16x16" 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
5. itg-assistant

   closed this as completedon Jun 12, 2026