chore: cleanup

apps/ui/app/list-view/csslv-page.ts

@@ -0,0 +1,7 @@
+export function loaded(args) {
+	var items = [];
+	for (var i = 0; i < 100; i++) {
+		items.push('name' + i);
+	}
+	args.object.bindingContext = { items: items };
+}

apps/ui/app/list-view/csslv-page.xml

@@ -0,0 +1,7 @@
+<Page loaded="loaded">
+    <ListView items="{{ items }}" >
+      <ListView.itemTemplate>
+        <Label text="{{ $value }}" style="text-transform: uppercase; text-decoration: underline;"/>
+      </ListView.itemTemplate>
+    </ListView>
+</Page>

apps/ui/app/list-view/dynamic-templates-page.ts

@@ -0,0 +1,21 @@
+import { Page } from '@nativescript/core/ui/page';
+import { ViewModel } from './main-view-model';
+
+export function pageLoaded(args) {
+	let page = <Page>args.object;
+	const viewModel = new ViewModel();
+
+	page.bindingContext = {
+		items: viewModel.items,
+	};
+}
+
+exports.onItemTap = function (args) {
+	const list = args.object;
+	let index = args.index;
+	let listArray = list.page.bindingContext['items'];
+	let currentItem = listArray.getItem(index);
+
+	currentItem.age = currentItem.age + 1;
+	listArray.setItem(index, currentItem);
+};

apps/ui/app/list-view/dynamic-templates-page.xml

@@ -0,0 +1,14 @@
+<Page loaded="pageLoaded">
+    <GridLayout id="grid-layout">
+        <ListView id="lv1" items="{{ items }}" itemTemplateSelector="age % 2 === 0 ? 'green':'red'" itemTap="onItemTap">
+            <ListView.itemTemplates>
+                <template key="red">
+                    <Label text="{{ name + ' ' + id }}" style.backgroundColor="red"/>
+                </template>
+                <template key="green">
+                    <Label text="{{  name + ' ' + id }}" style.backgroundColor="green"/>
+                </template>
+            </ListView.itemTemplates>
+        </ListView>
+    </GridLayout>
+</Page>

apps/ui/app/list-view/images-template-page.ts

@@ -0,0 +1,14 @@
+import { EventData, Observable } from '@nativescript/core/data/observable';
+import { Page } from '@nativescript/core/ui/page';
+
+export function navigatingTo(args: EventData) {
+	let page = <Page>args.object;
+	page.bindingContext = new ImagesTemplateViewModel();
+}
+
+export class ImagesTemplateViewModel extends Observable {
+	public items: Array<string> = ['res://icon', null, '~/resources/images/no-image.png', null, '~/resources/images/no-image.png', null, 'res://icon', null];
+	constructor() {
+		super();
+	}
+}

apps/ui/app/list-view/images-template-page.xml

@@ -0,0 +1,11 @@
+
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <ListView items="{{ items }}"  loaded="onLoaded" itemLoading="onItemLoading" itemTap="onItemTap">
+      <ListView.itemTemplate>
+          <StackLayout>
+              <Label text="test" textWrap="true" />
+              <Image src="{{ $value }}" stretch="none" />
+          </StackLayout>
+      </ListView.itemTemplate>
+  </ListView>
+</Page>

apps/ui/app/list-view/item-re-layout-page.ts

@@ -0,0 +1,23 @@
+import { fromObject } from '@nativescript/core/data/observable';
+
+export function loaded(args) {
+	var items = [];
+
+	for (let i = 0; i < 100; i++) {
+		items.push(
+			fromObject({
+				text: '<' + i + '>',
+				selected: !!!(i % 5),
+			})
+		);
+	}
+	args.object.bindingContext = { items: items };
+}
+
+export function toggle(args) {
+	console.log('toggle : ');
+	let context = args.object.bindingContext;
+	console.dir(context);
+	context.set('selected', !context.selected);
+	// args.object.requestLayout();
+}

apps/ui/app/list-view/item-re-layout-page.xml

