Zebble
  • About Zebble
  • Compare
  • Documentation
  • Themes
  • Plug-ins
  • Contact Us

    • What is Zebble?
    • Structure of a Zebble solution
    • Zebble Designer (UWP)
    • Installing - Introduction
    • Change log
    • Introduction
    • ViewModel development
    • VM.EXE
    • View development
    • Dialogs
    • Lists and Collections
    • Tips and shortcuts
    • List views
    • ViewModel testing
    • Automatic Views
    • View development process
    • Hello World - Core Concepts
    • Layout: Sizing & Positioning
    • Event handling
    • Navigation
    • Alerts, Dialog, Prompt and toast
    • View lifecycle
    • Managing Files & Resources
    • Config & Debugging
    • Forms
    • Page templates
    • Device API
    • Animations
    • Web Api - Part 1 (reading data)
    • Web Api - Part 2 (post and delete)
    • Web Api - Part 3 (server vs client domain model)
    • Gesture events
    • View class
    • Zebble Markup (.zbl files)
    • Data Binding and MVVM
    • Stack class
    • Sizing and positioning
    • Layout examples
    • ScrollView class
    • Page class
    • Styling in Zebble
    • CSS property mapping to Zebble
    • Supported selectors
    • Zebble CSS: Under the hood
    • Inline styling
    • CSS real-time updates
    • Dynamic expressions in CSS
    • Gradient background colours
    • CSS Pseudo-classes support
    • Using Bold and Light Fonts in Zebble
    • Rotation in Zebble
    • Using custom fonts in Zebble
    • Flashing on tap using AutoFlash
    • Button
    • Carousel class
    • Checkbox class
    • DatePicker
    • Drawing class
    • FilePicker class
    • Grid class
    • IconButton class
    • ImageView
    • ItemPicker class
    • ListView & Grid classes
    • OptionsList
    • SearchInput class
    • Slider class
    • Switch class
    • Tabs Class
    • TextInput class
    • TextView
    • TimePicker
    • TreeView
    • Waiting Indicator
    • WebView class (displaying html)
    • C# Methods and Properties Of UI Components
    • Nav.Forward() vs Nav.Go()
    • Passing parameters to the destination page
    • Going Back
    • Showing Popup pages
    • Waiting class
    • Hardware Back button (e.g. Android)
    • NavigationBar class
    • Tabs class
    • Caching (pages)
    • Navigation without event handler
    • Use the Windows version
    • Logging messages for Debugging
    • Debugging Zebble/Plugin
    • Exception handling in Zebble
    • Debugging layout and styles
    • Zebble Device API
    • Device.Screen and orientation (landscape | portrait)
    • Code that should run on a specific platform
    • Using Lamp (aka Flash, LED and Torch)
    • Using Compass (Smooth compass)
    • Using Accelerometer (device angle)
    • Using Gyroscope (device motion speed)
    • How to Vibrate the device?
    • Launching the device browser
    • Finding device model and manufacturer
    • Responding to System events
    • Handling device shake event
    • Permissions
    • Permissions declaration (manifest files)
    • Sharing
    • Prompt for rating the app
    • Finding if Internet connection is available
    • Device messaging (Make a phone call, send SMS or Email)
    • Showing a local notification
    • Copying to Clipboard
    • Accessing device contacts
    • Reading and writing into Gallery (albums)
    • Playing & Recording Audio
    • Cache and temp files and folders
    • C# async / await
    • Understanding Zebble Threading
    • Debugging - the StackTrace problem
    • Not awaiting (running in parallel)
    • Timer (interval / scheduled running)
    • Post-render changes to the UI (dynamic)
    • Introduction of Geo location
    • Map & Location Services
    • Launch directions to a location (external)
    • Getting current Location
    • Tracking user location
    • Device.Media: Taking and picking photos
    • Playing an audio file
    • VideoPlayer class
    • Augmented reality
    • Recording audio
    • Virtual Reality
    • Speech Recognition
    • Recording or picking video
    • Playing remote videos in iOS
    • Text to speech
    • Introduction to the importance of Mobile Testing
    • Why and what to test
    • Testing mobile apps on different devices
    • Testing mobile apps
    • Xamarin Profiler
    • Performance optimization
    • Moving a view to another container at run-time
    • Attaching custom data (tag) to objects
    • Saving a view as image
    • Naming best practices
    • Fastest way to update your nuget package
    • Tips for Clean and Brief code
    • Splash screen and icon generation
    • Advice for passing Approval
    • Options for iOS app distribution
    • Test Release (internal and UAT)
    • Application Icons in IOS
    • Submitting to App Store
    • Releasing to App Store
    • Crash reporting
    • Optimized Release Build
    • Android - Generating an APK for manual installation
    • Payment (subscriptions & in-app purchases)
    • Introduction to push notifications
    • Registration process (App)
    • Push notification setup - iOS
    • Push notification setup - Android
    • Push notification setup - Windows
    • Sending a push message from the web app
    • Introduction
    • Connecting Zebble to Web API
    • Installation
    • Creating an API class
    • GET APIs
    • Calling a GET API (in the mobile app)
    • POST, PUT, PATCH and DELETE APIs
    • Domain Model
    • Web API and Authentication
    • Versioning
    • Uniquely identifying installations (token)
    • Settings file: config.xml
    • Standard Zebble settings
    • Login/Register with Facebook
    • Creating a composite component / plugin
    • Creating a Zebble component using Html and Javascript
    • CustomRenderedView: Third-party native components / plugins
    • Mapbox
    • Naming considerations
    • Random problems?
    • Display Keyboard for Visual Studio Android Emulator
    • iOS goes mad?
    • Configuring a Windows phone for ad-hoc testing
    • Fixing Error DEP0001 : Unexpected Error: -2147009287 while deploying Windows UWP app on device
    • Fixing Error DEP0001 : Unexpected Error: -1988945906 while deploying Windows UWP app on device
    • Unable tp Connect to the Mac agent from Visual Studio
    • Can't connect to the Mac agent from Visual Studio?
    • Choosing the CPU architecture
    • Zebble CLI
    • How to add a Device API to Zebble source?
    • About Automated UI testing
    • What should we test in mobile applications?
    • Creating an Automated UI Test in Zebble



