132 views
in GUI Development by

Hello, i have this problem creating a custom config of a pushbutton.

The Button doesn't resize the icon inside, instead "folds" it like this.

 

the configuration:

1 Answer

0 votes
by
 
Best answer

Hello Riccardo,

I'm not able to reproduce the issue. If the icon does not fit inside the button it will be clipped but never split as shown in the first screenshot. Therefore I suppose it is not the icon but the Face bitmap intended to fill the button's area. In such case: to support flexible resizable buttons, the content of this Face bitmap (the original image) has to be designed from 9-slices. At the runtime the slices are composed together to fill the button's area. See the section Specify bitmaps and colors for the Push Button's face image.

However, from the second screenshot containing the configuration, it seems it is the original Push Button Medium configuration using the default button Face bitmap. I'm confused ... Can you please check again the screenshots or provide an example demonstrating the issue?

Best regards

Paul Banach

by

Thanks, so i'll clarify better.

I posted thw configuration you said for error.

So the original image size is like this.

 

When i resize it becomes like this.

Here are the configuration of the button and the appearance.

 

I'll investigate tryng with a different bitmap. 

 

 

 

 

by

Different bitmap.

Original

Resized

by

Hello Riccardo,

as already presumed, you have assigned the icon to the Face property (see my answer above). In such case the button considers the bitmap as being composed of 9-slices and uses the slices to fill its entire area. Your bitmap, (the green circle, for example) does not follow the design rules for the 9-slice bitmaps. The results are thus so unusual - but correct and expected.

What can you do?

Option 1: Using the property FaceLayout you configure how the Face bitmap should be displayed. Per default FaceLayout is configured to fill the Push Button entirely with the 9-slices of the Face bitmap. When you disable in FaceLayout the options ResizeHorz and ResizeVert, the effect will disappear. Now the bitmap retains its original size and it is centred within the button. Using other FaceLayout options you can control how the bitmap is aligned within the button's area. See also the section Configure how to arrange the Push Button's face image.

Option 2: Instead of providing the Face bitmap in the configuration object provide it directly in the Push Button instance as Icon. See the section Specify the icon bitmap for the Push Button. The main difference here: with this approach you can (and you have to) specify individual icons for each button. With the Face bitmap approach you prepare a configuration which is common for all buttons referencing this configuration.

The Button doesn't resize the icon inside, instead "folds" it like this.

Do you expect the green icon to resize when the button size changes? If yes, follow the option 2 and set in the property IconAlignment the option ScaleToFill, ScaleToFit or StretchToFill depending on the desired scaling effect. See also the section Configure how to arrange the Push Button's icon image.

I hope it helps you further.

Best regards

Paul

by

Do you expect the green icon to resize when the button size changes? If yes, follow the option 2 and set in the property IconAlignment the option ScaleToFill, ScaleToFit or StretchToFill depending on the desired scaling effect. See also the section Configure how to arrange the Push Button's icon image.

I can't find IconAlignment, ScaleToFill, ScaleToFit or StretchToFill, are them in the pushbutton configuration?

by

Yes, as explained in the referenced documentation, the property IconAlignment (as well as FaceLayout) belongs to the configuration object. Please see your screenshots:

ScaleToFill, ScaleToFit and StretchToFill are options of the property IconAlignment. You see them when you expand the property by clicking on the triangle symbol (see also Inspector Assistant window):

Best regards

Paul

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...