@@ -0,0 +1,15 @@
+<Page loaded="loaded">
+  <StackLayout>
+    <ListView items="{{ items }}">
+      <ListView.itemTemplate>
+        <StackLayout orientation="horizontal" tap="toggle">
+            <Label text="{{ text }}" />
+            <Label text="marked" visibility="{{ selected ? 'visible' : 'collapse' }}" />
+            <Label text="{{ selected ? 'yep' : 'nope' }}"  />
+            <Label text="test" class="{{ selected ? 'selected' : 'unselected' }}" />
+            <Label text="{{ selected ? 'yep' : 'nope' }}" class="{{ selected ? 'selected' : 'unselected' }}" />
+        </StackLayout>
+      </ListView.itemTemplate>
+    </ListView>
+  </StackLayout>
+</Page>

apps/ui/app/list-view/item-re-layout.css

@@ -0,0 +1,20 @@
+Label {
+    margin: 6;
+    padding: 4;
+}
+
+.unselected {
+    border-width: 4;
+    border-color: gray;
+    border-radius: 10;
+    background: white;
+    color: gray
+}
+
+.selected {
+    border-width: 4;
+    border-color: blue;
+    border-radius: 10;
+    background: lightcoral;
+    color: blue;
+}

apps/ui/app/list-view/list-view-page.css

@@ -0,0 +1,9 @@
+Label,
+Button {
+    font-size: 8;
+}
+
+ListView {
+    border-width: 1;
+    margin: 1;
+}

apps/ui/app/list-view/list-view-page.ts

@@ -0,0 +1,88 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { ObservableArray } from '@nativescript/core/data/observable-array';
+import { View, KeyedTemplate } from '@nativescript/core/ui/core/view';
+import { Page } from '@nativescript/core/ui/page';
+import { ViewModel, Item } from './main-view-model';
+import { ListView } from '@nativescript/core/ui/list-view';
+import { Label } from '@nativescript/core/ui/label';
+import { GridLayout } from '@nativescript/core/ui/layouts/grid-layout';
+import { Color } from '@nativescript/core/color';
+
+export function selectItemTemplate(item: Item, index: number, items: ObservableArray<Item>): string {
+	return item.id % 10 === 0 ? 'red' : item.id % 2 === 0 ? 'green' : 'yellow';
+}
+
+export function pageLoaded(args: EventData) {
+	let page = <Page>args.object;
+	page.bindingContext = new ViewModel();
+
+	let lv4 = page.getViewById<ListView>('lv4');
+	lv4.itemTemplateSelector = (item: Item, index: number, items: ObservableArray<Item>) => {
+		return index % 10 === 0 ? 'red' : index % 2 === 0 ? 'green' : 'yellow';
+	};
+
+	let createLabel = (backgroundColor: Color) => {
+		let label = new Label();
+		label.bind({
+			sourceProperty: null,
+			targetProperty: 'text',
+			expression: '$value',
+		});
+		label.style.backgroundColor = backgroundColor;
+
+		return label;
+	};
+
+	lv4.itemTemplates = new Array<KeyedTemplate>(
+		{
+			key: 'red',
+			createView: () => createLabel(new Color('red')),
+		},
+		{
+			key: 'green',
+			createView: () => createLabel(new Color('green')),
+		},
+		{
+			key: 'yellow',
+			createView: () => createLabel(new Color('yellow')),
+		}
+	);
+}
+
+let scrollToBottom = true;
+export function onScroll(args: EventData) {
+	let page = (<View>args.object).page;
+	let gridLayout = page.getViewById<GridLayout>('grid-layout');
+	for (let i = 0, length = gridLayout.getChildrenCount(); i < length; i++) {
+		let listView = <ListView>gridLayout.getChildAt(i);
+		listView.scrollToIndex(scrollToBottom ? listView.items.length - 1 : 0);
+	}
+	scrollToBottom = !scrollToBottom;
+}
+
+export function onScrollToIndex(args: EventData) {
+	let page = (<View>args.object).page;
+	let gridLayout = page.getViewById<GridLayout>('grid-layout');
+	for (let i = 0, length = gridLayout.getChildrenCount(); i < length; i++) {
+		let listView = <ListView>gridLayout.getChildAt(i);
+		listView.scrollToIndex(50);
+	}
+}
+
+export function onScrollToIndexAnimated(args: EventData) {
+	let page = (<View>args.object).page;
+	let gridLayout = page.getViewById<GridLayout>('grid-layout');
+	for (let i = 0, length = gridLayout.getChildrenCount(); i < length; i++) {
+		let listView = <ListView>gridLayout.getChildAt(i);
+		listView.scrollToIndexAnimated(50);
+	}
+}
+
+export function onScrollReset(args: EventData) {
+	let page = (<View>args.object).page;
+	let gridLayout = page.getViewById<GridLayout>('grid-layout');
+	for (let i = 0, length = gridLayout.getChildrenCount(); i < length; i++) {
+		let listView = <ListView>gridLayout.getChildAt(i);
+		listView.scrollToIndex(0);
+	}
+}