Layout examples


Sample 1:

1.PNG

In markup:

<Stack>
    <TextView Text="1" CssClass="box header" />
    <Row>
        <TextView Text="3" CssClass="box left" />
        <TextView Text="4" CssClass="box middle" />
        <TextView Text="5" CssClass="box right" />
    </Row>
    <TextView Text="2" CssClass="box footer" />
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue }
.footer { background: orange; }
.left { background: green; }
.middle { background: brown; }
.right { background: purple; }

Elaboration of rendering logic:

  • The root container is a vertical stack. So its three direct children (rows) are automatically positioned each at the correct Y position one after another.
  • The middle child is itself a horizontal stack (Row). So its children (3, 4 and 5) are automatically positioned next to each other with the correct X.
  • No explicit Width is specified for any object. So they each take as much width as they can. For 1 and 2 this means 100% of the parent. For 3, 4 and 5, they take an equal share of the available container's space.
  • The Height of all text views is explicitly set as 100px.
  • The Height of the middle row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (3, 4 and 5) have 100px.
  • The Height of the root object (vertical stack) is determined by the sum of its children, which is 300px (100px for 1, 100px for 2 and 100px for the horizontal stack).

Sample 2:

2.PNG

In markup:

<Stack>
   <TextView Text="1" CssClass="box header" />
   <Row>
       <TextView Text="3" CssClass="box left" />
       <TextView Text="4" CssClass="box middle" />
       <TextView Text="5" CssClass="box right" />
    </Row>
    <TextView Text="2" CssClass="box footer" />
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; } .footer { background: orange; }
.left { background: green; width: 25%; }
.middle { background: brown; width: 50%; }
.right { background: purple; width: 25%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its three direct children (rows) are automatically positioned each at the correct Y position one after another.
- The middle child is itself a horizontal stack. So its children (3, 4 and 5) are automatically positioned next to each other with the correct X.
- There are explicit Width for each child. For 1 and 3 this means 25% of the parent. For 4 this means 50% of the parent.
- The Height of all text views is explicitly set as 100px.
- The Height of the middle row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (3, 4 and 5) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 300px (100px for 1, 100px for 2 and 100px for the horizontal stack).


Sample 3:

3.PNG

In markup:

<Stack>
     <TextView Text="1" CssClass="box header" />
     <Row>
         <TextView Text="3" CssClass="box left" />
         <TextView Text="4" CssClass="box right" />
     </Row>
     <TextView Text="2" CssClass="box footer" />
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.footer { background: orange; }
.left { background: green; width: 50%; }
.right { background: purple; width: 50%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its three direct children (rows) are automatically positioned each at the correct Y position one after another.
- The middle child is itself a horizontal stack. So its children (3 and 4) are automatically positioned next to each other with the correct X.
- There are explicit Width for each child and it means 50% of the parent for each one.
- The Height of all text views is explicitly set as 100px.
- The Height of the middle row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (3 and 4) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 300px (100px for 1, 100px for 2 and 100px for the horizontal stack).


Sample 4:

4.PNG

In markup:

<Stack>
     <TextView Text="1" CssClass="box header" />
     <Row>
         <TextView Text="3" CssClass="box left" />
         <TextView Text="4" CssClass="box right" />
     </Row>
     <TextView Text="2" CssClass="box footer" />
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.footer { background: orange; }
.left { background: green; width: 30%; }
.right { background: purple; width: 70%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its three direct children (rows) are automatically positioned each at the correct Y position one after another.
- The middle child is itself a horizontal stack. So its children (3 and 4) are automatically positioned next to each other with the correct X.
- There are explicit Width for each child. For 3 and 4 these mean 30% and 70% of the parent respectively.
- The Height of all text views is explicitly set as 100px.
- The Height of the middle row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (3 and 4) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 300px (100px for 1, 100px for 2 and 100px for the horizontal stack).


Sample 5:

5.PNG

In markup:

<Stack>
    <TextView Text="1" CssClass="box header" />
    <Row>
        <TextView Text="3" CssClass="box left" />
        <TextView Text="4" CssClass="box right" />
    </Row>
    <TextView Text="2" CssClass="box footer" />
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.footer { background: orange; }
.left { background: green; width: 70%; }
.right { background: purple; width: 30%; }

Rendering logic:

- The root container is a vertical stack. So its three direct children (rows) are automatically positioned each at the correct Y position one after another.
- The middle child is itself a horizontal stack. So its children (3 and 4) are automatically positioned next to each other with the correct X.
- There are explicit Width for each child. For 3 and 4 these mean 70% and 30% of the parent respectively.
- The Height of all text views is explicitly set as 100px.
- The Height of the middle row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (3 and 4) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 300px (100px for 1, 100px for 2 and 100px for the horizontal stack).


Sample 6:

6.PNG

In markup:

<Stack>
    <TextView Text="1" CssClass="box header" />
    <Row>
         <TextView Text="3" CssClass="box topleft" />
         <TextView Text="4" CssClass="box topmiddle" />
         <TextView Text="5" CssClass="box topright" />
     </Row>
     <Row>
         <TextView Text="6" CssClass="box downleft" />
         <TextView Text="7" CssClass="box downmiddle" />
         <TextView Text="8" CssClass="box downright" />
     </Row>
     <TextView Text="2" CssClass="box footer" />
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.footer { background: orange; }
.topleft { background: green; width: 34%; }
.topmiddle { background: brown; width: 32%; }
.topright { background: purple; width: 34%; }
.downleft { background: silver; width: 34%; }
.downmiddle { background: gold; width: 32%; }
.downright { background: gray; width: 34%; }

Rendering logic:

- The root container is a vertical stack. So its four direct children (rows) are automatically positioned each at the correct Y position one after another.
- The second and third children are themselves three horizontal stacks. - So the children of second row (3, 4 and 5) and the children of third row (6, 7 and 8) are automatically positioned next to each other with the correct X.
- There are explicit Width for each child. The left, middle and third child have 34%, 32% and 34% of parent respectively.
- The Height of all text views is explicitly set as 100px.
- The Height of the middle rows (horizontal stacks) are determined by their tallest direct child which is 100px as in this case all their children (3,4,5,6,7 and 8) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 400px (100px for 1, 100px for 2 and 200px for the horizontal stacks).


Sample 7:

7.PNG

In markup:

<Stack>
     <Row>
           <TextView Text="1" CssClass="box topleft" />
           <TextView Text="2" CssClass="box topmiddle" />
           <TextView Text="3" CssClass="box topright" />
     </Row>
     <Row>
           <TextView Text="4" CssClass="box downleft" />
           <TextView Text="5" CssClass="box downmiddle" />
           <TextView Text="6" CssClass="box downright" />
      </Row>
/Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.topleft { background: green; width: 34%; }
.topmiddle { background: brown; width: 32%; }
.topright { background: purple; width: 34%; }
.downleft { background: silver; width: 34%; }
.downmiddle { background: gold; width: 32%; }
.downright { background: gray; width: 34%; }

Rendering logic:

- The root container is a vertical stack. So its two direct children (rows) are horizontal stack and automatically positioned each at the correct Y position one after another in each row.
- First row has itself three textview (1,2 and 3) which have explicit Width 34%, 32% and 34% respectively and they are automatically positioned next to each other with the correct X.
- Second row has itself three textview (4,5 and 6) which have explicit Width 34%, 32% and 34% respectively and they are automatically positioned next to each other with the correct X.
- The Height of all text views is explicitly set as 100px.
- The Height of the each row (horizontal stack) is determined by their tallest direct child which is 100px as in this case all their children have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px for the horizontal stacks.


Sample 8:

8.PNG

In markup:

<Stack>
     <TextView Text="1" CssClass="box header" />
     <Row>
          <TextView Text="2" CssClass="box left" />
          <TextView Text="3" CssClass="box middle" />
          <TextView Text="4" CssClass="box right" />
      </Row>
/Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.left { background: green; width: 34%; }
.middle { background: brown; width: 32%; }
.right { background: purple; width: 34%; }

Rendering logic:

- The root container is a vertical stack. So its two direct children (rows) are automatically positioned each at the correct Y position one after another.
- The first child is itself a text view (1).
- The second child is itself a horizontal stack. So its children (2, 3 and 4) are automatically positioned next to each other with the correct X.
- Each child of second row has explicit Width 34%, 32% and 34% respectively and they are automatically positioned next to each other with the correct X.
- The Height of all text views is explicitly set as 100px.
- The Height of the second row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (2, 3 and 4) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px (100px for 1, 100px for the horizontal stack).


Sample 9:

9.PNG

In markup:

<Stack>
    <TextView Text="1" CssClass="box header" />
    <Row>
         <TextView Text="2" CssClass="box left" />
         <TextView Text="3" CssClass="box middle" />
         <TextView Text="4" CssClass="box right" />
     </Row>
/Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.left { background: green; width: 34%; }
.middle { background: brown; width: 32%; }
.right { background: purple; width: 34%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its two direct children (rows) are automatically positioned each at the correct Y position one after another.
- The first child is itself a text view (1).
- The second child is itself a horizontal stack. So its children (2, 3 and 4) are automatically positioned next to each other with the correct X.
- Each child of second row has explicit Width 34%, 32% and 34% respectively and they are automatically positioned next to each other with the correct X.
- The Height of all text views is explicitly set as 100px.
- The Height of the second row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (2, 3 and 4) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px (100px for 1, 100px for the horizontal stack).


Sample 10:

10.PNG

In markup:

<Stack>
     <TextView Text="1" CssClass="box header" />
     <Row>
          <TextView Text="2" CssClass="box left" />
          <TextView Text="3" CssClass="box right" />
     </Row>
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.left { background: green; width: 30%; }
.right { background: purple; width: 70%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its two direct children (rows) are automatically positioned each at the correct Y position one after another.
- The first child is itself a text view (1).
- The second child is itself a horizontal stack. So its children (2 and 3) are automatically positioned next to each other with the correct X.
- Each child of second row has explicit Width 30%, 70% respectively and they are automatically positioned next to each other with the correct X.
- The Height of all text views is explicitly set as 100px.
- The Height of the second row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (2 and 3) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px (100px for 1, 100px for the horizontal stack).


Sample 11:

11.PNG

In markup:

<Stack>
      <TextView Text="1" CssClass="box header" />
      <Row>
           <TextView Text="2" CssClass="box left" />
           <TextView Text="3" CssClass="box right" />
      </Row>
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; } .left { background: green; width: 70%; }
.right { background: purple; width: 30%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its two direct children (rows) are automatically positioned each at the correct Y position one after another.
- The first child is itself a text view (1).
- The second child is itself a horizontal stack. So its children (2 and 3) are automatically positioned next to each other with the correct X.
- Each child of second row has explicit Width 70%, 30% respectively and they are automatically positioned next to each other with the correct X.
- The Height of all text views is explicitly set as 100px.
- The Height of the second row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (2 and 3) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px (100px for 1, 100px for the horizontal stack).


Sample 12:

12.PNG

In markup:

<Stack>
      <TextView Text="1" CssClass="box header" />
      <Row>
            <TextView Text="2" CssClass="box left" />
            <TextView Text="3" CssClass="box right" />
      </Row>
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; } .left { background: green; width: 50%; }
.right { background: purple; width: 50%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its two direct children (rows) are automatically positioned each at the correct Y position one after another.
- The first child is itself a text view (1).
- The second child is itself a horizontal stack. So its children (2 and 3) are automatically positioned next to each other with the correct X.
- Each child of second row has explicit Width that is equal to 50% of its parent. They are automatically positioned next to each other with the correct X.
- The Height of all text views is explicitly set as 100px.
- The Height of the second row (horizontal stack) is determined by its tallest direct child which is 100px as in this case all its children (2 and 3) have 100px.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px (100px for 1, 100px for the horizontal stack).


Sample 13:

13.PNG

In markup:

<Row>
       <TextView Text="3" CssClass="box left" />
       <Stack>
            <TextView Text="1" CssClass="box header" />
            <TextView Text="2" CssClass="box footer" />
        </Stack>
</Row>

In Css:

.box { color: white; text-align: center; }
.header { background: blue; height:20%; }
.footer { background: orange; height:80% }
.left { background: green; width: 20%; height:200px; }

Elaboration of rendering logic:

- The root container is a HORIZONTAL stack. So its two direct children (columns) are automatically positioned each at the correct X position one after another.
- The first child is itself a text view (3) and its explicit width is 20% of parent. So second child takes as much width as it can (80%).
- The second child is itself a vertical stack. So its children (1 and 2) are automatically positioned next to each other with the correct Y.
- Each child of second column has explicit height 20%, 80% respectively and they are automatically positioned next to each other with the correct Y.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px.


Sample 14:

14.PNG

In markup:

<Row>
      <TextView Text="3" CssClass="box left" />
      <Stack>
           <TextView Text="1" CssClass="box header" />
           <TextView Text="2" CssClass="box footer" />
       </Stack>
</Row>

In Css:

.box { color: white; text-align: center; }
.header { background: blue; height:20%; }
.footer { background: orange; height:80% }
.left { background: green; width: 100px; height:200px; }

Elaboration of rendering logic:

- The root container is a HORIZONTAL stack. So its two direct children (columns) are automatically positioned each at the correct X position one after another.
- The first child is itself a text view (3) and its explicit width is equal to 100px. So second child takes as much width as it can.
- The second child is itself a vertical stack. So its children (1 and 2) are automatically positioned next to each other with the correct Y.
- Each child of second column has explicit height 20%, 80% respectively and they are automatically positioned next to each other with the correct Y.
- The Height of the root object (vertical stack) is determined by the sum of its children, which is 200px.


Sample 15:

15.PNG

In markup:

<Row>
      <TextView Text="3" CssClass="box left" />
      <Stack>
           <TextView Text="1" CssClass="box header" />
           <TextView Text="2" CssClass="box footer" />
      </Stack>
</Row>

In Css:

.box { color: white; text-align: center; }
.header { background: blue; height:50px; }
.footer { background: orange; height:100px; width:100%; }
.left { background: green; width: 50px; height:150px; }

Elaboration of rendering logic:

- The root container is a HORIZONTAL stack. So its two direct children (columns) are automatically positioned each at the correct X position one after another.
- The first child is itself a text view (3) and its explicit width is equal to 50px and its height is 150px. So second child takes as much width as it can.
- The second child is itself a vertical stack. So its children (1 and 2) are automatically positioned next to each other with the correct Y.
- First child of second column has explicit height 50px and second one has explicit height 100px. So the height of the root is sum of them (100+50) and is equal to 150px. 


Sample 16:

16.PNG

In markup:

<Stack>
      <TextView Text="1" CssClass="box header" />
      <Row>
              <TextView Text="2" CssClass="box left" />
              <TextView Text="3" CssClass="box right" />
       </Row>
</Stack>

In Css:

.box { color: white; text-align: center; height:150px;}
.header { background: blue; height:50px;}
.left { background: green; width: 20%; }
.right { background: purple; width: 80%; }

Elaboration of rendering logic:

- The root container is a vertical stack. So its two direct children (rows) are automatically positioned each at the correct Y position one after another.
- The first child is itself a text view (1).
- The second child is itself a horizontal stack. So its children (2 and 3) are automatically positioned next to each other with the correct X.
- The width of second row is 150px.
- The Height of the root is sum of 1 and 2. So it is equal to 150+50= 200px.


Sample 17:

17.PNG

In markup:

<Row>
      <Stack>
            <TextView Text="1" CssClass="box header" />
            <TextView Text="2" CssClass="box footer" />
       </Stack>
       <TextView Text="3" CssClass="box right" />
</Row>

In Css:

.box { color: white; text-align: center; }
.header { background: blue; height:20%; }
.footer { background: orange; height:80% }
.right { background: purple; width: 20%; height:200px; }

Elaboration of rendering logic:

- The root container is a HORIZONTAL stack. So its two direct children (columns) are automatically positioned each at the correct Y position one after another.
- The root container does not have the explicit size and the size of it is related to its children. Its height is equal to second column(3) that is 200px.
- The first child is itself a vertical stack and its explicit height is equal to 20% of container. It means 20% of 200px. So second child takes as much width as it can.
- The Height of the root object (vertical stack) is determined by the text view, which is 200px.
- The height of The second child of first column(2) is 80% of 200px.


Sample 18:

18.PNG

In markup:

<Row>
       <Stack>
            <TextView Text="1" CssClass="box header" />
            <TextView Text="3" CssClass="box middle" />
            <TextView Text="2" CssClass="box footer" />
        </Stack>
        <TextView Text="4" CssClass="box right" />
</Row>

In Css:

.box { color: white; text-align: center;}
.header { background: blue; height:20%; }
.middle { background: brown; height:60%; }
.footer { background: orange; height:20% }
.right { background: green; width: 20%; height:200px; }

Elaboration of rendering logic:

- The root container is a HORIZONTAL stack. So its three direct children (columns) are automatically positioned each at the correct Y position one after another.
- The root container does not have the explicit height size and the size of it is related to its children. Its height is equal to second column(3) that is 200px.
- The first child is itself a vertical stack and its explicit height is equal to 20% of container. It means 20% of 200px. Meanwhile, the second child(3) takes 60% of 200px and then the last child(2) takes 20% of 200px.
- The Height of the root object (vertical stack) is determined by the text view(4), which is 200px.
- The height of The second child of first column(2) is 80% of 200px.


Sample 19:

19.PNG

In markup:

<Stack>
     <Row>
            <TextView Text="1" CssClass="box topleft" />
            <TextView Text="2" CssClass="box topright" />
      </Row>
      <Row>
            <TextView Text="3" CssClass="box downleft" />
            <TextView Text="4" CssClass="box downmiddle" />
             <TextView Text="5" CssClass="box downright" />
       </Row>
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.topleft { background: green; width: 50%; }
.topright { background: purple; width: 50%; }
.downleft { background: silver; width: 34%; }
.downmiddle { background: gold; width: 32%; }
.downright { background: gray; width: 34%; }

Elaboration of rendering logic:

- The root container is a vertical stack and it has two horizontal nested stacks.
- The first nested stack includes two direct children (1 and 2) are automatically positioned each at the correct X position one after another. The height of it is 100px.
- The second nested stack includes three direct children (3, 4 and 5) are automatically positioned each at the correct X position one after another.The height of it is 100px.
- The root container has the explicit height size and the size of it is 200px, because each row is 100px.
- In terms of first row, the first child(1) has 50% of container for its width. So the measure is equal to half of container. The second one(2) is too.
- In terms of second row, the first child has 34% of container for its width. The second one is 32% and the third one is 34%.
- The width of the root object (vertical stack) is determined by the container width.


Sample 20:

20.PNG

In markup:

<Stack>
        <TextView Text="1" CssClass="box header" />
        <Row>
                <TextView Text="2" CssClass="box topleft" />
                <TextView Text="3" CssClass="box topright" />
        </Row>
        <Row>
                 <TextView Text="4" CssClass="box downleft" />
                 <TextView Text="5" CssClass="box downmiddle" />
                 <TextView Text="6" CssClass="box downright" />
         </Row>
</Stack>

In Css:

.box { color: white; text-align: center; height: 100px; }
.header { background: blue; }
.topleft { background: green; width: 50%; }
.topright { background: purple; width: 50%; }
.downleft { background: silver; width: 34%; }
.downmiddle { background: gold; width: 32%; }
.downright { background: gray; width: 34%; }

Elaboration of rendering logic:

- The root container is a vertical stack and it has a text view and two horizontal nested stacks.
- The text view height is 100px.
- The first nested stack(second row) includes two direct children (2 and 3) are automatically positioned each at the correct X position one after another. The height of it is 100px.
- The second nested stack(third row) includes three direct children (4, 5 and 6) are automatically positioned each at the correct X position one after another.The height of it is 100px.
- The root container has the explicit height size and the size of it is 300px, because each row is 100px.
- In terms of first row, the first child(1) has 100% of container for its width.
- In terms of second row, the first child has 50% of container for its width. The second one is 50%.
- In terms of second row, the first child has 34% of container for its width. The second one is 32% and the third one is 34%.
- The width of the root object (vertical stack) is determined by the container width.





‹
Zebble is a product of Geeks Ltd , a software house based in London, UK. All rights are reserved.

Telephone: +44 (0)845 643 6229

Email: hello@zebble.net

Address: 66a London Road, Morden

Greater London, United Kingdom, SM4 5BE

Privacy Statement
Terms & Conditions
Contact Us