.netxamarinxamarin.androidxamarin-zebblezebble

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


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
}

Solution

  • 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.