How can I show an image in the middle of the view in Zebble
I want to create a view like this image (set the image to the middle of the page)
I am using this code
<TextView Id="HeaderIntro" Text="Your device heading from North is:" CssClass="header-intro" />
<TextView Id="Label" Text="waiting for compass..." />
<z-place inside="this" CssClass="CompassViewP">
<ImageView Id="BackgroundImage" Path="Images/GeeksWhiteLogo.png" />
<ImageView Id="PointerImage" Path="Images/CompassPointer.png" Style.Visible="false" />
</z-place>
I wrote css
.CompassViewP {
height: calc("(view.Parent.ActualHeight)");
}
#BackgroundImage {
background-position: center;
}
I've tried using other css like
position:absolute;
top: 50%;
and
vertical-align: middle;
Finally, the following view:
source to share
Your ImageView has no width and height specified, so it gets the size from the image file. You set the background position correctly to the center , but this is not enough because it will be centered within its width, which will be the same as the size of the original image.
Thus, the alignment does not change anything visually, since there is no horizontal space around it to make the "center" meaningful.
To fix this, you must set the ImageView's width to 100%. It's also a good idea to set Padding to secure on small devices that it doesn't attach to the sides. The same goes for vertical clearances.
.CompassViewP {
height: calc("(view.Parent.ActualHeight)");
#BackgroundImage {
background-position: center;
width: 100%;
height: 100%;
padding: 50px;
}
}
source to share