apps/ui/app/list-view/list-view-page.xml

@@ -0,0 +1,55 @@
+<Page loaded="pageLoaded">
+    <StackLayout>
+        <StackLayout>
+            <Button text="RESET" tap="onScrollReset" height="30"/>
+            <Button text="SCROLL" tap="onScroll" height="30"/>
+            <Button text="SCROLL TO INDEX 50" tap="onScrollToIndex" height="30"/>
+            <Button text="SCROLL TO INDEX 50 ANIMATED" tap="onScrollToIndexAnimated" height="30"/>
+        </StackLayout>
+        <GridLayout id="grid-layout" columns="*,*" rows="*,*">
+            <ListView id="lv1" col="0" row="0" items="{{ items }}" itemTemplateSelector="selectItemTemplate">
+                <ListView.itemTemplates>
+                    <template key="red">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="red"/>
+                    </template>
+                    <template key="green">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="green"/>
+                    </template>
+                    <template key="yellow">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="yellow"/>
+                    </template>
+                </ListView.itemTemplates>
+            </ListView>
+            <ListView id="lv2" col="1" row="0" items="{{ items }}" itemTemplateSelector="id % 10 === 0 ? 'red' : id % 2 === 0 ? 'green' : 'yellow'">
+                <ListView.itemTemplates>
+                    <template key="red">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="red"/>
+                    </template>
+                    <template key="green">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="green"/>
+                    </template>
+                    <template key="yellow">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="yellow"/>
+                    </template>
+                </ListView.itemTemplates>
+            </ListView>
+            <ListView id="lv3" col="0" row="1" items="{{ items }}" itemTemplateSelector="$index % 10 === 0 ? 'wrong' : $index % 2 === 0 ? 'green' : 'yellow'">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value + ' itemTemplate' }}" textWrap="true"/>
+                </ListView.itemTemplate>
+                <ListView.itemTemplates>
+                    <template key="red">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="red"/>
+                    </template>
+                    <template key="green">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="green"/>
+                    </template>
+                    <template key="yellow">
+                        <Label text="{{ $value }}" textWrap="true" style.backgroundColor="yellow"/>
+                    </template>
+                </ListView.itemTemplates>
+            </ListView>
+            <ListView id="lv4" col="1" row="1" items="{{ items }}"></ListView>
+        </GridLayout>
+    </StackLayout>
+</Page>

apps/ui/app/list-view/listview-bg-separator-color-page.ts

@@ -0,0 +1,7 @@
+export function loaded(args) {
+	var items = [];
+	for (var i = 0; i < 5; i++) {
+		items.push('name' + i);
+	}
+	args.object.bindingContext = { items: items };
+}

apps/ui/app/list-view/listview-bg-separator-color-page.xml

@@ -0,0 +1,16 @@
+<Page loaded="loaded">
+  <StackLayout>
+    <Label text="lightskyblue separator"></Label>
+    <ListView items="{{ items }}" style="separator-color:red; background-color:lightskyblue">
+      <ListView.itemTemplate>
+        <Label text="{{ $value }}"/>
+      </ListView.itemTemplate>
+    </ListView>
+    <Label text="transparent separator"></Label>
+    <ListView items="{{ items }}" style="separator-color:transparent; background-color:transparent">
+      <ListView.itemTemplate>
+        <Label text="{{ $value }}" />
+      </ListView.itemTemplate>
+    </ListView>
+  </StackLayout>
+</Page>

