I create a stack and I want to show it in the center of the screen, so I want to set the margin-top and left of the stack depend on the device screen.
I try this code, but it did not work on the devices very well.
<Stack CssClass="MyTestStack">
</Stack>
.MyTestStack
{
background: #039795;
width: 90%;
height: 90%;
margin-top: 10%; //Exception
margin-left: 10%; //Exception
}
To get width or height of the screen in CSS you can use the dynamic c# expression in CSS role and for more information about this, you can see link below. Also, I wrote a sample CSS role for your question like this.
http://zebble.net/docs/dynamic-expressions-in-css
And the code:
.MyTestStack
{
background: #039795;
width: calc("(Zebble.Device.Screen.Height - 50)");
height: calc("(Zebble.Device.Screen.Width - 70)");
margin: 10px 10px 10px 10px;
}
Disclaimer: I am a Zebble project contributor and engage in technical support.