How to Dock a bottom panel in NativeScript - nativescript

Question

The Problem
I have a page that is a slider, simply displays an image, and you slide left or right to get to the next/previous.
What I am trying to do, is at the bottom of the screen overlay a panel where I can enter some text describing the image.
Here is my XML:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ns="nativescript-carousel">
<Page.actionBar>
<ActionBar title="Customer On Boarding" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="">
<ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
<ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
<!-- Dock Bottom -->
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
</ns:Carousel>
</StackLayout>
</Page>
and here is a screenshot:
At the bottom I would like a 100% width, roughly 100px high, bordered 'panel' I can add some text.
Does anyone have any ideas? I tried Dock Failed miserably. Ugh.
Thank You for looking.
John

Answer 1

You can use the GridLayout like the example below
<GridLayout columns="*" rows=auto, * " backgroundColor="lightgray ">
<StackLayout class=" row=" 0">
<ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
<ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
<!-- Dock Bottom -->
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
</ns:Carousel>
</StackLayout>
<StackLayout row="1">
// add text panel here
</StackLayout>
</GridLayout>