Cascades Development

[itcraps]

I have a horizontal StackLayout consist of 4 ImageButtons.

First, I need all the buttons to share an equal space, so I set width of each button to DisplayWidth/4.

This resulted in Stretched(widened) image.

Is there anyway to keep ImageButton's Image Aspect Ratio ? Thanksss

Keep ImageButton'ss Image Aspect Ratio

[Megha_9_dec]

Hi,

First you should use spaceQuota property of Stack layout for all 4 ImageButtons. set spaceQuota for all of them equal ..say for e.g 1.0

import bb.cascades 1.0

// creates one page with a label

Page {
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_big.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_small.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_big.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_small.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
    }
}

And next, If your Images are getting shrinked..you have to change your Images having desired size Because even if you use preferred height & width for ImageButtons or go with spaceQuota, even if you use ImageView , In all cases this will happen.

[itcraps]

I tried that before and it resulted in stretched image.

So there's no other way eh?

[Megha_9_dec]

Did you try changing Image size? You need to re-size the Image manually (and not programmatic-ally) give a try to MS picture manager. But I feel you need wider Image so editing won't help.

[itcraps]

I need the app to show up well in all screen sizes. So i guess manually changing the image is not good.

Thanks though..

[_NishantShah]

Try this:

import bb.cascades 1.0
Page {
 Container {
 layout: StackLayout {
 orientation: LayoutOrientation.LeftToRight
 }
 Container {
 layoutProperties: StackLayoutProperties {
 spaceQuota: 1.0
 }
 ImageButton {
 horizontalAlignment: HorizontalAlignment.Center
 defaultImageSource: "asset:///images/photogallery_icn.png"
 }
 }
 Container {
 layoutProperties: StackLayoutProperties {
 spaceQuota: 1.0
 }
 ImageButton {
 horizontalAlignment: HorizontalAlignment.Center
 defaultImageSource: "asset:///images/photogallery_icn.png"
 }
 }
 Container {
 layoutProperties: StackLayoutProperties {
 spaceQuota: 1.0
 }
 ImageButton {
 horizontalAlignment: HorizontalAlignment.Center
 defaultImageSource: "asset:///images/photogallery_icn.png"
 }
 }
 Container {
 layoutProperties: StackLayoutProperties {
 spaceQuota: 1.0
 }
 ImageButton {
 horizontalAlignment: HorizontalAlignment.Center
 defaultImageSource: "asset:///images/photogallery_icn.png"
 }
 }
 }
}

This won't stretch the images.

Regards,

Nishant Shah