apps/ui/app/list-view/listview-binding-page.ts

@@ -0,0 +1,19 @@
+import { Page, GridLayout, ListView, Observable, ObservableArray, EventData } from '@nativescript/core';
+
+var arr = new ObservableArray();
+for (var i = 0; i < 100; i++) {
+	arr.push('item ' + i);
+}
+
+export function createPage() {
+	var page: Page = new Page();
+	var grid: GridLayout = new GridLayout();
+	var listView: ListView = new ListView();
+	listView.on(ListView.loadedEvent, function (args: EventData) {
+		(<any>args.object).items = arr;
+	});
+	grid.addChild(listView);
+	page.content = grid;
+
+	return page;
+}

apps/ui/app/list-view/main-page.ts

@@ -0,0 +1,28 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { SubMainPageViewModel } from '../sub-main-page-view-model';
+import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
+import { Page } from '@nativescript/core/ui/page';
+
+export function pageLoaded(args: EventData) {
+	const page = <Page>args.object;
+	const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
+	page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
+
+export function loadExamples() {
+	const examples = new Map<string, string>();
+	examples.set('list-view-templates', 'list-view/list-view-page');
+	examples.set('images-template', 'list-view/images-template-page');
+	examples.set('dynamic-templates', 'list-view/dynamic-templates-page');
+	examples.set('bindings', 'list-view/listview-binding-page');
+	examples.set('listview-bg-separator-color', 'list-view/listview-bg-separator-color-page');
+	examples.set('csslv', 'list-view/csslv-page');
+	examples.set('scrolling-and-sizing', 'list-view/scrolling-and-sizing-page');
+	examples.set('row-height', 'list-view/row-height-page');
+	examples.set('width-percent', 'list-view/width-percent-page');
+	examples.set('item-re-layout', 'list-view/item-re-layout-page');
+	examples.set('safe-area', 'list-view/safe-area-page');
+	examples.set('parents-expression', 'list-view/parents-expression-page');
+
+	return examples;
+}

apps/ui/app/list-view/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>

apps/ui/app/list-view/main-view-model.ts

@@ -0,0 +1,65 @@
+import { Observable } from '@nativescript/core/data/observable';
+import { ObservableArray } from '@nativescript/core/data/observable-array';
+
+export class Item extends Observable {
+	private _name: string;
+	private _id: number;
+	private _age: number;
+
+	constructor(name: string, id: number, age: number) {
+		super();
+		this._name = name;
+		this._id = id;
+		this._age = age;
+	}
+
+	get name(): string {
+		return this._name;
+	}
+
+	set name(value: string) {
+		if (this._name !== value) {
+			this._name = value;
+			this.notifyPropertyChange('name', value);
+		}
+	}
+
+	get id(): number {
+		return this._id;
+	}
+
+	set id(value: number) {
+		if (this._id !== value) {
+			this._id = value;
+			this.notifyPropertyChange('id', value);
+		}
+	}
+
+	get age(): number {
+		return this._age;
+	}
+
+	set age(value: number) {
+		if (this._age !== value) {
+			this._age = value;
+			this.notifyPropertyChange('age', value);
+		}
+	}
+
+	public toString() {
+		return `${this.name} ${this.id}`;
+	}
+}
+
+export class ViewModel extends Observable {
+	private _items: ObservableArray<Item>;
+
+	get items(): ObservableArray<Item> {
+		this._items = new ObservableArray<Item>();
+		for (let i = 0; i < 100; i++) {
+			this._items.push(new Item(`Item`, i, 0));
+		}
+
+		return this._items;
+	}
+}

apps/ui/app/list-view/parents-expression-page.ts

@@ -0,0 +1,25 @@
+import { fromObject } from '@nativescript/core/data/observable';
+
+export function onLoaded(args) {
+	const page = args.object;
+	page.bindingContext = fromObject({
+		prefix: 'This is a prefix for: ',
+		languageData: [
+			{
+				name: 'English',
+			},
+			{
+				name: 'Portuguese',
+			},
+			{
+				name: 'Spanish',
+			},
+			{
+				name: 'Russian',
+			},
+			{
+				name: 'Greek',
+			},
+		],
+	});
+}

apps/ui/app/list-view/parents-expression-page.xml

@@ -0,0 +1,20 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <ListView items="{{ languageData }}" separatorColor="red">
+        <ListView.itemTemplate>
+            <StackLayout columns="*,40" rows="*,*">
+                <!-- It works if not an expression -->
+                <Label row="1" text="{{ $parents['Page'].prefix }}"
+                    class="font-weight-bold" fontSize="16" />
+                <!-- Until component gets loaded, $parents['Page'].prefix will return undefined -->
+                <Label row="1" text="{{ $parents['Page'].prefix + name }}"
+                    class="font-weight-bold" fontSize="16" />
+            </StackLayout>
+        </ListView.itemTemplate>
+    </ListView>
+</Page>

apps/ui/app/list-view/row-height-page.ts

@@ -0,0 +1,4 @@
+export function onNavigatingTo(args) {
+	const page = args.object;
+	page.bindingContext = ['Item 1', 'Item 2', 'Item 3'];
+}

apps/ui/app/list-view/row-height-page.xml

@@ -0,0 +1,34 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Row height = 40" class="body m-b-10"/>
+            <ListView items="{{ $value }}" rowHeight="40">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" backgroundColor="green"/>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Row height pixels = 40" class="body m-b-10"/>
+            <ListView items="{{ $value }}" rowHeight="40px">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" backgroundColor="green"/>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Row height dips = 40" class="body m-b-10"/>
+            <ListView items="{{ $value }}" rowHeight="40dips">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" backgroundColor="green"/>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+    </StackLayout>
+</Page>

apps/ui/app/list-view/row-height.css

@@ -0,0 +1,51 @@
+.p-10 {
+    padding: 10 20 10 20;
+}
+
+.m-b-10 {
+    margin-bottom: 10;
+}
+
+.page {
+    background-color: #F2F2F2;
+}
+
+ListView {
+    background-color: yellow;
+}
+
+TextView {
+    background-color: #FFF;
+}
+
+.bordered {
+    border-width: 5;
+    border-color: green;
+}
+
+.fixed-height {
+    height: 55;
+}
+
+.border-radius {
+    border-radius: 15;
+}
+
+.border-radius-nonuniform {
+    border-radius: 10 20 30 40;
+}
+
+.bordered-nonuniform {
+    border-top-color: red;
+    border-right-color: green;
+    border-bottom-color: blue;
+    border-left-color: purple;
+    border-top-width: 5;
+    border-right-width: 10;
+    border-bottom-width: 15;
+    border-left-width: 20;
+}
+
+.body {
+    font-size: 11;
+}

apps/ui/app/list-view/safe-area-page.ts

@@ -0,0 +1,4 @@
+export function onNavigatingTo(args) {
+	const page = args.object;
+	page.bindingContext = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];
+}

