Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
hungcotac
Posts: 85
Registered: ‎01-05-2013
My Device: BB10

ImageView and ScrollView problem

I want to have and element like that

ScrollView {
                        preferredWidth: 768
                        preferredHeight: 1000
                       
                        scrollViewProperties {
                            scrollMode: ScrollMode.Both
                           
                            pinchToZoomEnabled: true
                        }
                        ImageView {
                           
                            image: ListItemData.image
                            visible: ! ListItemData.loading && ListItemData.label == ""
                        }

1. That an ScrollView wraped an ImageView and now i want an scale method that resize (stretch or shrink not crop) image to fit width and still keep aspect ratio (stretch or shink both width and height with same ratio). 

 

2. image is center vertical aligment. 

 

 

 

Developer
hungcotac
Posts: 85
Registered: ‎01-05-2013
My Device: BB10

Re: ImageView and ScrollView problem

I try every scaling method but no one of them can handle it

Developer
hungcotac
Posts: 85
Registered: ‎01-05-2013
My Device: BB10

any one help me??

 
Developer
torpesco
Posts: 121
Registered: ‎01-29-2011
My Device: Z10, PlayBook

Re: ImageView and ScrollView problem

Look at "initialScalingMethod" in ScrollViewProperties. Sounds like you might want ScalingMethod::AspectFit (C++ names, not sure QML name).

 

https://developer.blackberry.com/cascades/reference/bb__cascades__scrollviewproperties.html

Developer
torpesco
Posts: 121
Registered: ‎01-29-2011
My Device: Z10, PlayBook

Re: ImageView and ScrollView problem

... Except I just gave it a quick try and when I try to set an initial scaling method, the picture doesn't display. I just get a black screen. When I don't use it, I just get the unscaled image. (I'm using the simulator.)

Developer
hungcotac
Posts: 85
Registered: ‎01-05-2013
My Device: BB10

Re: ImageView and ScrollView problem

[ Edited ]

can you give your code i have code like that but it doesn't work. only display an unscale image at top left corner

 

ScrollView {
                        preferredWidth: 768
                        preferredHeight: 900
                        verticalAlignment: VerticalAlignment.Center
                        scrollViewProperties {
                            scrollMode: ScrollMode.Both
                            initialScalingMethod: ScalingMethod.AspectFit
                            pinchToZoomEnabled: true
                        }
                        ImageView {
                            image: ListItemData.image
                            visible: ! ListItemData.loading && ListItemData.label == ""
                        }
                    }

 

Developer
torpesco
Posts: 121
Registered: ‎01-29-2011
My Device: Z10, PlayBook

Re: ImageView and ScrollView problem

I wish I could give you a working example. I'm using C++ for mine. If I start out with a ScrollView that doesn't use the initial scaling method, I see the unscaled image. As soon as I try to assign an initial scaling method, I just get a black screen. :smileyindifferent:

Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

Re: ImageView and ScrollView problem

[ Edited ]

Set the scaling method to aspect fit. Set the horizontal alignment to fill.

 

ScrollView {
    horizontalAlignment: HorizontalAlignment.Fill
    verticalAlignment: VerticalAlignment.Fill
    ImageView {
        image: ListItemData.image horizontalAlignment: HorizontalAlignment.Fill scalingMethod: ScalingMethod.AspectFit } }

 

Developer
torpesco
Posts: 121
Registered: ‎01-29-2011
My Device: Z10, PlayBook

Re: ImageView and ScrollView problem

Nice, thanks! And not only on the scroll view, but the container it's in (in my case).

 

Unfortunately, the results seem spotty for me. I'm using "AspectFill", yet it appears to be doing "AspectFit" sometimes -- and not scaling at all other times. Images are also not centred. If the image looks like AspectFit was applied, it's displayed at the top or left with all the black space at the bottom or right. If the image looks more like AspectFill was  applied, it seems to start displaying at the top-left, rather than centering the image the way a simple ImageView in a Container would.

 

At least with the latter case, playing around with setting the center point could help. Not sure what to try to resolve the inconsistencey in actually applying the initial scaling method to new content. Not reusing the scroll view?

Developer
hungcotac
Posts: 85
Registered: ‎01-05-2013
My Device: BB10

Re: ImageView and ScrollView problem

No. i have already try it. but it just center alignment my picture without scale