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
Posts: 139
Registered: ‎05-24-2011
My Device: Z30 running 10.2 and Playbook 4GLTE running OS2.1
My Carrier: rogers

image view won't fill the visible area

hey gang,

 

I have a qml page for displaying images.  i push it into a navigation pane when needed.

 

the thing i'm struggling with is that the ImageView won't fill the available area on the screen.

 

my page is really basic.. essentially:

 

Page {
id: myPage
Container { horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill id: myContainer background: Color.Gray ImageView { id: myImageViewer // minHeight: myAppHelper.screenHeight // minWidth: myAppHelper.screenWidth verticalAlignment: VerticalAlignment.Fill horizontalAlignment: HorizontalAlignment.Fill // preferredHeight: 750 // preferredWidth: 1230 imageSource: "asset:///images/picture.jpg" scalingMethod: ScalingMethod.AspectFit
onCreationCompleted: { // onCreationCompleted start console.log("APP: Entering onCreationCompleted().."); } // onCreationCompleted end } // end of ImageView
} // end of Container
} //end of Page

 I've tried setting the preferred Height/Width, i've also tried getting the screen height and width in my c++ helper class.

I just can't get the image view to fill the whole display area on the screen.

 

what am i doing wrong?

bron: a cron-like scheduler for BlackBerry 10
http://apps.oddelement.com
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: image view won't fill the visible area

[ Edited ]

Hi,

 

Could you try:

 

Page {
  Container {
    ImageView {
      preferredWidth: Infinity
      preferredHeight: Infinity
      imageSource: "asset:///images/picture.jpg"
      scalingMethod: ScalingMethod.AspectFit
    }
  }
}

 VerticalAlignment.Fill won't work for vertical StackLayout, but "preferredHeight: Infinity" should work.


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 85
Registered: ‎06-22-2013
My Device: N/A
My Carrier: N/A

Re: image view won't fill the visible area

Use Dock layout for the Container, give the imageView and the Container preferedWidth and hight(The Same fo both)

 

I think that might help. 

Highlighted
Developer
Posts: 139
Registered: ‎05-24-2011
My Device: Z30 running 10.2 and Playbook 4GLTE running OS2.1
My Carrier: rogers

Re: image view won't fill the visible area

[ Edited ]

i tried each suggestion as well as both together, and nothing worked.  the ImageView still comes in about 2/3 the size of the container...

 

any other ideas?

 

EDIT: i also have a timer control on the page which is inside the container.  the timer was registered with qmlRegisterType().  I set the visible property to TRUE, which i think means that no space is allocated to this control on the page.. i don't know if that makes a difference..

bron: a cron-like scheduler for BlackBerry 10
http://apps.oddelement.com
Developer
Posts: 139
Registered: ‎05-24-2011
My Device: Z30 running 10.2 and Playbook 4GLTE running OS2.1
My Carrier: rogers

Re: image view won't fill the visible area

no ideas?

bron: a cron-like scheduler for BlackBerry 10
http://apps.oddelement.com
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: image view won't fill the visible area

I think unless you have an image which is a direct ratio dimension-wise of the available screen real estate you will not get a full screen with AspectFill.

 

Try changing the Container to DockLayout and setting the ImageView Width and Height to the screensize, with scaling set to Fill. First of all hard code the values to see if it works if it does then switch it later to using LayoutUpdateHandler and/or DisplayInfo to dynamically change the width/height.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: image view won't fill the visible area

[ Edited ]

I've also tested zmey's solution and it definately works.

 

Did you mean to say set Visible to true? As obviously this means that it IS visible only setting to false will remove it from the scene graph. However if it is only a QTimer then this is not a UI componant and will not be in the scene graph.

 

[Edit] No disrespect to zmey (as this was just an ImageView) but I try and avoid using Infinity as it messes up more complex UI controls (especially ListViews and descendants of Containers), instead use DisplayInfo and LayoutUpdateHandlers to cope with screen orientation and size changes for anything more complex than this.

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: image view won't fill the visible area

I found when trying to make a something be the dimesions you desire setting min/max dimesions works best

 

(DisplayInfo gives screen dimensions) intialize from c++ there are examples on the forums

DisplayInfo is a context property

minWidth: DisplayInfo.width
minHeight: DisplayInfo.height

 

also try using a ScaleTransition to scale the image and see if you can fill the screen that way.  scaling may not be desired but if the ScaleTransition can't fill the screen either that would indicate a container somewhere is restricting the size.

 

 

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: image view won't fill the visible area

The downside of using LayoutUpdateHandler is that it lags a few frames, which is visually noticeable. Smiley Sad Especially on screen rotation when the screen jumps and looks buggy.

I think DisplayInfo doesn't account for screen rotation too.

So, I try to avoid them when possible.

Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: image view won't fill the visible area

[ Edited ]

I agree with zmey on avoiding layoutUpdateHandler it's not reliable. (+only updates when a size changes)

DisplayInfo doesn't account for layout changes so to counter that when you go from portrait to landscape simply set any height to DisplayInfo.width and any width to DisplayInfo.height & vice versa. I use this a lot haven't had any caveats