apps/ui/app/list-view/safe-area-page.xml

@@ -0,0 +1,16 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <ListView items="{{ $value }}" backgroundColor="#003B46">
+        <ListView.itemTemplate>
+            <GridLayout columns="2*, 3*" backgroundColor="#07575B" margin="10">
+                <Image col="0" stretch="aspectFill" src="~/resources/images/woods.jpg"></Image>
+                <Label col="1" verticalAlignment="top" color="#C4DFE6" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id sem ex. Aenean at ultricies metus, ut tincidunt nunc. Vivamus dictum sem sed ante fermentum, id congue lacus lacinia. " textWrap="true"></Label>
+            </GridLayout>
+        </ListView.itemTemplate>
+    </ListView>
+</Page>

apps/ui/app/list-view/scrolling-and-sizing-page.ts

@@ -0,0 +1,4 @@
+export function onNavigatingTo(args) {
+	const page = args.object;
+	page.bindingContext = ['The quick', 'brown fox', 'jumped over', 'the', 'lazy dog.'];
+}

apps/ui/app/list-view/scrolling-and-sizing-page.xml

@@ -0,0 +1,65 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout>
+        <StackLayout class="p-10" row="0">
+            <Label text="Default style = scrolls out of container" class="body m-b-10" />
+            <ListView items="{{ $value }}" height="40">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" />
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="1">
+            <Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
+            <ListView items="{{ $value }}" height="40" class="bordered">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" />
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="2">
+            <Label text="border-radius" class="body m-b-10" />
+            <ListView items="{{ $value }}" class="bordered fixed-height border-radius">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" />
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="2">
+            <Label text="border-radius = weird" class="body m-b-10" />
+            <ListView items="{{ $value }}" class="bordered fixed-height border-radius-nonuniform">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" />
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+
+        <StackLayout class="p-10" row="3">
+            <Label text="border-width = weird" class="body m-b-10" />
+            <ListView items="{{ $value }}" class="bordered-nonuniform fixed-height">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" />
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+
+         <StackLayout class="p-10" row="3">
+            <Label text="ios-estimated-row-height" class="body m-b-10" />
+            <ListView items="{{ $value }}" iosEstimatedRowHeight="0">
+                <ListView.itemTemplate>
+                    <Label text="{{ $value }}" />
+                </ListView.itemTemplate>
+            </ListView>
+            <Label text="after-auto-estimated-height" class="body m-b-10" />
+        </StackLayout>
+
+    </StackLayout>
+</Page>

