How can I get the width of screen size in CSS in Zebble for Xamarin?

Question

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
}

score -1 · Accepted Answer · answered May 10 '17 at 17:45

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.

How can I get the width of screen size in CSS in Zebble for Xamarin?

1 Answers1