apps/ui/app/list-view/scrolling-and-sizing.css

@@ -0,0 +1,47 @@
+.p-10 {
+    padding: 10 20 10 20;
+}
+
+.m-b-10 {
+    margin-bottom: 10;
+}
+
+.page {
+    background-color: #F2F2F2;
+}
+
+TextView {
+    background-color: #FFF;
+}
+
+.bordered {
+    border-width: 5;
+    border-color: green;
+}
+
+.fixed-height {
+    height: 55;
+}
+
+.border-radius {
+    border-radius: 15;
+}
+
+.border-radius-nonuniform {
+    border-radius: 10 20 30 40;
+}
+
+.bordered-nonuniform {
+    border-top-color: red;
+    border-right-color: green;
+    border-bottom-color: blue;
+    border-left-color: purple;
+    border-top-width: 5;
+    border-right-width: 10;
+    border-bottom-width: 15;
+    border-left-width: 20;
+}
+
+.body {
+    font-size: 11;
+}

apps/ui/app/list-view/width-percent-page.ts

@@ -0,0 +1,18 @@
+import { View } from '@nativescript/core/ui/core/view';
+import { ListView } from '@nativescript/core/ui/list-view';
+import { EventData } from '@nativescript/core/data/observable';
+
+export function onNavigatingTo(args) {
+	const page = args.object;
+	page.bindingContext = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];
+}
+
+let scrollToBottom = true;
+export function onScroll(args: EventData) {
+	let page = (<View>args.object).page;
+
+	let listView = page.getViewById<ListView>('listView');
+	listView.scrollToIndex(scrollToBottom ? listView.items.length - 1 : 0);
+
+	scrollToBottom = !scrollToBottom;
+}

apps/ui/app/list-view/width-percent-page.xml

@@ -0,0 +1,20 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
+
+    <Page.actionBar>
+        <ActionBar title="My App" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout>
+        <StackLayout class="p-10" row="0">
+            <ListView id="listView" items="{{ $value }}" height="300">
+                <ListView.itemTemplate>
+                    <StackLayout>
+                        <Label width="50%" height="150" text="{{ $value }}" backgroundColor="green"/>
+                    </StackLayout>
+                </ListView.itemTemplate>
+            </ListView>
+        </StackLayout>
+        <Button text="SCROLL" tap="onScroll" height="60"/>
+    </StackLayout>
+</Page>